frontend: upgrade to Vite 5

frontend/.browserlistrc

@@ -0,0 +1,7 @@
+last 2 Chrome versions,
+last 2 Firefox versions,
+Firefox ESR,
+last 2 Opera versions,
+last 2 Safari versions,
+last 2 edge version,
+not dead

frontend/.postcssrc.json

@@ -0,0 +1,8 @@
+{
+  "plugins": {
+    "postcss-import": {},
+    "tailwindcss/nesting": "postcss-nesting",
+    "tailwindcss": {},
+    "autoprefixer": {}
+  }
+}

frontend/package.json

@@ -46,20 +46,21 @@
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^5.0.2",
-    "@graphql-codegen/client-preset": "^4.2.1",
+    "@graphql-codegen/client-preset": "^4.2.2",
     "@graphql-codegen/urql-introspection": "^3.0.0",
     "@graphql-eslint/eslint-plugin": "^3.20.1",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/react": "^7.6.13",
     "@storybook/react-vite": "^7.6.13",
     "@testing-library/react": "^14.2.1",
-    "@types/node": "^20.11.16",
+    "@types/node": "^20.11.17",
     "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.18",
+    "@types/react-dom": "^18.2.19",
     "@types/react-test-renderer": "^18.0.7",
     "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/coverage-v8": "^0.34.6",
+    "@vitest/coverage-v8": "^1.2.2",
     "autoprefixer": "^10.4.17",
+    "browserslist-to-esbuild": "^2.1.1",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",
@@ -69,7 +70,7 @@
     "eslint-plugin-prettier": "^5.1.3",
     "happy-dom": "^13.3.8",
     "i18next-parser": "^8.12.0",
-    "postcss": "^8.4.34",
+    "postcss": "^8.4.35",
     "postcss-modules": "^6.0.0",
     "postcss-nesting": "^12.0.2",
     "prettier": "3.2.5",
@@ -79,11 +80,17 @@
     "storybook-react-i18next": "^2.0.10",
     "tailwindcss": "^3.4.1",
     "typescript": "5.3.3",
-    "vite": "^4.5.2",
+    "vite": "5.0.11",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-graphql-codegen": "^3.3.6",
     "vite-plugin-manifest-sri": "^0.2.0",
     "vite-plugin-svgr": "^4.2.0",
-    "vitest": "^0.34.6"
+    "vitest": "^1.2.2"
+  },
+  "overrides": {
+    "@storybook/react-vite": {
+      "vite": "$vite",
+      "@vitejs/plugin-react": "$@vitejs/plugin-react"
+    }
   }
 }

frontend/src/i18n.ts

@@ -24,8 +24,9 @@ import { initReactI18next } from "react-i18next";
 //   "../locales/en.json": "/whatever/assets/root/locales/en-aabbcc.json",
 //   ...
 // }
-const locales = import.meta.glob("../locales/*.json", {
-  as: "url",
+const locales = import.meta.glob<string>("../locales/*.json", {
+  query: "?url",
+  import: "default",
   eager: true,
 });
 

frontend/src/main.css

@@ -13,14 +13,14 @@
  * limitations under the License.
  */
 
-@import "@fontsource/inter/400.css";
-@import "@fontsource/inter/500.css";
-@import "@fontsource/inter/600.css";
-@import "@fontsource/inter/700.css";
-@import "@fontsource/inconsolata/400.css";
-@import "@fontsource/inconsolata/700.css";
-@import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css";
-@import "@vector-im/compound-web/dist/style.css";
+@import url("@fontsource/inter/400.css");
+@import url("@fontsource/inter/500.css");
+@import url("@fontsource/inter/600.css");
+@import url("@fontsource/inter/700.css");
+@import url("@fontsource/inconsolata/400.css");
+@import url("@fontsource/inconsolata/700.css");
+@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css");
+@import url("@vector-im/compound-web/dist/style.css");
 
 @tailwind base;
 @tailwind components;

frontend/src/templates.css

@@ -13,24 +13,24 @@
  * limitations under the License.
  */
 
-@import "@fontsource/inter/400.css";
-@import "@fontsource/inter/500.css";
-@import "@fontsource/inter/600.css";
-@import "@fontsource/inter/700.css";
-@import "@fontsource/inconsolata/400.css";
-@import "@fontsource/inconsolata/700.css";
-@import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css";
-@import "@vector-im/compound-web/dist/style.css";
-
-@import "./styles/cpd-button.css";
-@import "./styles/cpd-form.css";
-@import "./styles/cpd-link.css";
-@import "./styles/cpd-text-control.css";
-@import "./styles/cpd-mfa-control.css";
-@import "./styles/cpd-checkbox-control.css";
-
-@import "./components/Layout/Layout.module.css";
-@import "./components/Footer/Footer.module.css";
+@import url("@fontsource/inter/400.css");
+@import url("@fontsource/inter/500.css");
+@import url("@fontsource/inter/600.css");
+@import url("@fontsource/inter/700.css");
+@import url("@fontsource/inconsolata/400.css");
+@import url("@fontsource/inconsolata/700.css");
+@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css");
+@import url("@vector-im/compound-web/dist/style.css");
+
+@import url("./styles/cpd-button.css");
+@import url("./styles/cpd-form.css");
+@import url("./styles/cpd-link.css");
+@import url("./styles/cpd-text-control.css");
+@import url("./styles/cpd-mfa-control.css");
+@import url("./styles/cpd-checkbox-control.css");
+
+@import url("./components/Layout/Layout.module.css");
+@import url("./components/Footer/Footer.module.css");
 
 @config "../tailwind.templates.config.cjs";
 

frontend/vite.config.ts

@@ -12,10 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { readFile, writeFile } from "fs/promises";
 import { resolve } from "path";
 
 import react from "@vitejs/plugin-react";
-import { PluginOption } from "vite";
+import browserslistToEsbuild from "browserslist-to-esbuild";
+import type { Manifest, PluginOption } from "vite";
 import compression from "vite-plugin-compression";
 import codegen from "vite-plugin-graphql-codegen";
 import manifestSRI from "vite-plugin-manifest-sri";
@@ -51,11 +53,12 @@ export default defineConfig((env) => ({
   },
 
   build: {
-    manifest: true,
+    manifest: "manifest.json",
     assetsDir: "",
     assetsInlineLimit: 0,
     sourcemap: true,
     modulePreload: false,
+    target: browserslistToEsbuild(),
 
     // We don't exactly handle CSS code splitting well if we're lazy loading components.
     // We disabled lazy loading for now, but we should fix this at some point.
@@ -99,6 +102,52 @@ export default defineConfig((env) => ({
       },
     }),
 
+    // Custom plugin to make sure that each asset has an entry in the manifest
+    // This is needed so that the preloading & asset integrity generation works
+    {
+      name: "manifest-missing-assets",
+
+      apply: "build",
+      enforce: "post",
+      writeBundle: {
+        // This needs to be executed sequentially before the manifestSRI plugin
+        sequential: true,
+        order: "pre",
+        async handler({ dir }): Promise<void> {
+          const manifestPath = resolve(dir, "manifest.json");
+
+          const manifest: Manifest | undefined = await readFile(
+            manifestPath,
+            "utf-8",
+          ).then(JSON.parse, () => undefined);
+
+          if (manifest) {
+            const existing: Set<string> = new Set();
+            const needs: Set<string> = new Set();
+
+            for (const chunk of Object.values(manifest)) {
+              existing.add(chunk.file);
+              for (const css of chunk.css ?? []) needs.add(css);
+              for (const sub of chunk.assets ?? []) needs.add(sub);
+            }
+
+            const missing = Array.from(needs).filter((a) => !existing.has(a));
+
+            if (missing.length > 0) {
+              for (const asset of missing) {
+                manifest[asset] = {
+                  file: asset,
+                  integrity: "",
+                };
+              }
+
+              await writeFile(manifestPath, JSON.stringify(manifest, null, 2));
+            }
+          }
+        },
+      },
+    },
+
     manifestSRI(),
 
     svgr({