Parse CSS into a simplified structural report containing selectors, declarations, at-rules, variables, media queries, and keyframes. Use the JSON output to inspect or document stylesheet structure.
Parse CSS into a simplified structural report containing selectors, declarations, at-rules, variables, media queries, and keyframes. Use the JSON output to inspect or document stylesheet structure.
Processing is performed locally. Advanced language edge cases may require a full standards-based parser or project-specific toolchain.
Input:
:root { --primary: #8b5cf6; }
@media (max-width: 768px) {
.card:hover { color: var(--primary); }
}Output: Run the included example to see a real result generated by this tool.Paste CSS and select JSON structure to receive a simplified rule, selector, declaration, and at-rule representation.
Select Selector list to output unique selectors found in standard style rules.
The parser collects custom-property declarations beginning with two hyphens and reports their values.
Media-query prelude text is extracted from @media blocks and included in the structural report.
Use JSON structure or readable summary, depending on whether the result is for code or manual review.
| Module | Purpose |
|---|---|
| Structure | Protect strings and comments before scanning. |
| Processing | Apply the selected conversion, parser, validator, viewer, inspector, checker, or generator logic. |
| Reporting | Return output, status, measured size, lines, and practical notes. |