.stylelintrc.js

const stylelintNativeRules = {
  "at-rule-blacklist": null,
  // Wrapped by scss/at-rule-no-unknown
  "at-rule-no-unknown": null,
  "at-rule-no-vendor-prefix": true,
  "at-rule-whitelist": null,
  "block-no-empty": true,
  "color-hex-length": null,
  "color-named": "never",
  // Handled by stylelint-color-format
  "color-no-hex": null,
  "color-no-invalid-hex": null,
  "comment-empty-line-before": null,
  "comment-no-empty": true,
  // Prettier plugin claims not impacted
  "comment-whitespace-inside": "always",
  "comment-word-blacklist": [
    "/^FIXME/",
    "/^FixMe/",
    "/^Fixme/",
    "/^fixme/",
    "/^TODO/",
    "/^ToDo/",
    "/^Todo/",
    "/^todo/",
    "/^XXX/",
    "/^Xxx/",
    "/^xxx/",
  ],
  // Use SCSS variables
  "custom-media-pattern": null,
  // Prettier plugin claims not impacted (and use SCSS variables)
  "custom-property-empty-line-before": null,
  // Use SCSS variables
  "custom-property-pattern": null,
  "declaration-block-no-duplicate-properties": [
    true,
    {
      ignore: ["consecutive-duplicates-with-different-values"],
    },
  ],
  "declaration-block-single-line-max-declarations": 1,
  "declaration-empty-line-before": "never",
  "declaration-no-important": true,
  "declaration-property-unit-blacklist": null,
  "declaration-property-unit-whitelist": {
    "background-image": ["deg"],
    "/^background/": ["%", "rem"],
    "border-radius": ["%", "rem"],
    "/^border/": ["%", "rem"],
    bottom: ["%", "rem"],
    "box-shadow": ["rem"],
    "/^column/": ["rem"],
    "/duration$/": ["ms"],
    "/^font/": ["rem"],
    height: ["%", "rem", "vh"],
    left: ["%", "rem"],
    "letter-spacing": ["rem"],
    "line-height": [[], "rem"],
    "/^margin/": ["rem"],
    "max-height": ["%", "rem"],
    "max-width": ["%", "rem"],
    "min-height": ["%", "rem", "vh"],
    "min-width": ["%", "rem", "vw"],
    "/^outline/": ["rem"],
    padding: ["%", "rem"],
    "/resolution$/": ["dppx"],
    right: ["%", "rem"],
    "/^text/": ["rem"],
    "/timing-function$/": ["ms"],
    top: ["%", "rem"],
    width: ["%", "rem", "vw"],
    "word-spacing": ["rem"],
  },
  "declaration-property-value-blacklist": {
    "text-align": "justify",
  },
  "declaration-property-value-whitelist": null,
  "font-family-name-quotes": "always-where-recommended",
  "font-family-no-duplicate-names": true,
  "font-family-no-missing-generic-family-keyword": true,
  "font-weight-notation": "numeric",
  "function-blacklist": null,
  "function-calc-no-unspaced-operator": true,
  "function-linear-gradient-no-nonstandard-direction": true,
  // Prettier plugin doesn't mention this rule
  "function-name-case": "lower",
  "function-url-no-scheme-relative": true,
  // Prettier plugin doesn't mention this rule
  "function-url-quotes": "always",
  "function-url-scheme-blacklist": null,
  "function-url-scheme-whitelist": "https",
  "function-whitelist": null,
  // Prettier plugin claims not impacted
  "function-whitespace-after": "always",
  "keyframe-declaration-no-important": true,
  // Lower case English letters, numbers and hyphens, can't start or end in hyphen,
  // and at least two characters long
  "keyframes-name-pattern": "^[a-z0-9]+[a-z0-9-]*[a-z0-9]+$",
  "length-zero-no-unit": null,
  // Prettier plugin doesn't mention this rule
  linebreaks: "unix",
  "max-nesting-depth": null,
  "media-feature-name-blacklist": null,
  "media-feature-name-no-unknown": true,
  "media-feature-name-no-vendor-prefix": true,
  "media-feature-name-value-whitelist": null,
  "media-feature-name-whitelist": [
    "max-resolution",
    "max-width",
    "min-height",
    "min-resolution",
    "min-width",
    "orientation",
  ],
  // Prettier plugin claims not impacted
  "media-feature-range-operator-space-after": "always",
  // Prettier plugin claims not impacted
  "media-feature-range-operator-space-before": "always",
  "no-descending-specificity": true,
  "no-duplicate-at-import-rules": true,
  "no-duplicate-selectors": true,
  "no-empty-source": true,
  "no-invalid-double-slash-comments": true,
  "no-unknown-animations": true,
  "number-max-precision": 4,
  "property-blacklist": null,
  "property-no-unknown": true,
  "property-no-vendor-prefix": true,
  "property-whitelist": null,
  "selector-attribute-operator-blacklist": null,
  // Prettier plugin claims not impacted
  "selector-attribute-operator-space-after": "always",
  // Prettier plugin claims not impacted
  "selector-attribute-operator-space-before": "always",
  "selector-attribute-operator-whitelist": null,
  // Lower case English letters, numbers and hyphens, can't start or end in hyphen,
  // and at least two characters long
  "selector-class-pattern": "^[a-z0-9]+[a-z0-9-]*[a-z0-9]+$",
  "selector-combinator-blacklist": null,
  "selector-combinator-whitelist": null,
  // Lower case English letters, numbers and hyphens, can't start or end in hyphen,
  // and at least two characters long
  "selector-id-pattern": "^[a-z0-9]+[a-z0-9-]*[a-z0-9]+$",
  "selector-max-attribute": null,
  "selector-max-class": null,
  "selector-max-combinators": null,
  "selector-max-compound-selectors": null,
  "selector-max-id": null,
  "selector-max-pseudo-class": null,
  "selector-max-specificity": null,
  "selector-max-type": null,
  "selector-max-universal": null,
  "selector-nested-pattern": null,
  "selector-no-qualifying-type": null,
  "selector-no-vendor-prefix": true,
  "selector-pseudo-class-blacklist": null,
  "selector-pseudo-class-no-unknown": true,
  "selector-pseudo-class-whitelist": null,
  "selector-pseudo-element-blacklist": null,
  "selector-pseudo-element-colon-notation": "double",
  "selector-pseudo-element-no-unknown": true,
  "selector-pseudo-element-whitelist": null,
  // Prettier plugin doesn't mention this rule
  "selector-type-case": "lower",
  "selector-type-no-unknown": true,
  "shorthand-property-no-redundant-values": true,
  "string-no-newline": true,
  "time-min-milliseconds": null,
  "unit-blacklist": null,
  "unit-no-unknown": true,
  "unit-whitelist": [null, "deg", "dppx", "ms", "rem"],
  // Prettier plugin doesn't mention this rule
  "value-keyword-case": "lower",
  "value-no-vendor-prefix": true,
};

const stylelintNativeRulesDisabledByPrettier = {
  "at-rule-empty-line-before": null,
  "at-rule-name-case": null,
  "at-rule-name-newline-after": null,
  "at-rule-semicolon-newline-after": null,
  "block-closing-brace-empty-line-before": null,
  "block-closing-brace-newline-after": null,
  "block-closing-brace-newline-before": null,
  "block-closing-brace-space-after": null,
  "block-closing-brace-space-before": null,
  "block-opening-brace-newline-after": null,
  "block-opening-brace-newline-before": null,
  "block-opening-brace-space-after": null,
  "block-opening-brace-space-before": null,
  "color-hex-case": null,
  "declaration-block-no-redundant-longhand-properties": null,
  "declaration-block-no-shorthand-property-overrides": null,
  "declaration-block-semicolon-newline-after": null,
  "declaration-block-semicolon-newline-before": null,
  "declaration-block-semicolon-space-after": null,
  "declaration-block-semicolon-space-before": null,
  "declaration-block-trailing-semicolon": null,
  "declaration-colon-newline-after": null,
  "declaration-colon-space-after": null,
  "declaration-colon-space-before": null,
  "function-comma-newline-after": null,
  "function-comma-newline-before": null,
  "function-comma-space-after": null,
  "function-comma-space-before": null,
  "function-max-empty-lines": null,
  "function-parentheses-newline-inside": null,
  "function-parentheses-space-inside": null,
  indentation: null,
  "max-empty-lines": null,
  "max-line-length": null,
  "media-feature-name-case": null,
  "media-query-list-comma-newline-after": null,
  "media-query-list-comma-newline-before": null,
  "media-query-list-comma-space-after": null,
  "media-query-list-comma-space-before": null,
  "no-eol-whitespace": null,
  "no-extra-semicolons": null,
  "no-missing-end-of-source-newline": null,
  "number-leading-zero": null,
  "number-no-trailing-zeros": null,
  "property-case": null,
  "rule-empty-line-before": null,
  "selector-combinator-space-after": null,
  "selector-combinator-space-before": null,
  "selector-descendant-combinator-no-non-space": null,
  "selector-list-comma-newline-after": null,
  "selector-list-comma-newline-before": null,
  "selector-list-comma-space-after": null,
  "selector-list-comma-space-before": null,
  "selector-max-empty-lines": null,
  "selector-pseudo-class-case": null,
  "selector-pseudo-element-case": null,
  "string-quotes": null,
  "unit-case": null,
  "value-list-comma-newline-after": null,
  "value-list-comma-newline-before": null,
  "value-list-comma-space-after": null,
  "value-list-comma-space-before": null,
  "value-list-max-empty-lines": null,
};

const stylelintNativeRulesRestrictedByPrettier = {
  "at-rule-name-space-after": "always",
  "at-rule-semicolon-space-before": "never",
  "declaration-bang-space-after": "never",
  "declaration-bang-space-before": "always",
  "media-feature-colon-space-after": "always",
  "media-feature-colon-space-before": "never",
  "media-feature-parentheses-space-inside": "never",
  "selector-attribute-brackets-space-inside": "never",
  "selector-attribute-quotes": "always",
  "selector-pseudo-class-parentheses-space-inside": "never",
};

const stylelintPluginA11yRules = {
  // Currently broken
  "a11y/content-property-no-static-value": null,
  "a11y/font-size-is-readable": null,
  "a11y/line-height-is-vertical-rhythmed": null,
  "a11y/media-prefers-reduced-motion": null,
  "a11y/no-display-none": null,
  "a11y/no-obsolete-attribute": true,
  "a11y/no-obsolete-element": true,
  "a11y/no-outline-none": true,
  "a11y/no-spread-text": null,
  "a11y/no-text-align-justify": null,
  "a11y/selector-pseudo-class-focus": null,
};

const stylelintPluginColorFormatRules = {
  "color-format/format": {
    format: "rgba",
  },
};

const stylelintPluginDeclarationBlockNoIgnoredPropertiesRules = {
  "plugin/declaration-block-no-ignored-properties": true,
};

const stylelintPluginOrderRules = {
  "order/order": [["at-rules", "dollar-variables", "declarations", "rules"]],
  "order/properties-alphabetical-order": true,
  "order/properties-order": null,
};

const stylelintPluginScssRules = {
  // Prettier should not be impacted
  "scss/at-else-if-parentheses-space-before": "always",
  "scss/at-extend-no-missing-placeholder": true,
  "scss/at-function-named-arguments": "always",
  // Lower case English letters, numbers and hyphens, can't start or end in hyphen,
  // and at least two characters long
  "scss/at-function-pattern": "^[a-z0-9]+[a-z0-9-]*[a-z0-9]+$",
  "scss/at-import-no-partial-leading-underscore": true,
  "scss/at-import-partial-extension-blacklist": null,
  "scss/at-import-partial-extension-whitelist": ["scss"],
  "scss/at-mixin-argumentless-call-parentheses": "always",
  "scss/at-mixin-named-arguments": "always",
  // Lower case English letters, numbers and hyphens, can't start or end in hyphen,
  // and at least two characters long
  "scss/at-mixin-pattern": "^[a-z0-9]+[a-z0-9-]*[a-z0-9]+$",
  "scss/at-rule-no-unknown": true,
  "scss/declaration-nested-properties": "never",
  "scss/declaration-nested-properties-no-divided-groups": true,
  "scss/dollar-variable-default": null,
  "scss/dollar-variable-no-missing-interpolation": true,
  // Lower case English letters, numbers and hyphens, can't start or end in hyphen,
  // and at least two characters long
  "scss/dollar-variable-pattern": "^[a-z0-9]+[a-z0-9-]*[a-z0-9]+$",
  "scss/double-slash-comment-empty-line-before": null,
  "scss/double-slash-comment-inline": null,
  // Prettier should not be impacted
  "scss/double-slash-comment-whitespace-inside": "always",
  "scss/media-feature-value-dollar-variable": "always",
  "scss/no-dollar-variables": null,
  "scss/no-duplicate-dollar-variables": null,
  "scss/partial-no-import": null,
  // Lower case English letters, numbers and hyphens, can't start or end in hyphen,
  // and at least two characters long
  "scss/percent-placeholder-pattern": "^[a-z0-9]+[a-z0-9-]*[a-z0-9]+$",
  "scss/selector-no-redundant-nesting-selector": true,
};

const stylelintPluginScssRulesDisabledByPrettier = {
  "scss/at-else-closing-brace-newline-after": null,
  "scss/at-else-closing-brace-space-after": null,
  "scss/at-else-empty-line-before": null,
  "scss/at-function-parentheses-space-before": null,
  "scss/at-if-closing-brace-newline-after": null,
  "scss/at-if-closing-brace-space-after": null,
  "scss/at-mixin-parentheses-space-before": null,
  "scss/dollar-variable-colon-newline-after": null,
  "scss/dollar-variable-colon-space-after": null,
  "scss/dollar-variable-colon-space-before": null,
  "scss/dollar-variable-empty-line-before": null,
  "scss/operator-no-newline-after": null,
  "scss/operator-no-newline-before": null,
  "scss/operator-no-unspaced": null,
};

module.exports = {
  plugins: [
    "stylelint-a11y",
    "stylelint-color-format",
    "stylelint-declaration-block-no-ignored-properties",
    "stylelint-order",
    "stylelint-scss",
  ],
  rules: {
    ...stylelintNativeRules,
    ...stylelintNativeRulesDisabledByPrettier,
    ...stylelintNativeRulesRestrictedByPrettier,
    ...stylelintPluginA11yRules,
    ...stylelintPluginColorFormatRules,
    ...stylelintPluginDeclarationBlockNoIgnoredPropertiesRules,
    ...stylelintPluginOrderRules,
    ...stylelintPluginScssRules,
    ...stylelintPluginScssRulesDisabledByPrettier,
  },
};