Why this demo exists

StyleX compiled nothing in .astro files. The cause was one missing extension in a filter, and the reason nobody noticed was an example that avoided the broken path.

The sequence

  1. 01Astro compiles .astro to JavaScript in a plugin declared enforce: "pre".
  2. 02Every bundler plugin therefore sees a plain module, never the --- fences.
  3. 03The StyleX filter skipped .astro, so stylex.create survived to runtime and threw.

Neither half failed loudly. The build threw at render, and once that was fixed the page still shipped with no stylesheet linked at all.

How StyleX orders rules

Atomic CSS cannot rely on source order, so StyleX repeats:not(#\#) to rank properties by how specific they are. Shorthands sit at the bottom, longhands above them. Each rung here is one more repetition.

margin
:not(#\#) padding
:not(#\#):not(#\#) border-radius
:not(#\#):not(#\#):not(#\#) color
:not(#\#):not(#\#):not(#\#):not(#\#) min-height

Running it

The fix is one line in @stylexjs/unplugin, applied here through pnpm patch so this repo runs without a local checkout of StyleX. Seethe index for what compiles.

This paragraph is styled through attrs() and carries a viewTransitionClass.