@dweidner/stylelint-config-property-order v1.2.0

@dweidner/stylelint-config-property-order

An opinionated, shareable config for stylelint to sort CSS properties by predefined rules.

CSS properties are sorted into the following logical groups by using custom rules for the stylelint-order plugin:

1. Reset
2. Content
3. Display Mode
4. List Style
5. Flexbox
6. Grid Layout
7. Alignment
8. Order
9. Box Model
10. Visibility
11. Typography
12. Background
13. Transformation
14. Animation

Installation

Install stylelint and @dweidner/stylelint-config-property-order

With npm

npm install --save-dev stylelint @dweidner/stylelint-config-property-order

With yarn

yarn add --dev stylelint @dweidner/stylelint-config-property-order

Usage

If you've installed @dweidner/stylelint-config-property-order locally within your project, just reference it in your stylelint config. See the stylelint configuration documentation for more details.

{
  "extends": [
    "@dweidner/stylelint-config",
    "@dweidner/stylelint-config-property-order"
  ]
}

Check the stylelint CLI documentation((https://stylelint.io/user-guide/cli/) to see how to execute the linter. One possibility would to add the following configuration to your package.json:

{
  "scripts": {
    "stylelint": "stylelint 'src/**/*.scss'"
  }
}

Now you can check for style violation by running the following commands:

With npm

npm run stylelint

With Yarn

yarn run stylelint

See also

This configuration is heavily based on the configuration provided by stylelint-config-idiomatic-order and stylelint-config-property-sort-order-smacss.

Changelog

License