Repository files navigation

PostCSS plugin to keep rules and at-rules content in order.

Lint and autofix stylesheet order withstylelint-order.

• Sorts rules and at-rules content.
• Sorts properties.
• Sorts at-rules by different options.
• Groups properties, custom properties, dollar variables, nested rules, nested at-rules.
• Supports CSS, SCSS (usingpostcss-scss), CSS-in-JS (withpostcss-styled-syntax), HTML (withpostcss-html), and most likely any other syntax added by other PostCSS plugins.

npm install --save-dev postcss postcss-sorting

The plugin has no default options. Everything is disabled by default.

• order: Specify the order of content within declaration blocks.
• properties-order: Specify the order of properties within declaration blocks.
• unspecified-properties-position: Specify position for properties not specified inproperties-order.
• throw-validate-errors: Throw config validation errors instead of showing and ignoring them. Defaults tofalse.

Comments that are before node and on a separate line linked to that node. Shared-line comments are also linked to that node. Shared-line comments are comments which are located after a node and on the same line as a node.

a {top:5px;/* shared-line comment belongs to `top` *//* comment belongs to `bottom` *//* comment belongs to `bottom` */bottom:15px;/* shared-line comment belongs to `bottom` */}

Some at-rules, likecontrol andfunction directives in Sass, are ignored. It means rules won't touch content inside these at-rules, as doing so could change or break functionality.

Plugin will ignore rules, which have template literal interpolation, to avoid breaking the logic:

constComponent=styled.div`/* The following properties WILL NOT be sorted, because interpolation is on properties level */z-index: 1;top: 1px;${props=>props.great&&'color: red'};position: absolute;display: block;div {/* The following properties WILL be sorted, because interpolation for property value only */z-index: 2;position: static;top:${2+10}px;display: inline-block;}`;

SeePostCSS docs for more examples.

Addpostcss-cli and PostCSS Sorting to your project:

npm install postcss postcss-cli postcss-sorting --save-dev

Create apostcss.config.js with PostCSS Sorting configuration:

module.exports={plugins:{'postcss-sorting':{order:['custom-properties','dollar-variables','declarations','at-rules','rules',],'properties-order':'alphabetical','unspecified-properties-position':'bottom',},},};

Or, add the'postcss-sorting' section to your existingpostcss-cli configuration file.

Next execute:

npx postcss --no-map --replace your-css-file.css

For more information and options, please consult thepostcss-cli docs.

Addgulp-postcss and PostCSS Sorting to your build tool:

npm install postcss gulp-postcss postcss-sorting --save-dev

Enable PostCSS Sorting within your Gulpfile:

letgulp=require('gulp');letpostcss=require('gulp-postcss');letsorting=require('postcss-sorting');exports['sort-css']=()=>{returngulp.src('./css/src/*.css').pipe(postcss([sorting({/* options */}),])).pipe(gulp.dest('./css/src'));};

This plugin available asSublime Text,Atom,VS Code, andEmacs plugin. Though, seems all these plugins are not maintained.

stylelint andstylelint-order help lint stylesheets and let you know if stylesheet order is correct. Also, they could autofix stylesheets.

I recommendPrettier for formatting stylesheets.