Norwegian Parcel Mail

    TypeScript icon, indicating that this package has built-in type declarations

    6.3.0 • Public • Published

    CSS declaration sorter logo

    CSS Declaration Sorter

    LGTM Grade npm

    A Node.js module and PostCSS plugin to sort CSS, SCSS or Less declarations based on their property names. Ensuring styling is organized, more consistent and in order... The goal of this package is to sort the source code of a project in the build process or to decrease the distributed CSS gzipped size.

    Check out the Prettier plugin for usage with a variety of file formats.


    • Up-to-date CSS properties fetched from the MDN Compatibility Data project.
    • Choose your wanted order or provide your own.
    • Nested rules sorting support.
    • SCSS and Less support when combined with either postcss-scss or postcss-less.
    • Thought-out sorting orders out of the box, approved by their authors.

    Alphabetical example


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


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

    Built-in sorting orders

    • Alphabetical
      Default, order in a simple alphabetical manner from a - z.

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

      1. Box
      2. Border
      3. Background
      4. Text
      5. Other
    • Concentric CSS
      Order properties applying outside the box model, moving inward to intrinsic changes.

      1. Positioning
      2. Visibility
      3. Box model
      4. Dimensions
      5. Text


    Following the PostCSS plugin guidelines, this package depends on PostCSS as a peer dependency:
    npm install postcss css-declaration-sorter --save-dev


    This module does not include its own CLI but works with the official PostCSS CLI. To use the examples below, the postcss-cli package is a required dependency.

    Piping out result from file:
    postcss input.css --use css-declaration-sorter | cat

    Sorting multiple files by overwriting:
    postcss *.css --use css-declaration-sorter --replace --no-map

    Sorting all files in a directory with SCSS syntax using postcss-scss by overwriting:
    postcss ./src/**/*.scss --syntax postcss-scss --use css-declaration-sorter --replace --no-map

    Sorting all files in the directory with SCSS syntax and SMACSS order by overwriting, using package.json configuration:

    "postcss": {
      "syntax": "postcss-scss",
      "map": false,
      "plugins": {
        "css-declaration-sorter": { "order": "smacss" }

    postcss ./src/**/*.scss --replace --config package.json

    Vanilla JS

    import postcss from 'postcss';
    import { cssDeclarationSorter } from 'css-declaration-sorter';
    postcss([cssDeclarationSorter({ order: 'smacss' })])
      .process('a { color: hyperblue; display: block; }', { from: undefined })
      .then(result => console.log(
        result.css === 'a { display: block; color: hyperblue; }'

    View more usage examples in combination with other tools.


    cssDeclarationSorter({ order, keepOverrides })


    Type: string or function
    Default: alphabetical
    Options: alphabetical, smacss, concentric-css

    Provide the name of one of the built-in sort orders or a comparison function that is passed to (Array.sort). This function receives two declaration names and is expected to return -1, 0 or 1 depending on the wanted order.


    Type: Boolean
    Default: false

    To prevent breaking legacy CSS where shorthand declarations override longhand declarations (also taking into account vendor prefixes) this option can enabled. For example animation-name: some; animation: greeting; will be kept in this order when keepOverrides is true.


    npm i css-declaration-sorter

    DownloadsWeekly Downloads






    Unpacked Size

    80.1 kB

    Total Files


    Last publish


    • siilwyn