CSS Custom Property Parser
Extract custom-property declarations from a CSS declaration list, preserving nested value syntax and duplicate declarations.
Description
CSS custom properties store token-like values that can contain strings, functions and nested delimiters.
CSS custom properties store token-like values that can contain strings, functions and nested delimiters. Extraction of declarations is separate from resolving the cascade or var().1, 2
The returned values include Custom properties in declaration order. The How section below explains the calculation, input rules and interpretation.
When to use CSS Custom Property Parser
Use CSS Custom Property Parser when you need to evaluate the supplied records under the calculation and evidence rules below. No selector parsing, cascade winner, variable substitution, CSS escape decoding or semantic value validation occurs. Values retain important markers and nested syntax; unclosed syntax is rejected.
Paste the declaration list without a surrounding selector block and preserve strings, escapes and nested value syntax.
How to use CSS Custom Property Parser and understand its results
- Paste the declaration list without a surrounding selector block and preserve strings, escapes and nested value syntax.
- Enter declarations using the field table and calculation rules, then run the tool.
- Read variables. The explanation below defines the units, signs, ordering and any flags or placeholder values.
- If the tool reports an input issue, correct the values and run it again. Apply the stated assumptions when interpreting a successfully returned result.
| Input field | Meaning | Value type; see rules below | Requirement |
|---|---|---|---|
| declarations | CSS declaration list without a surrounding selector block. | string; maximum length: 1000000 | Required |
Paste a declaration list without a selector block. Split only top-level semicolons while tracking quotes, escapes, comments and balanced brackets. Strip comments outside strings, find the first colon, ignore ordinary properties and retain custom-property names/trimmed values with duplicates. Require an unescaped name beginning two hyphens and at least one allowed character. Empty custom values are allowed.
variables=custom-property declarations in input order Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.
| Output field | Meaning | Value type |
|---|---|---|
| variables | Custom properties in declaration order. | list of object; minimum entries: 0; maximum entries: 100000 |
| variables[].name | Field in variables record | string; maximum length: 1000000 |
| variables[].value | Field in variables record | string; maximum length: 1000000 |
{
"input": {
"declarations": "--brand: #336699; color: var(--brand); --font: \"a;b\"; --brand: rgb(1 2 3 / .5);"
},
"output": {
"variables": [
{
"name": "--brand",
"value": "#336699"
},
{
"name": "--font",
"value": "\"a;b\""
},
{
"name": "--brand",
"value": "rgb(1 2 3 / .5)"
}
]
}
}Limitations and assumptions
No selector parsing, cascade winner, variable substitution, CSS escape decoding or semantic value validation occurs. Values retain important markers and nested syntax; unclosed syntax is rejected.
Numeric inputs, where present, must be finite. Follow the calculation-specific rules for overflow, underflow and exceptional cases. Extremely large text inputs are rejected. Missing fields without a declared default, extra fields, wrong value types and violations of the calculation rules are input errors.
Alternative or Complementary methods
Use CSS Media Query Extractor: Extract lexical @media query preludes from CSS while ignoring quoted strings and comments, without evaluating conditions. For a complementary task, use CSS Selector Specificity: Calculate Level 4 specificity triples for selector lists, including is, not, has, where, and nth-child of; unresolved nesting selectors are rejected.
Further background: CSS Custom Properties for Cascading Variables.
References
Similar or alternative tools
- CSS Media Query Extractor
Extract lexical @media query preludes from CSS while ignoring quoted strings and comments, without evaluating conditions.
- CSS Selector Specificity
Calculate Level 4 specificity triples for selector lists, including is, not, has, where, and nth-child of; unresolved nesting selectors are rejected.