no-unknown-custom-properties.md

Pattern: Unknown custom property

Issue: -

Description

Disallows 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.

Examples

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

Further Reading

• stylelint - no-unknown-custom-properties