.stylelintrc

{
  "extends": [
    "stylelint-config-prettier",
    "stylelint-config-clean-order",
    "stylelint-config-recommended",
    "stylelint-config-styled-components"
  ],
  "plugins": [
    "stylelint-order",
    "stylelint-use-nesting",
    "stylelint-group-selectors",
    "stylelint-z-index-value-constraint"
  ],
  "customSyntax": "@stylelint/postcss-css-in-js",
  "rules": {
    "color-hex-case": "lower",
    "color-no-invalid-hex": true,
    "at-rule-empty-line-before": "always",
    "csstools/use-nesting": "always",
    "plugin/stylelint-group-selectors": true,
    "shorthand-property-no-redundant-values": true,
    "plugin/z-index-value-constraint": { "min": 1, "max": 80 },
    "unit-allowed-list": ["em", "rem", "%", "px", "s", "deg", "vh", "ms"],
    "block-no-empty": [
      true,
      {
        "ignore": ["comments"]
      }
    ],
    "at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": ["extends"]
      }
    ],
    "rule-empty-line-before": [
      "always",
      {
        "except": "first-nested"
      }
    ],
    "order/order": [
      [
        "declarations",
        "rules",
        "at-rules",
        { "type": "at-rule", "name": "keyframes" },
        { "type": "at-rule", "name": "media" }
      ],
      { "severity": "error" }
    ]
  }
}