Skip to main content

declaration-property-value-no-unknown

Disallow unknown values for properties within declarations.

a { top: unknown; }
/** ↑    ↑
 * property and value pairs like these */

This rule considers values for properties defined within the CSS specifications to be known. You can use the propertiesSyntax and typesSyntax secondary options to extend the syntax.

You can filter the CSSTree Syntax Reference to find out what value syntax is known for a property.

This rule is only appropriate for CSS. You should not turn it on for CSS-like languages, such as Sass or Less, as they have their own syntaxes.

This rule is experimental with some false negatives that we'll patch in minor releases.

It sometimes overlaps with:

If duplicate problems are flagged, you can turn off the corresponding rule.

Options​

true​

The following patterns are considered problems:

a { top: red; }
a { top: unknown; }

The following patterns are not considered problems:

a { top: 0; }
a { top: var(--foo); }

Optional secondary options​

ignoreProperties: { "property": ["/regex/", /regex/, "non-regex"]|"/regex/"|/regex/|"non-regex" }​

Ignore the specified property and value pairs. Keys in the object indicate property names. If a string in the object is surrounded with "/", it's interpreted as a regular expression. For example, "/.+/" matches any strings.

Given:

{
  "top": ["unknown"],
  "/^margin-/": "/^--foo/",
  "padding": "/.+/",
  "/.+/": "--unknown-value"
}

The following patterns are not considered problems:

a { top: unknown; }
a { margin-top: --foo-bar; }
a { padding: invalid; }
a { width: --unknown-value; }

propertiesSyntax: { property: syntax }​

Extend or alter the properties syntax dictionary. CSS Value Definition Syntax is used to define a value's syntax. If a definition starts with | it is added to the existing definition value if any.

Given:

{ "size": "<length-percentage>" }

The following patterns are not considered problems:

a { size: 0; }
a { size: 10px }

typesSyntax: { type: syntax }​

Extend or alter the types syntax dictionary. CSS Value Definition Syntax is used to define a value's syntax. If a definition starts with | it is added to the existing definition value if any.

Types are something like a preset which allows you to reuse a definition across other definitions. So, you'll likely want to also use the propertiesSyntax option when using this option.

Given:

{
  "propertiesSyntax": { "top": "| <--foo()>" },
  "typesSyntax": { "--foo()": "--foo( <length-percentage> )" }
}

The following patterns are not considered problems:

a { top: --foo(0); }
a { top: --foo(10px); }