初始化

frontend-web/scripts/postcss-legacy-color-fallback.mjs

@@ -0,0 +1,70 @@
+/**
+ * Tailwind 4 gracefully falls back from color-mix() to the base semantic
+ * color, but that turns utilities such as bg-primary/5 into an opaque fill on
+ * Chrome 109. Replace that fallback with an sRGB-channel based alpha color.
+ * The modern color-mix() declaration remains in its @supports block.
+ */
+
+const LEGACY_RGB_TOKENS = new Set([
+  "accent",
+  "background",
+  "border",
+  "brand-200",
+  "card",
+  "destructive",
+  "foreground",
+  "input",
+  "muted",
+  "muted-foreground",
+  "primary",
+  "primary-foreground",
+  "ring",
+  "secondary",
+  "sidebar-accent",
+  "sidebar-border",
+  "sidebar-foreground",
+  "workspace-brand",
+]);
+
+const TRANSPARENT_MIX_RE =
+  /color-mix\(\s*in\s+[\w-]+\s*,\s*var\(--([\w-]+)\)\s+([\d.]+)%\s*,\s*transparent\s*\)/i;
+
+function legacyAlphaColor(value) {
+  const match = value.match(TRANSPARENT_MIX_RE);
+  if (!match || !LEGACY_RGB_TOKENS.has(match[1])) return null;
+
+  const [, token, percentage] = match;
+  return `rgb(var(--legacy-${token}-rgb) / ${percentage}%)`;
+}
+
+export default function legacyColorFallback() {
+  return {
+    postcssPlugin: "postcss-legacy-color-fallback",
+    OnceExit(root) {
+      root.walkAtRules("supports", (atRule) => {
+        if (!atRule.params.includes("color-mix")) return;
+
+        atRule.walkDecls((modernDeclaration) => {
+          const fallbackValue = legacyAlphaColor(modernDeclaration.value);
+          if (!fallbackValue) return;
+
+          // Tailwind emits the old-browser declaration immediately before
+          // the nested @supports block, in the same utility/variant rule.
+          let fallbackDeclaration = atRule.prev();
+          while (fallbackDeclaration?.type === "comment") {
+            fallbackDeclaration = fallbackDeclaration.prev();
+          }
+
+          if (
+            fallbackDeclaration?.type === "decl" &&
+            fallbackDeclaration.prop === modernDeclaration.prop
+          ) {
+            fallbackDeclaration.value = fallbackValue;
+          }
+        });
+      });
+    },
+  };
+}
+
+legacyColorFallback.postcss = true;