no-unknown-custom-properties

Disallow unknown custom properties.

a { color: var(--foo); }
/**            ↑
 *             This custom property */

a { color: var(--foo, var(--bar)); }
/**                       ↑
 *                        And this one */

Use this rule to avoid custom properties in var() that match no definition. Browsers reset the property to its initial or inherited value when there is no fallback.

This rule considers custom properties defined within the same source or within the files specified in the referenceFiles configuration property to be known.

This rule supports 1 message argument: the unknown custom property.

Options

true

{
  "no-unknown-custom-properties": true
}

The following patterns are considered problems:

a { color: var(--foo); }

a { color: var(--foo, var(--bar)); }

The following patterns are not considered problems:

a { --foo: #f00; color: var(--foo); }

a { color: var(--foo, #f00); }

a { --foo: #f00; color: var(--bar, var(--foo)); }

@property --foo { syntax: "<color>"; inherits: false; initial-value: #f00; }
a { color: var(--foo); }