create · pseudo-classes
Hover, focus and active states resolve to separate atomic rules.
StyleX runs its whole compiler over .astro frontmatter. Each tile below names the API it exercises; the styling you see is the proof it compiled.
create · pseudo-classes
Hover, focus and active states resolve to separate atomic rules.
::before · ::after · ::placeholder
pseudo elements
Pseudo-elements, including generated content.
keyframes · prefers-reduced-motion
Animation is disabled where the reader asked for less motion.
dynamic styles
A function style becomes one inline custom property per element.
types.angle · types.number
Registered with @property, so the browser knows the syntax.
firstThatWorks · @supports
position: stickyA fallback chain, resolved at build time.
when.ancestor · when.siblingBefore · defaultMarker
this line reacts to its marked ancestor
and this one to the sibling before it
Hover the first line to drive the second; hover the tile to drive both.
React island
The same compiler output serves an interactive island and the static page.