All tools

CSS Custom Property (Variable) Usage Auditor

CSS

Cross-check a CSS stylesheet's --name custom-property declarations against their var(--name) usages, flagging unused declarations, undeclared usages, and duplicate declarations within the same selector

CSS custom properties are easy to lose track of once a design-token file grows past a dozen variables: one gets renamed in one place and not another, or declared twice in the same selector where the second value silently wins. This tool scans a stylesheet's --name declarations and var(--name) usages and reports which variables are declared but never referenced, referenced but never declared (a likely typo or a renamed token), and declared more than once inside the same selector block. It works on the text you paste in, there's no live DOM or browser style computation involved.

variablescustom-propertiesauditlinterdesign-tokens

How to use CSS Custom Property (Variable) Usage Auditor

  • 1.Paste a CSS stylesheet, including any :root or component-level custom property declarations.
  • 2.Check the unused, undeclared, and duplicate lists for anything that looks like a typo or a leftover token.
  • 3.Review the full declarations list at the bottom to see every custom property's value and the selector it belongs to.

Frequently asked questions

Does this account for @media-guarded duplicate declarations?
No. Selector tracking is a brace-depth scan rather than a full CSS parser, so the same selector repeated inside two different @media blocks is reported as a duplicate even though that's a common, valid way to override a variable at different breakpoints.
What counts as an undeclared usage?
Any var(--name) reference whose --name never appears on the left side of a declaration anywhere in the stylesheet you pasted in, including inside a fallback like var(--a, var(--b, red)).
Is my CSS sent to a server?
No, the browser tool parses everything client-side. The REST API and SDKs process whatever stylesheet you send them, same as any other API call.
Does it validate CSS syntax generally?
No, it only tracks --name declarations and var(--name) usages; it doesn't check selector syntax, property names, or value validity beyond what's needed to extract custom properties.

Use via API, SDK, or MCP

cURL# Free: 1,000 req/day · Pro: 10,000 req/day
curl -X POST https://api.utilix.tech/v1/tools/css-custom-property-auditor \
  -H "Authorization: Bearer utx_live_..." \
  -H "Content-Type: application/json" \
  -d '{"css":":root {\n  --accent: #0070f3;\n  --unused: red;\n}\n.btn {\n  color: var(--accent);\n  background: var(--missing);\n}\n"}'

Get an API key from your dashboard · Full API docs →

Related tools

Prompt Template Variable ExtractorExtract {{variable}}-style placeholders from a prompt template, flag duplicates, and cross-check against a list of variables your code actually providesAI / AgentTool-Definition Schema LinterLint an LLM tool/function-calling JSON definition (OpenAI, Anthropic, or MCP format) for mistakes that measurably hurt model accuracy: missing descriptions, invalid names, empty enums, or a required field with no matching propertyAI / Agent