Parser Reference

Parser Syntax Test

Comprehensive test of AdorableCSS parser patterns and edge cases

Basic Syntax

Parse	Pattern	Description	CSS Output
...	`relative`	Keyword rule without arguments	Loading...
...	`w(full)`	Single value	Loading...
...	`p(10)`	Numeric value	Loading...
...	`w(100px)`	Value with unit	Loading...
...	`p(md)`	Token reference	Loading...
...	`btn-primary`	Hyphenated rule name	Loading...
...	`inline_block`	Underscored rule name	Loading...

Parse	Pattern	Description	CSS Output
...	`p(10/20)`	Slash separator	Loading...
...	`border(1/solid/mute-200)`	Multiple slash values	Loading...
...	`p(10/20/30/40)`	Four values	Loading...
...	`font(16/1.5)`	Numeric slash values	Loading...
...	`font(lg/1.6/-1%)`	Token slash values	Loading...

Parse	Pattern	Description	CSS Output
...	`hbox(top+left)`	Plus operator (combine values)	Loading...
...	`layer(top:20)`	Colon separator (key:value)	Loading...
...	`layer(center)`	Single position value	Loading...
...	`layer(top:10/left:20)`	Multiple key-value pairs (slash separated)	Loading...
...	`layer(fill/20)`	Combined position and z-index	Loading...

Parse	Pattern	Description	CSS Output
...	`bg(red..blue)`	Range/gradient syntax	Loading...
...	`bg(purple-500..pink-500)`	Color gradient	Loading...
...	`bg(90deg/red..blue)`	Directional gradient	Loading...
...	`bg(135deg/purple-500..pink-500)`	Angle gradient	Loading...
...	`bg(to-tr/red..blue)`	Keyword direction gradient	Loading...
...	`c(45deg/purple-500..pink-500)`	Text gradient	Loading...

Parse	Pattern	Description	CSS Output
...	`c(red.5)`	Dot opacity (50%)	Loading...
...	`bg(black.1)`	Dot opacity (10%)	Loading...
...	`c(blue-500.05)`	Dot opacity (5%)	Loading...
...	`bg(primary.8)`	Token with opacity	Loading...
...	`border(1/mute-200.5)`	Border with opacity	Loading...

Parse	Pattern	Description	CSS Output
...	`w(100%-20)`	Percentage minus pixels	Loading...
...	`h(50%+10)`	Percentage plus pixels	Loading...
...	`w(full-20)`	Token with calculation	Loading...
...	`h(100vh-60)`	Viewport units calculation	Loading...

Parse	Pattern	Description	CSS Output
...	`hover:scale(1.05)`	Hover state	Loading...
...	`focus:ring(2/blue-500)`	Focus state	Loading...
...	`active:scale(0.95)`	Active state	Loading...
...	`disabled:opacity(0.5)`	Disabled state	Loading...
...	`checked:bg(blue-500)`	Checked state	Loading...
...	`hover:focus:c(blue-700)`	Multiple states	Loading...

Parse	Pattern	Description	CSS Output
...	`sm:hidden`	Small breakpoint	Loading...
...	`md:w(full)`	Medium breakpoint	Loading...
...	`lg:grid(4)`	Large breakpoint	Loading...
...	`xl:text(2xl)`	Extra large breakpoint	Loading...
...	`..md:hidden`	Up to medium	Loading...
...	`md..lg:block`	Between medium and large	Loading...

Parse	Pattern	Description	CSS Output
...	`size(16:9)`	Aspect ratio	Loading...
...	`size(320x200)`	Dimensions	Loading...
...	`w(auto)`	Auto keyword	Loading...
...	`display(none)`	None keyword	Loading...
...	`c(inherit)`	Inherit keyword	Loading...
...	`bg(red)!`	Important modifier	Loading...

Parse	Pattern	Description	CSS Output
...	`hover:md:scale(1.1)`	State + responsive	Loading...
...	`md:hover:bg(mute-100)`	Responsive + state	Loading...
...	`group-hover:opacity(1)`	Group hover	Loading...
...	`peer-focus:ring(2)`	Peer focus	Loading...
...	`w(full)!`	Rule with important	Loading...

Parse	Pattern	Description	CSS Output
...	`p()`	Empty parentheses	Loading...
...	`p( )`	Whitespace in parentheses	Loading...
...	`p(0)`	Zero value	Loading...
...	`mt(-10)`	Negative value	Loading...
...	`c(--custom-var)`	CSS variable	Loading...
...	`w(calc(100%-20px))`	CSS calc function	Loading...

Enter pattern

/ Multiple values

+ Combined values

: Key-value pairs

.. Ranges/gradients

. Opacity notation

hover: Hover state

md: Responsive

! Important

group- Group state

.. Range prefix

auto Auto keyword

none None keyword

full 100% token

16:9 Aspect ratio

100%-20 Calc