Extract, list, and analyze all CSS custom properties (--var) from your stylesheet instantly. A free, browser-based utility for front-end developers.
AI Generation Prompt
CSS Variable Extractor & Analyzer Specification
Overview
A high-performance, browser-based utility designed to parse raw CSS input and output a structured, clean list of all defined CSS Custom Properties (--var). The interface prioritizes speed, readability, and ease of use for front-end developers.
1. Core Features
- Live Regex Parsing: Instant detection of CSS variables as soon as code is pasted.
- Duplicate Filtering: Automatically de-duplicates variables, showing the most recent assignment.
- Search/Filter Bar: A real-time filter to find specific variables by name.
- Copy to Clipboard: One-click actions to copy variable names, values, or full definitions.
- Zero-Storage Architecture: Strictly in-memory processing. No
localStorageor server-side persistence. - Validation Indicator: Visually flags syntax errors in provided CSS blocks.
2. UI/UX Specification
- Layout:
- Header: Clean, minimalist title with a short sub-headline.
- Input Zone: A large, monospaced textarea with syntax highlighting (if possible) or a clean, light-grey background. It should occupy 40% of the screen height.
- Action Toolbar: Contains 'Clear' and 'Copy Results' buttons.
- Results Section: A dynamic table showing two columns: 'Variable Name' and 'Value'. Each row has a 'Copy' button.
- Design Language:
- Palette: Use a professional 'SaaS' palette:
#FFFFFF(background),#F8FAFC(input background),#334155(text), and a primary accent color like#3B82F6(buttons). - Typography: Utilize system fonts like Inter or Segoe UI for maximum readability.
- Interactions: Smooth CSS transitions (ease-in-out) on button hover states. Use subtle box-shadows on card elements to create depth.
- Palette: Use a professional 'SaaS' palette:
3. Technical Constraints & Directives
- Single File: All CSS and JavaScript must be embedded in one HTML file.
- Sandboxed Environment:
- NO
localStorageorsessionStorage. - NO
alert()orconfirm(). Use custom HTML modal overlays for UI feedback. - External Links: Must use
target="_blank" rel="noopener noreferrer".
- NO
- Performance: Use efficient event listeners (e.g.,
inputevent on textarea) to trigger parsing without blocking the main UI thread. - Responsive Design: The input and results sections must stack vertically on mobile devices and scale horizontally on desktops.
4. Implementation Details
- Parser Logic: Implement a
parseCSS()function that runs on input change. Use a global regex/(?:--[\w-]+)\s*:\s*[^;]+/gto capture property pairs. - Copy Functionality: Use the modern
navigator.clipboard.writeText()API. - Formatting: Results table should utilize
white-space: pre-wrapfor long CSS values to prevent layout breakage.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
What are CSS variables and why should I extract them?
CSS variables, also known as custom properties, allow developers to store values such as colors, font sizes, or spacing units to be reused consistently throughout a project. Extracting them into a clean list allows developers to perform audits, check for naming consistency, and ensure that no unused variables are cluttering the stylesheet. This utility makes it easier to visualize the design tokens defined in your codebase. By converting complex CSS into a structured list, you can quickly identify which variables are currently active, helping you maintain a cleaner and more efficient front-end architecture.
Is my data secure when using this tool?
Yes, this tool is 100% secure because it operates entirely on the client side. When you paste your CSS code into the browser, the parsing and extraction logic happen locally within your machine's memory, meaning no data is ever transmitted to a server, stored in a database, or tracked. Because the application does not use external databases or cookies, your proprietary code remains private. Once you close your browser tab, all input data and results are immediately cleared from memory, adhering to strict privacy standards for developer tools.
How does the extraction engine identify variables?
The extractor uses a robust Regular Expression pattern to scan the input text for the standard CSS custom property syntax, which is defined by a double hyphen prefix (e.g., --main-color). It matches these names against their assigned values, stripping away comments and non-variable declarations to provide an accurate report. After identifying the variables, the tool filters out any duplicate definitions, showing you the most recent declaration for each variable found. It then organizes these results into a sortable table, allowing you to easily view the name and value of every custom property in your provided snippet.
Can I use this tool for large-scale CSS files?
Yes, this tool is designed to handle moderately large CSS files efficiently. Because it relies on native JavaScript performance, parsing even several thousand lines of CSS happens near-instantaneously, providing immediate feedback without the need for server-side processing or page reloads. For extremely large projects, you may want to paste only the relevant CSS block (such as your root declarations) into the input area. The tool is optimized for quick, iterative workflows where developers need to verify variable values on the fly during the styling process.
