What is css-declaration-sorter?
The css-declaration-sorter npm package is a tool used to automatically sort the declarations within CSS rulesets in a consistent order. It can be integrated into build processes to ensure that CSS is organized according to a specific order, which can make the CSS easier to read and maintain. It can also potentially lead to better compression when minifying CSS files.
What are css-declaration-sorter's main functionalities?
Sorting CSS declarations
This feature sorts the declarations within a CSS rule based on the specified order, such as 'smacss', 'concentric-css', or 'alphabetical'. The code sample shows how to use css-declaration-sorter with PostCSS to sort the declarations in a given CSS string.
const postcss = require('postcss');
const cssDeclarationSorter = require('css-declaration-sorter');
postcss([cssDeclarationSorter({ order: 'smacss' })])
.process('a { color: yellow; z-index: 2; }')
.then(result => console.log(result.css));
Integration with build tools
css-declaration-sorter can be integrated with build tools like Gulp to automatically sort CSS files during the build process. The code sample demonstrates how to set up a Gulp task that processes CSS files with css-declaration-sorter using PostCSS.
const gulp = require('gulp');
const postcss = require('gulp-postcss');
const cssDeclarationSorter = require('css-declaration-sorter');
gulp.task('css', function () {
return gulp.src('src/*.css')
.pipe(postcss([cssDeclarationSorter({ order: 'alphabetical' })]))
.pipe(gulp.dest('dist'));
});
Other packages similar to css-declaration-sorter
postcss-sorting
postcss-sorting is similar to css-declaration-sorter in that it sorts CSS properties according to a specified order. However, it also allows for sorting at-rules and rules within CSS files, providing a more comprehensive sorting capability.
stylelint-order
stylelint-order is a plugin for stylelint that checks the order of content within declaration blocks. While it does not automatically sort the CSS, it can enforce a specific order and is often used in conjunction with stylelint to maintain code quality.
perfectionist
perfectionist is a PostCSS plugin that not only sorts declarations but also beautifies CSS with consistent spacing and syntax. It offers a more stylistic approach to organizing CSS compared to css-declaration-sorter, which focuses solely on sorting declarations.
CSS Declaration Sorter
A Node.js module and PostCSS plugin to sort CSS declarations based on their property names. Ensuring the CSS is organized, more consistent and in order... Besides, sorted CSS is smaller when gzipped because there will be more similar strings. The intention of this module is to sort the source CSS code of a project in the build process. Check out the Atom package for individual usage.
Alphabetical example
Input:
body {
display: block;
animation: none;
color: #C55;
border: 0;
}
Output:
body {
animation: none;
border: 0;
color: #C55;
display: block;
}
Niceness
- Up-to-date CSS properties fetched from the MDN Web Platform.
- Sort using your own defined order.
- Nested rules sorting support.
- Less and SCSS support when combined with either postcss-scss or postcss-less.
- Thought-out sorting orders out of the box, approved by their authors.
Sorting orders
-
Alphabetically
alphabetically
Default, ordering in a simple alphabetical manner from a - z.
-
SMACSS
smacss
Ordering from most important, flow affecting properties, to least important properties.
- Box
- Border
- Background
- Text
- Other
-
Concentric CSS
concentric-css
Starts outside the box model, moves inward.
- Positioning
- Visibility
- Box model
- Dimensions
- Text
-
Custom order
Provide your own order by passing the location of a JSON file containing an array.
Usage
npm install 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, install postcss-cli
or prefix with npx
.
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
Vanilla JS
const fs = require('fs');
const postcss = require('postcss');
const cssDeclarationSorter = require('css-declaration-sorter');
postcss([cssDeclarationSorter({order: 'smacss'})])
.process(fs.readFileSync('some.css'))
.then(function (result) {
fs.writeFileSync('some.css', result.css);
});
Gulp
const gulp = require('gulp');
const gulpPostcss = require('gulp-postcss');
const cssDeclarationSorter = require('css-declaration-sorter');
gulp.task('css', function () {
return gulp.src('some.css')
.pipe(gulpPostcss([cssDeclarationSorter({order: 'smacss'})]))
.pipe(gulp.dest('./'));
});
See PostCSS documentation for more examples and other environments.