Stylelint Settings

.sytlelintrc.js

module.exports = {
  extends: [
    'stylelint-config-recommended',
    'stylelint-config-recommended-scss'
  ],
  plugins: ['stylelint-order'],
  rules: {
    'indentation': 2,
    'no-eol-whitespace': true,
    'color-named': 'never',
    'color-no-hex': true,
    'declaration-block-semicolon-newline-after': 'always',
    'order/order': [

      // Custom order that insures overwrites of extends and includes
      {
        type: 'at-rule',
        name: 'extend',
      },
      {
        type: 'at-rule',
        name: 'include',
        hasBlock: false
      },
        'custom-properties',
        'dollar-variables',
        'declarations',
        'rules',
      {
        type: 'at-rule',
        name: 'include',
        parameter: 'respond-to',
        hasBlock: true
      },
      {
        type: 'at-rule',
        name: 'include',
        parameter: 'media-query',
        hasBlock: true
      }
    ],
    // Box model like ordering
    "order/properties-order": [

      "content",
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "box-sizing",

      "width",
      "min-width",
      "max-width",
      "height",
      "min-height",
      "max-height",
      "display",
      "flex-direction",
      "flex-order",
      "flex-pack",
      "flex-align",
      "float",
      "clear",

      "position",
      "top",
      "right",
      "bottom",
      "left",
      "z-index",

      "font",
      "font-family",
      "font-size",
      "font-weight",
      "font-style",
      "font-variant",
      "font-size-adjust",
      "font-stretch",
      "font-effect",
      "font-emphasize",
      "font-emphasize-position",
      "font-emphasize-style",
      "font-smooth",
      "line-height",
      "text-align",
      "text-align-last",
      "vertical-align",
      "white-space",
      "text-decoration",
      "text-emphasis",
      "text-emphasis-color",
      "text-emphasis-style",
      "text-emphasis-position",
      "text-indent",
      "text-justify",
      "letter-spacing",
      "word-spacing",
      "text-outline",
      "text-overflow",
      "text-overflow-ellipsis",
      "text-overflow-mode",
      "text-shadow",
      "text-transform",
      "text-wrap",
      "word-wrap",
      "word-break",
      "tab-size",
      "hyphens",

      "background",
      "background-color",
      "background-image",
      "background-repeat",
      "background-attachment",
      "background-position",
      "background-position-x",
      "background-position-y",
      "background-clip",
      "background-origin",
      "background-size",

      "color",
      "outline",
      "outline-width",
      "outline-style",
      "outline-color",
      "outline-offset",
      "box-decoration-break",
      "box-shadow",

      "border",
      "border-width",
      "border-style",
      "border-color",
      "border-top",
      "border-top-width",
      "border-top-style",
      "border-top-color",
      "border-right",
      "border-right-width",
      "border-right-style",
      "border-right-color",
      "border-bottom",
      "border-bottom-width",
      "border-bottom-style",
      "border-bottom-color",
      "border-left",
      "border-left-width",
      "border-left-style",
      "border-left-color",
      "border-radius",
      "border-top-left-radius",
      "border-top-right-radius",
      "border-bottom-right-radius",
      "border-bottom-left-radius",
      "border-collapse",
      "border-image",
      "border-image-source",
      "border-image-slice",
      "border-image-width",
      "border-image-outset",
      "border-image-repeat",
      "border-spacing",
      // Everything else is free ordering like cursor, pointer-events, transform, etc. pp.
    ],
    'length-zero-no-unit': true,
    // selector-max-compound-selectors does not count in root {} clause hence starting with one less
    'max-nesting-depth': 3,
    'selector-max-compound-selectors': 4,
    //
    "rule-empty-line-before": ["always", {
        "ignore": ["after-comment"]
    }],
    "at-rule-empty-line-before": [ "always", {
        "ignore": ["after-comment", "inside-block", "blockless-after-same-name-blockless"],
        "ignoreAtRules": ["else", "content", "return", "warn"]
    }],
    "block-closing-brace-newline-after": ["always", {
        "ignoreAtRules": ["if", "else", "content", "return", "warn"]
    }],
    // class names must begin with project or js handle
    'selector-class-pattern': '(foo|js)-[a-z0-9-_]+'
  }
};