css-declaration-sorter

What are css-declaration-sorter's main functionalities?

const postcss = require('postcss');
const cssDeclarationSorter = require('css-declaration-sorter');

postcss([cssDeclarationSorter({ order: 'smacss' })])
  .process('a { color: yellow; z-index: 2; }')
  .then(result => console.log(result.css));

const gulp = require('gulp');
const postcss = require('gulp-postcss');
const cssDeclarationSorter = require('css-declaration-sorter');

gulp.task('css', function () {
  return gulp.src('src/*.css')
    .pipe(postcss([cssDeclarationSorter({ order: 'alphabetical' })]))
    .pipe(gulp.dest('dist'));
});

CSS Declaration Sorter

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.

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.
• Sorting nested rules.
• Less and SCSS support when combined with either postcss-scss or postcss-less.
• 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

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

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

Gulp

const gulp = require('gulp');
const gulpPostcss = require('gulp-postcss');
const 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.