Define every custom property a stylesheet reads

How to do it

A misspelt or deleted token does not raise an error. The browser treats the declaration as invalid at computed-value time, and the property falls back to its inherited or initial value. A spacing or colour then quietly disappears on some pages. Collect every declared name from the built CSS and compare it with every name read through var(). Token names follow Prefix a component's custom properties with its name. Values a script sets with setProperty, as in Write styles only in stylesheets, always carry a fallback.

Examples

CSS example

:root { --space-small: 0.5rem; }

/* Passes: declared, or set by a script with a fallback */
.order-card { gap: var(--space-small); }
.order-progress-bar { inline-size: var(--progress, 0%); }

/* Fails: a typo, so the gap silently becomes 0 */
.order-list { gap: var(--space-smal); }

JavaScript example

// Build check: every var() without a fallback reads a declared name
import { readFileSync } from 'node:fs';
const css = readFileSync('dist/main.css', 'utf8');
const declared = new Set([...css.matchAll(/(--[\w-]+)\s*:/g)].map(([, name]) => name));
const missing = [...css.matchAll(/var\(\s*(--[\w-]+)\s*\)/g)].map(([, name]) => name).filter(name => !declared.has(name));
[...new Set(missing)].forEach(name => console.log(`FAIL var(${name}) is never declared`));
process.exit(missing.length ? 1 : 0);

Python example

# The same check in Python
import re, sys
css = open("dist/main.css").read()
declared = set(re.findall(r"(--[\w-]+)\s*:", css))
missing = sorted({name for name in re.findall(r"var\(\s*(--[\w-]+)\s*\)", css) if name not in declared})
for name in missing:
    print(f"FAIL var({name}) is never declared")
sys.exit(1 if missing else 0)

How to check

A build check over the built CSS finds 0 var() calls without a fallback whose name is never declared. Renaming one token in the token file stops the build.

Sources

• CSS Custom Properties on the guaranteed-invalid value
• CSS Custom Properties on using variables

Related rules

• Prefix a component's custom properties with its name in HTML and CSS
• Write styles only in stylesheets in HTML and CSS