A Node.js module and PostCSS plugin to sort CSS, SCSS or Less declarations based on their property names. Ensuring styling is organized, more consistent and in order... The goal of this package is to sort the source code of a project in the build process or to decrease the distributed CSS gzipped size.
Thought-out sorting orders out of the box, approved by their authors.
Alphabetical example
Input:
body {
display: block;
animation: none;
color:#C55;
border:0;
}
Output:
body {
animation: none;
border:0;
color:#C55;
display: block;
}
Built-in sorting orders
Alphabetical alphabetical Default, order in a simple alphabetical manner from a - z.
SMACSS smacss Order from most important, flow affecting properties, to least important properties.
Box
Border
Background
Text
Other
Concentric CSS concentric-css Order properties applying outside the box model, moving inward to intrinsic changes.
Positioning
Visibility
Box model
Dimensions
Text
Usage
Following the PostCSS plugin guidelines, this package depends on PostCSS as a peer dependency: npm install postcss css-declaration-sorter --save-dev
CLI
This module does not include its own CLI but works with the official PostCSS CLI. To use the examples below, the postcss-cli package is a required dependency.
Piping out result from file: postcss input.css --use css-declaration-sorter | cat
Sorting all files in a directory with SCSS syntax using postcss-scss by overwriting: postcss ./src/**/*.scss --syntax postcss-scss --use css-declaration-sorter --replace --no-map
Sorting all files in the directory with SCSS syntax and SMACSS order by overwriting, using package.json configuration:
Type: string or function
Default: alphabetical
Options: alphabetical, smacss, concentric-css
Provide the name of one of the built-in sort orders or a comparison function that is passed to (Array.sort). This function receives two declaration names and is expected to return -1, 0 or 1 depending on the wanted order.
keepOverrides
Type: Boolean
Default: false
To prevent breaking legacy CSS where shorthand declarations override longhand declarations (also taking into account vendor prefixes) this option can enabled. For example animation-name: some; animation: greeting; will be kept in this order when keepOverrides is true.
Siilwyn/css-declaration-sorter
CSS Declaration Sorter
A Node.js module and PostCSS plugin to sort CSS, SCSS or Less declarations based on their property names. Ensuring styling is organized, more consistent and in order... The goal of this package is to sort the source code of a project in the build process or to decrease the distributed CSS gzipped size.
Check out the Prettier plugin for usage with a variety of file formats.
Niceness
Alphabetical example
Input:
Output:
Built-in sorting orders
Alphabetical
alphabetical
Default, order in a simple alphabetical manner from a - z.
SMACSS
smacss
Order from most important, flow affecting properties, to least important properties.
Concentric CSS
concentric-css
Order properties applying outside the box model, moving inward to intrinsic changes.
Usage
Following the PostCSS plugin guidelines, this package depends on PostCSS as a peer dependency:
npm install postcss css-declaration-sorter --save-dev
CLI
This module does not include its own CLI but works with the official PostCSS CLI. To use the examples below, the
postcss-cli
package is a required dependency.Piping out result from file:
postcss input.css --use css-declaration-sorter | cat
Sorting multiple files by overwriting:
postcss *.css --use css-declaration-sorter --replace --no-map
Sorting all files in a directory with SCSS syntax using postcss-scss by overwriting:
postcss ./src/**/*.scss --syntax postcss-scss --use css-declaration-sorter --replace --no-map
Sorting all files in the directory with SCSS syntax and SMACSS order by overwriting, using
package.json
configuration:postcss ./src/**/*.scss --replace --config package.json
Vanilla JS
View more usage examples in combination with other tools.
API
cssDeclarationSorter({ order, keepOverrides })
order
Type:
string
orfunction
Default:
alphabetical
Options:
alphabetical
,smacss
,concentric-css
Provide the name of one of the built-in sort orders or a comparison function that is passed to (
Array.sort
). This function receives two declaration names and is expected to return-1
,0
or1
depending on the wanted order.keepOverrides
Type:
Boolean
Default:
false
To prevent breaking legacy CSS where shorthand declarations override longhand declarations (also taking into account vendor prefixes) this option can enabled. For example
animation-name: some; animation: greeting;
will be kept in this order whenkeepOverrides
istrue
.