What CSS Custom Properties Are and Why Extract Them
CSS custom properties (informally called CSS variables) are declared with a double-hyphen prefix, like --primary-color: #6366f1;, and read elsewhere with the var() function, like color: var(--primary-color);. Extracting every declared variable from a large stylesheet into one list is useful for auditing a design system (finding duplicate or near-duplicate values), migrating to a design-tokens pipeline, generating documentation, or simply understanding what a codebase's variable naming conventions actually are without manually scrolling through every file.
How Scope Tracking Works
Each extracted variable is tagged with the selector it was declared under. Variables declared under :root are globally available anywhere in the document, the most common place to define a design system's base tokens. Variables re-declared under a more specific selector, like .dark { --bg: #0a0a0a; }, override the :root value only within that selector's scope, a common technique for implementing dark mode or per-component theming without duplicating the whole variable set. Seeing the scope alongside each variable makes it possible to tell a genuinely global token apart from a scoped override at a glance.
The Four Export Formats
List shows each variable as a plain name: value line, useful for quick scanning or pasting into documentation. JSON produces a flat name-to-value object, the most common format for feeding a design-tokens pipeline or a JS build tool that consumes token definitions. SCSS converts each variable into a $sass-variable declaration (stripping the leading --), useful when migrating a CSS-custom-property-based system into a Sass-based one. JS token object wraps everything in a const tokens = { ... } object literal, ready to import directly into a JavaScript or TypeScript file.
Filtering to a Subset of Variables
The filter field matches against both variable names and values, so filtering by "color" surfaces every variable whose name contains "color" (--primary-color, --text-color) as well as any variable whose value happens to mention it, letting you narrow a large token set down to just the colors, just the spacing scale, or any other naming convention your codebase already uses.
Common Patterns: Dark Mode and Design Tokens
Two of the most common real-world uses for this tool are auditing a dark-mode implementation (comparing the :root light-mode values against a .dark or [data-theme="dark"] override block to make sure every token that should flip actually has a dark counterpart) and bootstrapping a design-tokens file from an existing, unstructured stylesheet, extracting to JSON or the JS token format as a first pass before further organizing the tokens into a formal system. As a css variable extractor and css custom properties extractor built to extract css variables from any stylesheet, it converts css variables to json or css variables to scss, acting as a design tokens extractor, a css var list generator, a css variable scope finder, a css to design tokens pipeline, and a way to extract root variables specifically.