Stylelint

Stylelint.md

Stylelint

yarn add -D stylelint stylelint-config-standart stylelint-config-prettier

Order

If you want order

yarn add -D stylelint-order

And choose one of the scripts:

yarn add -D stylelint-config-rational-order
yarn add -D stylelint-config-idiomatic-order
yarn add -D stylelint-config-rational-order

Configuration

Create .stylelintrc.json that includes:

module.exports = {
  extends: [
    "stylelint-config-standard",
    // Order (choose one)
    // "stylelint-config-recess-order",
    // "stylelint-config-idiomatic-order",
    // "stylelint-config-rational-order",
    "stylelint-config-prettier",
  ],
};

Scripts

Edit package.json:

{
  "scripts": {
    "lint": "eslint . --ext ts --ext tsx --ext js && stylelint --fix **/*.css"
  },
  "lint-staged": {
    "*.@(ts|tsx|js)": ["yarn lint", "prettier --write"],
    "*..@(json|md)": "prettier --write",
    "*.css": ["stylelint --fix", "prettier --write"]
  }
}

Best stylelint sort I've found

• More modern - logical props + flex / grid. https://github.com/stormwarning/stylelint-config-recess-order
• Less modern - no logical properties. has flex / grid. https://github.com/constverum/stylelint-config-rational-order
• Less modern - github without flex / grid. https://github.com/primer/stylelint-config/blob/main/property-order.js

Stylelint configs

Recommended

https://github.com/stylelint/stylelint-config-recommended

Standard

https://github.com/stylelint/stylelint-config-standard/blob/main/index.js

Wordpress

https://github.com/WordPress/gutenberg/tree/ee76ccaa1138c8d70c1638f89c113ee81161d39b/packages/stylelint-config

Github

https://github.com/primer/stylelint-config

Wikimedia

https://github.com/wikimedia/stylelint-config-wikimedia/blob/master/index.js