denisraslov / stylelint-value-no-unknown-custom-properties

A stylelint rule to catch usage of unknown custom properties

Value No Unknown Custom Properties

Value No Unknown Custom Properties is a stylelint rule to disallow usage of unknown custom properties.

Usage

Add stylelint and Value No Unknown Custom Properties to your project.

npm install stylelint stylelint-value-no-unknown-custom-properties --save-dev

Add Value No Unknown Custom Properties to your stylelint configuration.

{
  "plugins": [
    "stylelint-value-no-unknown-custom-properties"
  ],
  "rules": {
    "csstools/value-no-unknown-custom-properties": true || false || null
  }
}

Options

true

If the first option is true, then Value No Unknown Custom Properties requires all custom properties to be known, and the following patterns are not considered violations:

:root {
  --brand-blue: #33f;
}

.example {
  color: var(--brand-blue);
}

.example {
  color: var(--brand-blue);
}

.some-other-class {
  --brand-blue: #33f;
}

:root {
  --brand-blue: #33f;
  --brand-color: var(--brand-blue);
}

While the following patterns are considered violations:

.example {
  color: var(--brand-blue);
}

:root {
  --brand-color: var(--brand-blue);
}

Custom Properties can be imported using the second option.

false

If the first option is false or null, then Value No Unknown Custom Properties does nothing.

---

importFrom

When the first option is true, then the second option can specify sources where Custom Properties should be imported from by using an importFrom key. These imports might be CSS, JS, and JSON files, functions, and directly passed objects.

// .stylelintrc
{
  "plugins": [
    "stylelint-value-no-unknown-custom-properties"
  ],
  "rules": {
    "csstools/value-no-unknown-custom-properties": [true, {
      "importFrom": [
        "path/to/file.css", // => :root { --brand-blue: #33f; }
        "path/to/file.json" // => { "custom-properties": { "--brand-blue": "#33f" } }
      ]
    }
  }
}