Need help with postcss-sorting?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

hudochenkov
458 Stars 33 Forks MIT License 291 Commits 2 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 7,834
CSS
Sublime...
Markdow...
css-res...
270 commits
# 388,443
JavaScr...
CSS
postcss...
formatt...
2 commits
# 25,080
JavaScr...
carouse...
micro-l...
js
1 commit
# 90,130
aws-s3
github-...
Visual ...
pretty-...
1 commit
# 50,595
JavaScr...
Ruby
Shell
authent...
1 commit
# 646,244
JavaScr...
CSS
postcss...
formatt...
1 commit
# 665,433
JavaScr...
CSS
postcss...
formatt...
1 commit
# 471,911
JavaScr...
CSS
postcss...
formatt...
1 commit

PostCSS Sorting

npm version npm downloads last month

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

Lint and autofix stylesheet order with stylelint-order.

Features

  • 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 (using postcss-scss), CSS-in-JS (with @stylelint/postcss-css-in-js), HTML (with postcss-html), and most likely any other syntax added by other PostCSS plugins.

Installation

npm install --save-dev postcss postcss-sorting

Options

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 in
    properties-order
    .
  • throw-validate-errors
    : Throw config validation errors instead of showing and ignoring them. Defaults to
    false
    .

Caveats

Handling comments

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` */
}

Ignored at-rules

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

CSS-in-JS

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

const Component = 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;
}

`;

Usage

See PostCSS docs for more examples.

Command Line

Add postcss-cli and PostCSS Sorting to your project:

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

Create a

postcss.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 existing
postcss-cli
configuration file.

Next execute:

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

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

Gulp

Add gulp-postcss and PostCSS Sorting to your build tool:

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

Enable PostCSS Sorting within your Gulpfile:

let gulp = require('gulp');
let postcss = require('gulp-postcss');
let sorting = require('postcss-sorting');

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

Text editor

This plugin available as Sublime Text, Atom, VS Code, and Emacs plugin. Though, seems all these plugins are not maintained.

Related tools

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

I recommend Prettier for formatting stylesheets.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.