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 in the CSS Specifications, up to and including Editor's Drafts, to be known.

You can filter the CSSTree Syntax Reference to find out what value syntax is known for a property, and use the languageOptions configuration property to extend it.

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

warning

This rule is only appropriate for CSS. You should not turn it on for CSS-like languages, such as SCSS or Less.

note

When using this rule, we recommend turning off these overlapping rules or configuring them to ignore the overlaps:

Prior art:

Options​

true​

{
  "declaration-property-value-no-unknown": 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​

{
  "ignoreProperties": { "property-name": ["array", "of", "values", "/regex/"] }
}

Ignore the specified property and value pairs. Keys in the object indicate property names.

You can specify a regex for a property name, such as { "/^margin/": [] }.

Given:

{
  "declaration-property-value-no-unknown": [
    true,
    {
      "ignoreProperties": {
        "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​

warning

We will remove this option in the next major release. Use the languageOptions configuration property instead.

{ "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:

{
  "declaration-property-value-no-unknown": [
    true,
    { "propertiesSyntax": { "size": "<length-percentage>" } }
  ]
}

The following patterns are not considered problems:

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

typesSyntax​

warning

We will remove this option in the next major release. Use the languageOptions configuration property instead.

{ "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:

{
  "declaration-property-value-no-unknown": [
    true,
    {
      "propertiesSyntax": { "top": "| <--foo()>" },
      "typesSyntax": { "--foo()": "--foo( <length-percentage> )" }
    }
  ]
}

The following patterns are not considered problems:

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