Stylelint configuration extending the standard configuration (targeting CSS and Vue files).

.stylelintignore

################################################################################
# Node
################################################################################

node_modules

################################################################################
# Compiled Directories & Files
################################################################################

dist

package.json

{
  "private": true,
  "scripts": {
    "lint": "stylelint '**/*.{css,vue}' --fix",
  },
  "devDependencies": {
    "stylelint": "^13.7.1",
    "stylelint-config-standard": "^20.0.0",
    "stylelint-order": "^4.1.0",
  }
}

stylelint.config.js

module.exports = {
  extends: [
    "stylelint-config-standard",
  ],
  plugins: [
    "stylelint-order",
  ],
  rules: {
    // /////////////////////////////////////////////////////////////////////////
    // Language Limiting Rules
    // @see https://stylelint.io/user-guide/rules/list#limit-language-features
    // /////////////////////////////////////////////////////////////////////////

    // Enforce alpha value notation.
    // @see https://stylelint.io/user-guide/rules/alpha-value-notation
    "alpha-value-notation": "number",

    // Enforce hue value notation.
    // @see https://stylelint.io/user-guide/rules/hue-degree-notation
    "hue-degree-notation": "number",

    // Enforce color function notation.
    // @see https://stylelint.io/user-guide/rules/color-function-notation
    "color-function-notation": "modern",

    // Allow or disallow named colours.
    // @see https://stylelint.io/user-guide/rules/color-named
    "color-named": "never",

    // Disallow colours as hex values.
    // @see https://stylelint.io/user-guide/rules/color-no-hex
    "color-no-hex": true,

    // Enforce font-weight notation.
    // @see https://stylelint.io/user-guide/rules/font-weight-notation
    "font-weight-notation": "numeric",

    // Disallow functions.
    // @see https://stylelint.io/user-guide/rules/function-disallowed-list
    "function-disallowed-list": [
      "rgb",
      "rgba",
    ],

    // Limit allowed URL schemes.
    // @see https://stylelint.io/user-guide/rules/function-url-scheme-allowed-list
    "function-url-scheme-allowed-list": [
      "data",
      "/^http/",
    ],

    // Disallow units.
    // @see https://stylelint.io/user-guide/rules/unit-disallowed-list
    "unit-disallowed-list": [
      "cm",
      "mm",
      "in",
      "px",
      "pt",
      "pc",
    ],

    // Disallow redundant values in shorthand properties.
    // @see https://stylelint.io/user-guide/rules/shorthand-property-no-redundant-values
    "shorthand-property-no-redundant-values": true,

    // Disallow vendor prefixed values.
    // @see https://stylelint.io/user-guide/rules/value-no-vendor-prefix
    "value-no-vendor-prefix": true,

    // Disallow vendor prefixed properties.
    // @see https://stylelint.io/user-guide/rules/property-no-vendor-prefix
    "property-no-vendor-prefix": true,

    // Disallow redundant longhand properties (properties which could be
    // combined into one shorthand property).
    // @see https://stylelint.io/user-guide/rules/declaration-block-no-redundant-longhand-properties
    "declaration-block-no-redundant-longhand-properties": true,

    // Limit allowed property and unit pairs within declarations.
    // @see https://stylelint.io/user-guide/rules/declaration-property-unit-allowed-list
    "declaration-property-unit-allowed-list": {
      "font-size": [
        "em",
        "rem",
      ],
      "line-height": [],
    },

    // Limit the number of ID selectors in a selector.
    // @see https://stylelint.io/user-guide/rules/selector-max-id
    "selector-max-id": 0,

    // Disallow qualifying a selector by type.
    // @see https://stylelint.io/user-guide/rules/selector-no-qualifying-type
    "selector-no-qualifying-type": true,

    // Disallow vendor prefixed selectors.
    // @see https://stylelint.io/user-guide/rules/selector-no-vendor-prefix
    "selector-no-vendor-prefix": true,

    // Disallow vendor prefixed media feature names.
    // @see https://stylelint.io/user-guide/rules/media-feature-name-no-vendor-prefix
    "media-feature-name-no-vendor-prefix": true,

    // Disallow vendor prefixed at-rules.
    // @see https://stylelint.io/user-guide/rules/at-rule-no-vendor-prefix
    "at-rule-no-vendor-prefix": true,

    // Disallow unknown animations.
    // @see https://stylelint.io/user-guide/rules/no-unknown-animations
    "no-unknown-animations": true,

    /// /////////////////////////////////////////////////////////////////////////
    // Stylistic Rules
    // @see https://stylelint.io/user-guide/rules/list#stylistic-issues
    /// /////////////////////////////////////////////////////////////////////////

    // Enforce consistent quotation marks around font-family names.
    // @see https://stylelint.io/user-guide/rules/font-family-name-quotes
    "font-family-name-quotes": "always-where-recommended",

    // Enforce consistent whitespace before the commas of functions.
    // @see https://stylelint.io/user-guide/rules/function-comma-newline-before
    "function-comma-newline-before": "never-multi-line",

    // Enforce consistent quotes around URLs.
    // @see https://stylelint.io/user-guide/rules/function-url-quotes
    "function-url-quotes": "always",

    // Enforce consistent  string quotes.
    // @see https://stylelint.io/user-guide/rules/string-quotes
    "string-quotes": "double",

    // Enforce consistent whitespace before the commas of value lists.
    // @see https://stylelint.io/user-guide/rules/value-list-comma-newline-before
    "value-list-comma-newline-before": "never-multi-line",

    // Enforce consistent whitespace after the semicolons of declaration blocks.
    // @see https://stylelint.io/user-guide/rules/declaration-block-semicolon-newline-after
    "declaration-block-semicolon-newline-after": "always-multi-line",

    // Enforce consistent whitespace before the semicolons of declaration
    // blocks.
    // @see https://stylelint.io/user-guide/rules/declaration-block-semicolon-newline-before
    "declaration-block-semicolon-newline-before": "never-multi-line",

    // Enforce consistent quotes around attribute values.
    // @see https://stylelint.io/user-guide/rules/selector-attribute-quotes
    "selector-attribute-quotes": "always",

    // Enforce consistent whitespace before the commas of selector lists.
    // @see https://stylelint.io/user-guide/rules/selector-list-comma-newline-before
    "selector-list-comma-newline-before": "never-multi-line",

    // Enforce consistent whitespace after the commas of selector lists.
    // @see https://stylelint.io/user-guide/rules/selector-list-comma-space-after
    "selector-list-comma-space-after": "always-single-line",

    // Enforce consistent whitespace before the commas of media query lists.
    // @see https://stylelint.io/user-guide/rules/media-query-list-comma-newline-before
    "media-query-list-comma-newline-before": "never-multi-line",

    // Enforce consistent whitespace before the semicolons of at-rules.
    // @see https://stylelint.io/user-guide/rules/at-rule-semicolon-space-before
    "at-rule-semicolon-space-before": "never",

    // Enforce consistent indentation characters and values.
    // NOTE: Please keep in sync with EditorConfig and ESLint configurations.
    // @see https://stylelint.io/user-guide/rules/indentation
    indentation: 2,

    // Enforce either unix or windows linebreaks.
    // NOTE: Please keep in sync with EditorConfig and ESLint configurations.
    // @see https://stylelint.io/user-guide/rules/linebreaks
    linebreaks: "unix",

    // Limit max line length.
    // NOTE: Please keep in sync with EditorConfig and ESLint configurations.
    // @see https://stylelint.io/user-guide/rules/max-line-length
    "max-line-length": 80,

    // Disallow end-of-line (eol) whitespace.
    // NOTE: Please keep in sync with EditorConfig and ESLint configurations.
    // @see https://stylelint.io/user-guide/rules/no-eol-whitespace
    "no-eol-whitespace": true,

    // Enforce end-of-source newline.
    // NOTE: Please keep in sync with EditorConfig and ESLint configurations.
    // @see https://stylelint.io/user-guide/rules/no-missing-end-of-source-newline
    "no-missing-end-of-source-newline": true,

    // Disallow empty first line.
    // @see https://stylelint.io/user-guide/rules/no-empty-first-line
    "no-empty-first-line": true,

    /// /////////////////////////////////////////////////////////////////////////
    // Property Order
    // @see https://github.com/hudochenkov/stylelint-order
    /// /////////////////////////////////////////////////////////////////////////

    // Enforce consistent content order within declaration blocks.
    // @see https://github.com/hudochenkov/stylelint-order/blob/master/rules/order/README.md
    "order/order": [
      "dollar-variables",
      "custom-properties",
      "declarations",
    ],
  },
};