stylelint-config-property-sort-order-smacss

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

Table of Contents

• Installation
• Basic Configuration
• Advanced Configuration
  • Options
  • Examples
    • Flexible Ordering
    • Empty Line After Property Group

Installation

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

Basic Configuration

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

// stylelint.config.js

/**
 * @type {import('stylelint').Config}
 */
export default {
  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 Configuration

[!NOTE] This requires a JavaScript configuration file (eg. stylelint.config.js, stylelint.config.mjs) and is not supported by JSON, YAML or other file formats.

The basic configuration outlined above, will enforce that properties are strictly sorted within their groups (box, border, background etc). Given this configuration makes use of stylelint-order, 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 required. These will be applied to each property group.

Options

type Options = {
  emptyLineBefore?: 'always' | 'never' | 'threshold';
  noEmptyLineBetween?: boolean;
  order?: 'flexible';
  unspecified?: 'top' | 'bottom' | 'bottomAlphabetical' | 'ignore';
  emptyLineBeforeUnspecified?: 'always' | 'never' | 'threshold';
  emptyLineMinimumPropertyThreshold?: number;
};

Refer to the properties-order documentation for more information on 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

import generateConfig from 'stylelint-config-property-sort-order-smacss/generate';

export default {
  plugins: ['stylelint-order'],
  rules: {
    'order/properties-order': generateConfig(),
  },
};

The following patterns are considered violations:

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

Given:

// stylelint.config.js

import generateConfig from 'stylelint-config-property-sort-order-smacss/generate';

export default {
  plugins: ['stylelint-order'],
  rules: {
    'order/properties-order': generateConfig({
      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

import generateConfig from 'stylelint-config-property-sort-order-smacss/generate';

export default {
  plugins: ['stylelint-order'],
  rules: {
    'order/properties-order': generateConfig({
      emptyLineBefore: 'never',
    }),
  },
};

The following patterns are considered violations:

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

  color: black;
}

Given:

// stylelint.config.js

import generateConfig from 'stylelint-config-property-sort-order-smacss/generate';

export default {
  plugins: ['stylelint-order'],
  rules: {
    'order/properties-order': generateConfig({
      emptyLineBefore: 'always',
    }),
  },
};

The following patterns are not considered violations:

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

  color: black;
}