peach a19a732be8 commit message | пре 2 година | |
---|---|---|
.. | ||
orders | пре 2 година | |
src | пре 2 година | |
changelog.md | пре 2 година | |
license.md | пре 2 година | |
package.json | пре 2 година | |
readme.md | пре 2 година |
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.
Input:
body {
display: block;
animation: none;
color: #C55;
border: 0;
}
Output:
body {
animation: none;
border: 0;
color: #C55;
display: block;
}
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.
Concentric CSS
concentric-css
Starts outside the box model, moves inward.
Custom order
Provide your own order by passing the location of a JSON file containing an array.
npm install css-declaration-sorter --save-dev
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
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);
});
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.