Syntax Checker & Code Validator
About CSS AST Viewer
The CSS Abstract Syntax Tree (AST) Explorer parses stylesheets into PostCSS AST nodes, inspecting `Rule`, `Decl`, `AtRule`, and `Comment` objects with selectors, properties, values, and source map coordinates.
How to Use CSS AST Viewer
Step 1
Paste CSS code into the editor.
Step 2
Explore the generated PostCSS AST tree in the right pane.
Step 3
Inspect property names, values, raw strings, and source position coordinates.
Step 4
Click "Copy AST JSON".
Practical Use Cases for CSS AST Viewer
PostCSS & Stylelint Plugin Development
Inspect CSS AST node representations to build custom PostCSS transformers, autoprefixers, and Stylelint rule checks.
CSS Selector Complexity & Specificity Auditing
Analyze selector token hierarchies and CSS declaration structures to identify bloated or redundant CSS rules.
Input & Output Examples
Parsing `.card { color: red; }`
`.card { color: red; }``Root` $\\rightarrow$ `Rule` (selector: `".card"`) $\\rightarrow$ `Declaration` (prop: `"color"`, value: `"red"`, source: line 1)
Key Features & Performance
- ✓PostCSS compliant AST output format (`Root`, `Rule`, `Declaration`, `AtRule`).
- ✓Bidirectional highlighting: clicking a CSS declaration highlights its corresponding AST node.
- ✓Supports CSS Custom Properties, `@media`, `@keyframes`, and `@supports` at-rules.
- ✓100% Client-Side memory execution via PostCSS.
- ✓1-Click Copy AST JSON tree.
Key Terminology & Definitions
PostCSS AST
The standard object tree representation of CSS consisting of Root, Rule, Decl, AtRule, and Comment nodes.
AtRule Node
A CSS statement beginning with an `@` symbol (such as `@media`, `@import`, `@keyframes`, or `@layer`).