mirror of
https://github.com/phantomptr/ps5upload.git
synced 2026-10-19 02:20:02 -05:00
phantomptrandClaude Opus 5.5
d509f83de2
Tailwind nests the colour-mix() of every colour-with-opacity utility (bg-[var(--color-good)]/5 and the like) in an @supports block inside the rule, and postcss-cascade-layers drops at-rules nested that way. Only the full-strength fallback was left. While the colour tokens sat in @theme Tailwind had resolved those at build time (to the dark theme's colours); on plain custom properties they painted solid. A small PostCSS step now hoists such at-rules out beside their rule first. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Ub1mez9eaVtTF8pMEFXvA9
17 lines
908 B
JavaScript
17 lines
908 B
JavaScript
// Flatten CSS cascade layers (#352).
|
|
//
|
|
// Tailwind v4 wraps every rule it emits in `@layer theme/base/components/utilities`. A WebView
|
|
// without `@layer` (Safari before 15.4: macOS 11 whose system WebKit was never updated, iOS 15.3
|
|
// and older) drops each of those blocks, which leaves the app completely unstyled: the React tree
|
|
// renders, but the page is plain HTML. Flattening keeps the layer order as specificity, so the
|
|
// cascade is the same in a modern engine and the sheet still applies in an old one.
|
|
//
|
|
// Tailwind nests some at-rules inside utility rules (the @supports that carries colour-mix() for
|
|
// `bg-[var(--color-x)]/10`), and the flattening drops those; they are hoisted out first.
|
|
import cascadeLayers from "@csstools/postcss-cascade-layers";
|
|
import hoistNestedAtRules from "./postcss/hoistNestedAtRules.mjs";
|
|
|
|
export default {
|
|
plugins: [hoistNestedAtRules(), cascadeLayers()],
|
|
};
|