Beautify CSS files.

With npm do:

npm install perfectionist --save

h1   {
         color   :  red }

h1 {
    color: red;
}

h1 { color: red; }

h1{color:red}

Type: string Required option.

Pass a CSS string to beautify it.

Type: boolean Default: true

Set this to false to disable visual cascading of vendor prefixed properties. Note that this transform only applies to the expanded format.

/* true */
h1 {
    -webkit-border-radius: 12px;
            border-radius: 12px;
}

/* false */
h1 {
    -webkit-border-radius: 12px;
    border-radius: 12px;
}

Type: string Default: lower

Set either lower or upper to transform hexadecimal colors to the according case.

/* upper */
p { color: #C8C8C8 }

/* lower */
p { color: #c8c8c8 }

Type: boolean Default: true

Set this to true to shorten hexadecimal colors.

/* true */
p { color: #fff }

/* false */
p { color: #ffffff }

Type: string Default: expanded

Pass either expanded, compact or compressed. Note that the compressed format only facilitates simple whitespace compression around selectors & declarations. For more powerful compression, see cssnano.

Type: string Default: (space)

Specify \t here instead if you would like to use tabs for indentation.

Type: number Default: 4

This number will be used as a basis for all indent levels, using the expanded format.

Type: boolean Default: true

Set this to true to trim leading zero for fractional numbers less than 1.

/* true */
p { line-height: .8 }

/* false */
p { line-height: 0.8 }

Type: boolean Default: true

Set this to true to traim trailing zeros in numbers.

/* true */
div { top: 50px }

/* false */
div { top: 50.000px }

Type: boolean|number Default: 80

If set to a positive integer, set a maximum width for at-rule parameters; if they exceed this, they will be split up over multiple lines. If false, this behaviour will not be performed. Note that this transform only applies to the expanded format.

Type: boolean|number Default: 80

If set to a positive integer, set a maximum width for a selector string; if it exceeds this, it will be split up over multiple lines. If false, this behaviour will not be performed. Note that this transform is excluded from the compressed format.

Type: boolean|number Default: 80

If set to a positive integer, set a maximum width for a property value; if it exceeds this, it will be split up over multiple lines. If false, this behaviour will not be performed. Note that this transform only applies to the expanded format.

Type: boolean Default: false

Generate a sourcemap with the transformed CSS.

Type: string

Specify scss if you would like to also format SCSS-style single line comments. This loads the postcss-scss plugin.

Type: boolean Default: true

Set this to true to trim units after zero length.

/* true */
div { padding: 0 }

/* false */
div { padding: 0px }

perfectionist can also be consumed as a PostCSS plugin. See the documentation for examples for your environment.

perfectionist also ships with a CLI app. To see the available options, just run:

$ perfectionist --help

See the PostCSS documentation for examples for your environment.

• Sublime Text plugin
• Atom plugin

Pull requests are welcome. If you add functionality, then please add unit tests to cover it.

MIT © Ben Briggs