.stylelintrc.json

{
  "extends": "stylelint-config-recommended-scss",
  "plugins": [
    "stylelint-scss",
    "stylelint-no-px",
    "stylelint-at-rule-import-path"
  ],
  "rules": {
    "block-no-empty": null,
    "comment-word-blacklist": [["/\\s?todo\\s/i", "/\\s?hack\\s/i"], {"severity": "warning", "message":"A todo or hack comment was found. Consider resolving the issue in future"}],
    "selector-class-pattern": ["^((c-|u-|s-|no-|has-|state-|is-|js-|size-)[a-z]+|js)", {"resolveNestedSelectors":true, "message":"Please use namespacing (prefixes) when naming classes. See https://gist.github.com/stephenway/a6145d9b4430e8c55a77 for the namespaces this project uses."}],
    "rule-empty-line-before": null,
    "string-no-newline": null,
    "color-no-hex": [true, {"severity": "warning", "message":"Consider creating a variable if this color repeats more than once"}],
    "no-duplicate-selectors": [true, {"severity": "warning"}],
    "declaration-property-unit-whitelist": {"line-height": ["em"]},
    "value-no-vendor-prefix": true,
    "property-no-vendor-prefix": true,
    "declaration-no-important": true,
    "declaration-block-single-line-max-declarations": 1,
    "selector-max-attribute": [0, {"severity": "warning", "message":"Avoid using attribute selectors, add classes to markup instead and utilise them. Use stylelint ignore rules if they are absolutely needed"}],
    "selector-max-class": 3,
    "selector-max-compound-selectors": 3,
    "selector-max-id": 0,
    "selector-max-specificity": "0,3,2",
    "selector-max-type": [0, {"severity": "warning", "message":"Try to avoid using type selectors as they make styling components more dependent on specific markup and might cause specificity conflicts. Add classes to markup instead and utilise them. Use stylelint ignore rules when needed", "ignoreTypes": ["a", "/--/"]}],
    "selector-max-universal": [0, {"severity": "warning"}],
    "no-descending-specificity": [true, {"severity": "warning"}],
    "selector-no-qualifying-type": true, 
    "selector-no-vendor-prefix": [true, {"severity": "warning", "message":"Do not use vendor-prefixed selectors. Autoprefixer will take care of them"}],
    "at-rule-no-vendor-prefix": [true, {"severity": "warning", "message":"Do not use vendor-prefixed at-rules. Autoprefixer will take care of them"}],
    "media-feature-name-no-vendor-prefix": [true, {"severity": "warning", "message":"Do not use vendor-prefixed media features. Autoprefixer will take care of them"}],
    "at-rule-blacklist": ["extend", {"severity": "warning", "message":"Avoid using @extends as they degrade clarity of code and can cause hard-to-track bugs. Utilise mixins instead"}],
    "font-family-name-quotes":"always-where-recommended",
    "string-quotes":"single",
    "length-zero-no-unit":true,
    "selector-combinator-space-before": "always",
    "selector-combinator-space-after": "always",
    "selector-pseudo-element-colon-notation": "double", 
    "indentation": 2,
    "max-empty-lines": [4, {"severity": "warning"}],
    "scss/at-mixin-pattern": ["^(c-|u-|t-|o-).+", {"severity": "error", "message":"Please use namespacing (prefixes) when naming mixins. See https://gist.github.com/stephenway/a6145d9b4430e8c55a77 for the namespaces this project uses."}],
    "scss/at-rule-no-unknown": null,
    "plugin/at-rule-import-path": true,
    "meowtec/no-px": [true, { "ignore": ["1px"], "ignoreFunctions" : ["rem-calc"], "message":"Use rem unit or rem-calc() function instead of px" }]
  }, 
  "ignoreFiles": "scss/autogenerated/*.scss"
}