stylelint-config-awzome/stylelint.config.js

A shareable linting-config for stylelint.

"use strict";

module.exports = {
  extends: ["stylelint-config-recommended-scss"],
  plugins: [
    "stylelint-scss",
    "stylelint-declaration-strict-value",
    "stylelint-selector-tag-no-without-class"
  ],
  rules: {
    "max-line-length": 120,
    "unit-allowed-list": [
      "em",
      "rem",
      "px",
      "%",
      "vh",
      "vw",
      "s"
    ],
    "indentation": 2,
    "string-quotes": "double",
    "max-empty-lines": 1,
    "length-zero-no-unit": true,
    "value-list-max-empty-lines": 0,
    "rule-empty-line-before": "always",
    "at-rule-empty-line-before": [
      "always",
      {
        "except": [
          "blockless-after-blockless"
        ],
        "ignore": [
          "after-comment",
          "first-nested"
        ]
      }
    ],

    /* ------------------------ DECLARATION ------------------------ */
    "declaration-bang-space-before": "always",
    "declaration-block-semicolon-newline-after": "always-multi-line",
    "declaration-no-important": true,

    /* ------------------------ COLOR ------------------------ */
    "color-hex-case": [
      "lower",
      {
        "message": "Lowercase letters are easier to distinguish from numbers."
      }
    ],
    "color-hex-length": [
      "long",
      {
        "message": "Size always matters. So please use the full hex-code of 6 characters."
      }
    ],
    "color-named": [
      "never",
      {
        "message": "You should always define your colors with a variable and not with directly applied color-names."
      }
    ],
    "color-no-hex": [
      true,
      {
        "message": "You should always define your colors with a variable and not with directly applied color-names. The only place where this option should be disabled, is in your variables-file."
      }
    ],

    /* ------------------------ PROPERTY ------------------------ */
    "property-disallowed-list": [
      "object-fit"
    ],
    "property-case": "lower",
    "property-no-vendor-prefix": [
      true,
      {
        "message": "To use vendor-prefixed properties, include a mixin from your mixins-file."
      }
    ],

    /* ------------------------ BLOCK ------------------------ */
    "block-closing-brace-newline-before": "always",
    "block-opening-brace-newline-after": "always",
    "block-opening-brace-space-before": "always",

    /* ------------------------ FUNCTION ------------------------ */
    "function-comma-space-after": "always",
    "function-comma-space-before": "never",
    "function-parentheses-newline-inside": "never-multi-line",
    "function-parentheses-space-inside": "never",

    /* ------------------------ SELECTOR ------------------------ */
    "selector-class-pattern": ".[a-z]+",
    "selector-combinator-space-after": "always",
    "selector-combinator-space-before": "always",
    "selector-no-vendor-prefix": [
      true,
      {
        "message": "To use vendor-prefixed selectors, include a mixin from your mixins-file."
      }
    ],
    "selector-pseudo-element-allowed-list": [
      "before",
      "after",
      "selection"
    ],
    "selector-type-case": "lower",

    /* ------------------------ PLUGINS ------------------------ */
    "plugin/selector-tag-no-without-class": [
      "div"
    ],
    "scale-unlimited/declaration-strict-value": [
      [
        "background",
        "background-color",
        "border-radius",
        "color",
        "font-family",
        "font-weight"
      ]
    ]
  }
};