Awesome

stylelint-config-property-sort-order-smacss

Stylelint config for Property Sort Ordering based on the SMACSS methodology.

Installation

npm install stylelint-config-property-sort-order-smacss --save-dev

yarn add stylelint-config-property-sort-order-smacss --dev

Usage

To start using this configuration, simply extend this package in your Stylelint configuration.

{
  "extends": "stylelint-config-property-sort-order-smacss",
  "rules": {
    // Add additional rules here
  }
}

Given the above, the following patterns are considered violations:

a {
  color: red;
  top: 0;
}

a {
  top: 0;
  color: black;
  position: absolute;
  display: block;
}

The following patterns are not considered violations:

a {
  top: 0;
  color: red;
}

a {
  display: block;
  position: absolute;
  top: 0;
  color: black;
}

Refer to css-property-sort-order-smacss for the comprehensive list of property orders.

For more information on configuring Stylelint, check out the configuration guide.

Advanced

This is currently only possible with an exported JavaScript configuration.

The basic usage outlined above, will enforce that properties are strictly sorted within their groups (box, border, background etc). Given this configuration makes use of stylelint-order under the hood, there's a couple extra bits of functionality that can be configured. This will require manually generating the configuration - but passing in extra options as seen fit. These will be applied to each property group.

Options

Refer to the properties-order documentation for a list of available options.

All options except properties and groupName can be modified.

Examples

Flexible Ordering

This will allow properties within the same group to be in any order.

Given:

// stylelint.config.js

const sortOrderSmacss = require('stylelint-config-property-sort-order-smacss/generate');

module.exports = {
  plugins: ['stylelint-order'],
  rules: {
    'order/properties-order': [
      sortOrderSmacss()
    ],
  },
};

The following patterns are considered violations:

a {
  top: 0;
  position: absolute;
  display: block;
  color: black;
}

Given:

// stylelint.config.js

const sortOrderSmacss = require('stylelint-config-property-sort-order-smacss/generate');

module.exports = {
  plugins: ['stylelint-order'],
  rules: {
    'order/properties-order': [
      sortOrderSmacss({ order: 'flexible' })
    ],
  },
};

The following patterns are not considered violations:

a {
  top: 0;
  position: absolute;
  display: block;
  color: black;
}

Empty Line After Property Group

This will allow an empty line after each property group:

Given:

// stylelint.config.js

const sortOrderSmacss = require('stylelint-config-property-sort-order-smacss/generate');

module.exports = {
  plugins: ['stylelint-order'],
  rules: {
    'order/properties-order': [
      sortOrderSmacss({ emptyLineBefore: 'never' })
    ],
  },
};

The following patterns are considered violations:

a {
  display: block;
  position: absolute;
  top: 0;

  color: black;
}

Given:

// stylelint.config.js

const sortOrderSmacss = require('stylelint-config-property-sort-order-smacss/generate');

module.exports = {
  plugins: ['stylelint-order'],
  rules: {
    'order/properties-order': [
      sortOrderSmacss({ emptyLineBefore: 'always' })
    ],
  },
};

The following patterns are not considered violations:

a {
  display: block;
  position: absolute;
  top: 0;

  color: black;
}