Production check after #97 promoted: the .glass-panel and .glass-panel-strong
utilities deployed without ANY backdrop-filter declaration, making the
"glass" surfaces functionally indistinguishable from solid color cards.
Root cause (two compounding Lightning CSS quirks in Next.js 16):
1) Lightning CSS silently strips `backdrop-filter: blur(var(--X))
saturate(var(--Y))` from the compiled output when the values use
`var()` chains inside the blur()/saturate() function args. Tailwind's
own .backdrop-blur-* utilities survive because they wrap the *entire*
`blur(...)` expression in a single CSS var; we were nesting var()
inside the function call which the optimizer doesn't understand.
Same root cause emptied .mobile-nav-backdrop in production earlier.
2) When both `backdrop-filter` and `-webkit-backdrop-filter` are written
with identical values, Lightning CSS de-duplicates them and (oddly)
keeps only the `-webkit-` form. Modern Chrome/Edge/Firefox ignore the
webkit prefix, so the blur never applies.
Fix:
- Use LITERAL values: `blur(12px) saturate(180%)` instead of `blur(var(...))
saturate(var(...))`. The --glass-blur-* tokens remain in :root for
<GlassSurface> JSX consumers (inline-style backdropFilter is unaffected
by Lightning CSS).
- Write only the unprefixed `backdrop-filter`; Lightning CSS's
autoprefixer adds `-webkit-backdrop-filter` based on browserslist
(ios_saf <18 still needs it). Verified by `npm run build`:
.glass-panel {
...
-webkit-backdrop-filter: blur(12px) saturate(180%);
backdrop-filter: blur(12px) saturate(180%);
...
}
Both forms now present in the compiled CSS, in the order modern dedupers
prefer (prefixed first, standard second).
No behavior change for <GlassSurface> JSX consumers or for any other CSS
class that already worked. Just gets the two utility classes from #97
actually doing their job.
Co-authored-by: Cursor <cursoragent@cursor.com>
1a14ac050e