Value No Exposed Custom Properties

A stylelint rule to disallow usage of exposed custom properties.

Installation

npm install stylelint-value-no-exposed-custom-properties

Usage

Add the plugin to your stylelint configuration.

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

Options

true

If the first option is true, then the plugin requires defined custom properties to be used instead of the exposed values of them, and the following pattern are not considered violation:

:root {
  --white: #FFF;
}

.example {
  color: var(--white);
}

While the following pattern are considered violation:

:root {
  --white: #FFF;
}

.example {
  color: #FFF;
}

The error is supposed to be the following:

1:1  ✖  The value (or a part of it) should be presented as a custom property: "#FFF" is "--white"

Custom Properties can be imported using the second option.

false

If the first option is false or null, then the plugin 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-exposed-custom-properties"
  ],
  "rules": {
    "plugin/value-no-exposed-custom-properties": [true, {
      "importFrom": [
        "path/to/file.css", // => :root { --white: #FFF; }
        "path/to/file.json" // => { "custom-properties": { "--white": "#FFF" } },
        "path/to/file.js" // => { module.exports = { customProperties: { "--white": "#FFF" } } }
      ]
    }
  }
}