Package Exports

postcss-sorting

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-sorting) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

PostCSS Sorting

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

Also available as Sublime Text, Atom, VS Code, and Emacs plugin.

Lint and autofix style sheets 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 (if postcss-scss parser is used), PreCSS and most likely any other syntax added by other PostCSS plugins.

Installation

$ npm install 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.

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

Migration from `2.x`

Remove all *-empty-line-before and clean-empty-lines options. Use stylelint with --fix option instead.

properties-order doesn't support property groups. Convert it to simple array. Use stylelint-order with --fix option for empty line before property groups.

Config for 2.x:

{
    "properties-order": [
        {
            "properties": [
                "margin",
                "padding"
            ]
        },
        {
            "emptyLineBefore": true,
            "properties": [
                "border",
                "background"
            ]
        }
    ]
}

Config for 3.x:

{
    "properties-order": [
        "margin",
        "padding",
        "border",
        "background"
    ]
}

Usage

See PostCSS docs for examples for your environment.

Text editor

This plugin available as Sublime Text, Atom, VS Code, and Emacs plugin.

Gulp

Add Gulp PostCSS and PostCSS Sorting to your build tool:

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

Enable PostCSS Sorting within your Gulpfile:

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

gulp.task('css', function () {
    return gulp.src('./css/src/*.css').pipe(
        postcss([
            sorting({ /* options */ })
        ])
    ).pipe(
        gulp.dest('./css/src')
    );
});

Grunt

Add Grunt PostCSS and PostCSS Sorting to your build tool:

npm install grunt-postcss postcss-sorting --save-dev

Enable PostCSS Sorting within your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
    postcss: {
        options: {
            processors: [
                require('postcss-sorting')({ /* options */ })
            ]
        },
        dist: {
            src: 'css/*.css'
        }
    }
});

stylelint and stylelint-order help lint style sheets and let know if style sheet order is correct.

If you want format style sheets, use perfectionist or stylefmt, also a PostCSS-based tools.

postcss-sorting