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 SCSS or Less.

This rule checks property values. You can use at-rule-descriptor-value-no-unknown to disallow unknown values for descriptors within at-rules.

This rule overlaps with:

You can either turn off the rules or configure them to ignore the overlaps.

The message secondary option can accept arguments.

Prior art:

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); }