stylelint-config-property-sort-order-smacss

    8.0.0 • Public • Published

    stylelint-config-property-sort-order-smacss

    SMACSS Logo Stylelint Logo

    Build CodeQL NPM version NPM Downloads Coverage Status Dependabot Status

    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;
    }

    Install

    npm i stylelint-config-property-sort-order-smacss

    DownloadsWeekly Downloads

    28,761

    Version

    8.0.0

    License

    MIT

    Unpacked Size

    9.08 kB

    Total Files

    5

    Last publish

    Collaborators

    • cahamilton