A stylelint rule to catch usage of unknown custom properties
Switch branches/tags
Nothing to show
Clone or download
Latest commit cec7b16 Sep 26, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib 2.0.0 Sep 26, 2018
test 2.0.0 Sep 26, 2018
.editorconfig 1.0.0 Sep 25, 2018
.gitignore 2.0.0 Sep 26, 2018
.rollup.js 1.0.0 Sep 25, 2018
.tape.js 2.0.0 Sep 26, 2018
.travis.yml 1.0.0 Sep 25, 2018
CHANGELOG.md 2.0.0 Sep 26, 2018
CONTRIBUTING.md 1.0.0 Sep 25, 2018
LICENSE.md 1.0.0 Sep 25, 2018
README.md 2.0.0 Sep 26, 2018
index.js 2.0.0 Sep 26, 2018
package.json 2.0.0 Sep 26, 2018

README.md

Value No Unknown Custom Properties stylelint

NPM Version Build Status Support Chat

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" } }
      ]
    }
  }
}