Skip to main content

no-unknown-custom-properties

Disallow unknown custom properties.

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

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

This rule considers custom properties defined within the same source to be known.

The message secondary option can accept the arguments of this rule.

Options​

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