https://github.com/csstools/stylelint-value-no-unknown-custom-properties
A stylelint rule to catch usage of unknown custom properties
https://github.com/csstools/stylelint-value-no-unknown-custom-properties
Last synced: 6 months ago
JSON representation
A stylelint rule to catch usage of unknown custom properties
- Host: GitHub
- URL: https://github.com/csstools/stylelint-value-no-unknown-custom-properties
- Owner: csstools
- License: cc0-1.0
- Created: 2018-09-25T05:41:26.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2024-12-27T18:28:02.000Z (about 1 year ago)
- Last Synced: 2025-05-05T05:39:21.778Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 462 KB
- Stars: 71
- Watchers: 7
- Forks: 29
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Stylelint Value No Unknown Custom Properties [
][stylelint]
[![NPM Version][npm-img]][npm-url]
[![test][test-badge]][test-url]
[![Discord][discord-badge]][discord]
[Stylelint Value No Unknown Custom Properties] is a [stylelint] rule to disallow usage of
unknown custom properties.
## Usage
Add [stylelint] and [Stylelint Value No Unknown Custom Properties] to your project.
```bash
npm install stylelint stylelint-value-no-unknown-custom-properties --save-dev
```
Add [Stylelint Value No Unknown Custom Properties] to your [stylelint configuration].
```js
{
"plugins": [
"stylelint-value-no-unknown-custom-properties"
],
"rules": {
"csstools/value-no-unknown-custom-properties": true || null
}
}
```
## Options
### true
If the first option is `true`, then [Stylelint Value No Unknown Custom Properties]
requires all custom properties to be known, and the following patterns are
_not_ considered violations:
```css
:root {
--brand-blue: #33f;
}
.example {
color: var(--brand-blue);
}
```
```css
.example {
color: var(--brand-blue);
}
.some-other-class {
--brand-blue: #33f;
}
```
```css
:root {
--brand-blue: #33f;
--brand-color: var(--brand-blue);
}
```
While the following patterns are considered violations:
```css
.example {
color: var(--brand-blue);
}
```
```css
:root {
--brand-color: var(--brand-blue);
}
```
Custom Properties can be imported using the second option.
### `null`
If the first option is `null`, then
[Stylelint 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.
The plugin resolves relative paths from the current working directory
which may not work in monorepos, in which case it is best to pass only absolute
paths to the plugin.
```js
// .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" } }
]
}]
}
}
```
### resolver
Use this option to configure how the rule solve paths of `@import` rules.
```js
// .stylelintrc
{
"plugins": [
"stylelint-value-no-unknown-custom-properties"
],
"rules": {
"csstools/value-no-unknown-custom-properties": [true, {
"resolver": {
"extensions": [".css"], // => default to [".css"]
"paths": ["./assets/css", "./static/css"], // => paths to look for files, default to []
"moduleDirectories": ["node_modules"] // => modules folder to look for files, default to ["node_modules"]
}
}]
}
}
```
[discord]: https://discord.gg/bUadyRwkJS
[discord-badge]: https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white
[test-badge]: https://github.com/csstools/stylelint-value-no-unknown-custom-properties/actions/workflows/test.yml/badge.svg
[test-url]: https://github.com/csstools/stylelint-value-no-unknown-custom-properties/actions/workflows/test.yml
[npm-img]: https://img.shields.io/npm/v/stylelint-value-no-unknown-custom-properties.svg
[npm-url]: https://www.npmjs.com/package/stylelint-value-no-unknown-custom-properties
[stylelint]: https://github.com/stylelint/stylelint
[stylelint configuration]: https://stylelint.io/user-guide/configure/
[Stylelint Value No Unknown Custom Properties]: https://github.com/csstools/stylelint-value-no-unknown-custom-properties