web: Run cssnano over static css

web/packages/core/.browserlistrc

@@ -0,0 +1,8 @@
+# Browsers that we support
+
+defaults
+chrome >= 87
+edge >= 87
+firefox >= 84
+iOS >= 14.1
+safari >= 14.1

web/packages/core/package.json

@@ -25,12 +25,16 @@
         "@fluent/langneg": "^0.7.0",
         "@tsconfig/strictest": "^2.0.5",
         "@types/mocha": "^10.0.7",
+        "autoprefixer": "^10.4.19",
+        "cssnano": "^7.0.4",
+        "cssnano-preset-advanced": "^7.0.4",
         "mocha": "^10.6.0",
+        "postcss": "^8.4.39",
         "replace-in-file": "^8.1.0",
-        "typedoc": "^0.26.4",
-        "typescript": "^5.5.3",
         "tsx": "^4.16.2",
-        "tsx-dom": "^3.0.1"
+        "tsx-dom": "^3.0.1",
+        "typedoc": "^0.26.4",
+        "typescript": "^5.5.3"
     },
     "sideEffects": false
 }

web/packages/core/tools/bundle_css.ts

@@ -1,12 +1,23 @@
 import { replaceInFileSync } from "replace-in-file";
 import fs from "fs";
+import postcss from "postcss";
+import cssnanoPlugin from "cssnano";
 
-const css = fs
+const originalCss = fs
     .readFileSync("src/internal/ui/static-styles.css", "utf8")
     .replaceAll("\r", "");
 
+const processor = postcss([
+    cssnanoPlugin({
+        preset: ["advanced", { autoprefixer: { add: true } }],
+    }),
+]);
+processor
+    .process(originalCss, { from: "src/internal/ui/static-styles.css" })
+    .then((result) => {
         replaceInFileSync({
             files: "dist/**",
             from: [/"\s*\/\*\s*%STATIC_STYLES_CSS%\s*\*\/\s*"/g],
-    to: [JSON.stringify(css)],
+            to: [JSON.stringify(result.css)],
+        });
     });