Does stylelint has a rule to detect unknown values?

Question

I'm new to Stylelint and I see that it has a rule to identify unknown CSS units.

I can't find a rule that warns about the use of unknown values.

for example: align-items: wrongValue;

See attached Screenshoot that shows Stylint warns me about wrong CSS unit type but not on wrong CSS value

Does Stylelint have such a rule?

If not, what can I do to prevent these potential errors?

score 0 · Answer 1 · answered Jun 05 '21 at 12:38

I don't know if there are defaults, but it looks like you can customize what are acceptable values using the declaration-property-value-allowed-list in your stylelint configuration file.

https://stylelint.io/user-guide/rules/list/declaration-property-value-allowed-list

Something like this would only allow use of stretch or center:

{
  "align-items": ["stretch","center"]
}

score 0 · Answer 2 · answered Jun 05 '21 at 19:31

0

CSSTree has a built-in lexer that can test CSS against syntaxes defined by W3C.

It can be used within stylelint using the stylelint-csstree-validator plugin:

// .stylelintrc.js
{
  "plugins": [
    "stylelint-csstree-validator"
  ],
  "rules": {
    "csstree/validator": true
  }
}

answered Jun 05 '21 at 19:31

jeddy3

3,451
1
12
21

Thanks! I'm curious why Stylelint isn't shipped out of the box with this validation (as a rule). Look to me as an important thing to validate. – Aviv Hadar Jun 07 '21 at 10:17

score 0 · Answer 3 · answered Mar 07 '23 at 09:01

Stylelint 15 added the declaration-property-value-no-unknown rule: https://stylelint.io/migration-guide/to-15/#added-declaration-property-value-no-unknown-rule

{
  "extends": ["stylelint-config-standard"],
  "rules": {
+   "declaration-property-value-no-unknown": true
    ..
   }
}

When enabled, this rule will warn you about invalid values like this one:

a {
  top: red;
}

Does stylelint has a rule to detect unknown values?

3 Answers3