diff --git a/plugins/postcss-conditional-values/README.md b/plugins/postcss-conditional-values/README.md index 277fc8cd4..bea2f9287 100644 --- a/plugins/postcss-conditional-values/README.md +++ b/plugins/postcss-conditional-values/README.md @@ -119,6 +119,25 @@ color: csstools-if(--a-condition yellow else red); csstools-if( else ); ``` +#### [Stylelint](https://stylelint.io/user-guide/rules/declaration-property-value-no-unknown/#propertiessyntax--property-syntax-) + +Stylelint is able to check for unknown property values. +Setting the correct configuration for this rule makes it possible to check even non-standard syntax. + +```js + // Disallow unknown values for properties within declarations. + 'declaration-property-value-no-unknown': [ + true, + { + propertiesSyntax: { + color: '| csstools-if( <\'color\'> else <\'color\'> )', + 'background-color': '| csstools-if( <\'background-color\'> else <\'background-color\'> )', + // ... more properties ... + }, + }, + ], +``` + ### `true` and `false` keywords The `true` and `false` keywords are syntactic sugar for `initial` and ``. diff --git a/plugins/postcss-conditional-values/docs/README.md b/plugins/postcss-conditional-values/docs/README.md index 2d9942e7d..b7f5c6dec 100644 --- a/plugins/postcss-conditional-values/docs/README.md +++ b/plugins/postcss-conditional-values/docs/README.md @@ -73,6 +73,25 @@ color: csstools-if(--a-condition yellow else red); csstools-if( else ); ``` +#### [Stylelint](https://stylelint.io/user-guide/rules/declaration-property-value-no-unknown/#propertiessyntax--property-syntax-) + +Stylelint is able to check for unknown property values. +Setting the correct configuration for this rule makes it possible to check even non-standard syntax. + +```js + // Disallow unknown values for properties within declarations. + 'declaration-property-value-no-unknown': [ + true, + { + propertiesSyntax: { + color: '| csstools-if( <\'color\'> else <\'color\'> )', + 'background-color': '| csstools-if( <\'background-color\'> else <\'background-color\'> )', + // ... more properties ... + }, + }, + ], +``` + ### `true` and `false` keywords The `true` and `false` keywords are syntactic sugar for `initial` and ``. diff --git a/plugins/postcss-design-tokens/README.md b/plugins/postcss-design-tokens/README.md index fa04e39a2..26da139ef 100644 --- a/plugins/postcss-design-tokens/README.md +++ b/plugins/postcss-design-tokens/README.md @@ -379,6 +379,27 @@ design-token() = design-token( [ to ]? ) The plugin can convert `px` to `rem` and `rem` to `px` via the [`unitsandvalues`](#unitsandvalues) plugin options. When a design token is unit-less any `unit` can be assigned with `to`. +#### [Stylelint](https://stylelint.io/user-guide/rules/declaration-property-value-no-unknown/#propertiessyntax--property-syntax-) + +Stylelint is able to check for unknown property values. +Setting the correct configuration for this rule makes it possible to check even non-standard syntax. + +```js + // Disallow unknown values for properties within declarations. + 'declaration-property-value-no-unknown': [ + true, + { + propertiesSyntax: { + color: '| ', + // ... more properties ... + }, + typesSyntax: { + '': 'design-token( [ to ]? )', + }, + }, + ], +``` + ## Further reading - [Why we think PostCSS Design Tokens is needed] diff --git a/plugins/postcss-design-tokens/docs/README.md b/plugins/postcss-design-tokens/docs/README.md index 8482c890e..0b57f010b 100644 --- a/plugins/postcss-design-tokens/docs/README.md +++ b/plugins/postcss-design-tokens/docs/README.md @@ -248,6 +248,27 @@ design-token() = design-token( [ to ]? ) The plugin can convert `px` to `rem` and `rem` to `px` via the [`unitsandvalues`](#unitsandvalues) plugin options. When a design token is unit-less any `unit` can be assigned with `to`. +#### [Stylelint](https://stylelint.io/user-guide/rules/declaration-property-value-no-unknown/#propertiessyntax--property-syntax-) + +Stylelint is able to check for unknown property values. +Setting the correct configuration for this rule makes it possible to check even non-standard syntax. + +```js + // Disallow unknown values for properties within declarations. + 'declaration-property-value-no-unknown': [ + true, + { + propertiesSyntax: { + color: '| ', + // ... more properties ... + }, + typesSyntax: { + '': 'design-token( [ to ]? )', + }, + }, + ], +``` + ## Further reading - [Why we think PostCSS Design Tokens is needed]