CSS Declaration Sorter

A Node.js module and PostCSS plugin to sort the CSS declarations inside each selector based on their property names. Leveraging PostCSS’s speed, this module can quickly sort all your styling for added neatness. On top of that sorted CSS is smaller when gzipped because there will be more similar strings.

Alphabetical example

Input:

body {
    display: block;
    animation: none;
    color: #C55;
    border: 0;
}

Output:

body {
    animation: none;
    border: 0;
    color: #C55;
    display: block;
}

Capabilities

• Up-to-date CSS properties from the MDN Web Platform.
• Sort using your own defined order.
• Thought-out sorting orders out of the box, approved by their authors.

Usage

npm install css-declaration-sorter --save-dev

CLI

Usage: cssdeclsort [options] [input]
Sort CSS declarations from file(s) or stdin and output to file(s) or stdout.

Options:
  -h, --help        Display help text.
  -v, --version     Display cssdeclsort's version.
  --customOrder     Use provided JSON file data to order the declarations.
  --directory       Output to provided directory instead of current directory.
  --order           Use provided order instead of ordering alphabetically.
  --output          Output to a file instead of writing to the origin or stdout.
  --verbose         Log extra information about the process to the console.

Orders:
  alphabetically, smacss, concentric-css

Piping data and writing to a specific file:
perfectionist input.css | cssdeclsort --output output.css

Sorting multiple files by overwriting:
cssdeclsort --order smacss *.css

Vanilla JS

var fs = require('fs');
var postcss = require('postcss');
var cssdeclsort = require('css-declaration-sorter');

postcss([cssdeclsort({order: 'smacss'})])
  .process(fs.readFileSync('something.css'))
  .then(function (result) {
    fs.writeFileSync('something.css', result.css);
  });

Gulp

var gulp = require('gulp');
var gulpPostcss = require('gulp-postcss');
var cssdeclsort = require('css-declaration-sorter');

gulp.task('css', function () {
  return gulp.src('something.css')
    .pipe(gulpPostcss([cssdeclsort({order: 'smacss'})]))
    .pipe(gulp.dest('./'));
});

See PostCSS docs for more examples and other environments.

Sorting orders

• Alphabetically
  Ordering in a simple alphabetical manner from a - z.

• SMACSS
  Ordering from most important, flow affecting properties, to least important properties.

  • Box
  • Border
  • Background
  • Text
  • Other

• Concentric CSS
  Starts outside the box model, moves inward.

  • Positioning
  • Visibility
  • Box model
  • Dimensions
  • Text

• Custom order
  Provide your own order by passing an array in a JSON file.