fix: preserve backdrop filter in production

package.json

@@ -6,7 +6,8 @@
   "packageManager": "pnpm@11.8.0",
   "scripts": {
     "dev": "vite",
-    "build": "tsc --noEmit && vite build && pnpm build:tts",
+    "build": "tsc --noEmit && vite build && pnpm build:verify-css && pnpm build:tts",
+    "build:verify-css": "node scripts/verify-production-css.mjs",
     "build:tts": "esbuild server/edge-tts-server.ts --bundle --platform=node --format=cjs --outfile=dist-server/edge-tts-server.cjs",
     "preview": "vite preview",
     "typecheck": "tsc --noEmit",

scripts/verify-production-css.mjs

@@ -0,0 +1,35 @@
+import { readdir, readFile } from "node:fs/promises";
+import { stdout } from "node:process";
+import { fileURLToPath, URL } from "node:url";
+import path from "node:path";
+
+const assetsDirectory = fileURLToPath(new URL("../dist/assets/", import.meta.url));
+const assetNames = await readdir(assetsDirectory);
+const stylesheetName = assetNames.find((name) => /^index-.*\.css$/.test(name));
+
+if (!stylesheetName) {
+  throw new Error("Production CSS verification failed: index stylesheet was not emitted.");
+}
+
+const stylesheet = await readFile(path.join(assetsDirectory, stylesheetName), "utf8");
+const selector = ".agent-panel-shell.acrylic-panel";
+const selectorOffset = stylesheet.indexOf(selector);
+const ruleStart = stylesheet.indexOf("{", selectorOffset);
+const ruleEnd = stylesheet.indexOf("}", ruleStart);
+
+if (selectorOffset < 0 || ruleStart < 0 || ruleEnd < 0) {
+  throw new Error(`Production CSS verification failed: ${selector} rule is missing.`);
+}
+
+const declarations = stylesheet
+  .slice(ruleStart + 1, ruleEnd)
+  .split(";")
+  .map((declaration) => declaration.trim());
+
+if (!declarations.some((declaration) => declaration.startsWith("backdrop-filter:"))) {
+  throw new Error(
+    "Production CSS verification failed: the standard backdrop-filter declaration was removed."
+  );
+}
+
+stdout.write(`Verified standard backdrop-filter in ${stylesheetName}.\n`);

vite.config.ts

@@ -46,7 +46,7 @@ export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), "");
 
   return {
-    plugins: [runtimeConfigPlugin(env), react(), tailwindcss()],
+    plugins: [runtimeConfigPlugin(env), react(), tailwindcss({ optimize: false })],
     server: {
       allowedHosts: ["next.demo.waternetwork.cn"]
     },