feat(Bundler): update to vite 8

packages/components/.storybook/main.ts

@@ -1,5 +1,6 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 import viteCheckerPlugin from "vite-plugin-checker";
+import { mergeConfig } from "vite";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.stories.tsx"],
@@ -14,10 +15,11 @@ const config: StorybookConfig = {
       // no options
     },
   },
+  core: {
+    disableTelemetry: true,
+    builder: "@storybook/builder-vite",
+  },
   viteFinal: async (conf) => {
-    // See why dynamic import: see https://github.com/storybookjs/storybook/issues/26291#issuecomment-1978193283
-    const { mergeConfig } = await import("vite");
-
     return mergeConfig(conf, {
       plugins: [
         viteCheckerPlugin({

packages/components/.storybook/mittwaldTheme.ts

@@ -1,10 +1,10 @@
 import { create } from "storybook/theming/create";
+import logo from "./mw_logo_white.svg";
 
 export default create({
   base: "dark",
   brandTitle: "Flow - mittwald Design System",
   brandUrl: "https://mittwald.de",
-  brandImage:
-    "https://raw.githubusercontent.com/mittwald/flow/main/.github/mittwald_logo_white.svg",
+  brandImage: logo,
   brandTarget: "_self",
 });

packages/components/dev/vite/viteI18nPlugin.test.ts

@@ -8,9 +8,10 @@ import type {
   PartialResolvedId,
   PluginContext,
   SourceDescription,
-} from "rollup";
+} from "rolldown";
 import path from "path";
-import type { HmrContext, ViteDevServer } from "vite";
+import type { MinimalPluginContextWithoutEnvironment } from "vite";
+import { type HmrContext, type ViteDevServer } from "vite";
 
 describe("vite i18n plugin", () => {
   test("resolve will return correct id", async () => {
@@ -23,7 +24,6 @@ describe("vite i18n plugin", () => {
         "./foo.ts",
         {
           isEntry: false,
-          attributes: {},
         },
       ])) as PartialResolvedId;
 
@@ -45,7 +45,6 @@ describe("vite i18n plugin", () => {
         "",
         {
           isEntry: false,
-          attributes: {},
         },
       ])) as PartialResolvedId;
 
@@ -150,7 +149,10 @@ describe("vite i18n plugin", () => {
         modules: [],
       } as HmrContext;
 
-      plugin.handleHotUpdate.apply(this, [hmrContext]);
+      plugin.handleHotUpdate.apply(
+        this as unknown as MinimalPluginContextWithoutEnvironment,
+        [hmrContext],
+      );
       expect(hmrContext.server.moduleGraph.getModuleById).toBeCalledTimes(0);
       expect(hmrContext.server.reloadModule).toBeCalledTimes(0);
     }
@@ -178,7 +180,10 @@ describe("vite i18n plugin", () => {
         modules: [],
       } as HmrContext;
 
-      plugin.handleHotUpdate.apply(this, [hmrContext]);
+      plugin.handleHotUpdate.apply(
+        this as unknown as MinimalPluginContextWithoutEnvironment,
+        [hmrContext],
+      );
       expect(hmrContext.server.moduleGraph.getModuleById).toBeCalledTimes(3);
       expect(hmrContext.server.moduleGraph.getModuleById).toBeCalledWith(
         generateVirtualFileId("./dev/vite/test/locales/*.locale.json"),

packages/components/package.json

@@ -122,22 +122,23 @@
     "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
     "@mittwald/typescript-config": "workspace:*",
     "@nx/storybook": "^22.4.4",
-    "@storybook/addon-a11y": "^10.2.3",
+    "@storybook/addon-a11y": "^10.3.5",
     "@storybook/addon-actions": "^9.0.8",
-    "@storybook/addon-links": "^10.2.3",
-    "@storybook/react": "^10.2.3",
-    "@storybook/react-vite": "^10.2.3",
+    "@storybook/addon-links": "^10.3.5",
+    "@storybook/react": "^10.3.5",
+    "@storybook/react-vite": "^10.3.5",
+    "@storybook/builder-vite": "^10.3.5",
     "@tabler/icons-react": "^3.36.1",
     "@types/node": "24.10.1",
-    "@vitejs/plugin-react": "^5.1.3",
-    "@vitest/browser": "^4.0.18",
-    "@vitest/browser-playwright": "^4.0.18",
-    "@vitest/coverage-v8": "~4.0.18",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/browser": "^4.1.4",
+    "@vitest/browser-playwright": "^4.1.4",
+    "@vitest/coverage-v8": "^4.1.4",
     "camelcase": "^9.0.0",
     "decamelize": "^6.0.1",
     "fs-jetpack": "^5.1.0",
     "glob": "^13.0.0",
-    "happy-dom": "^20.4.0",
+    "happy-dom": "^20.9.0",
     "next": "~16.1.6",
     "nx": "^22.4.4",
     "postcss": "^8.5.6",
@@ -151,20 +152,19 @@
     "react-element-to-jsx-string": "^17.0.1",
     "react-hook-form": "^7.71.1",
     "rimraf": "^6.1.2",
-    "rollup": "~4.57.1",
     "sass": "^1.97.3",
-    "storybook": "^10.2.3",
+    "storybook": "^10.3.5",
     "storybook-addon-rtl": "^3.0.1",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "typescript-plugin-css-modules": "^5.2.0",
-    "vite": "^7.3.1",
+    "vite": "^8.0.8",
     "vite-plugin-banner": "^0.8.1",
     "vite-plugin-checker": "^0.12.0",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-externalize-deps": "^0.10.0",
-    "vitest": "~4.0.18",
-    "vitest-browser-react": "^2.0.2",
+    "vitest": "^4.1.4",
+    "vitest-browser-react": "^2.2.0",
     "yaml": "^2.8.2"
   },
   "peerDependencies": {

packages/components/src/components/LightBox/LightBox.module.scss

@@ -1,6 +1,4 @@
 .lightBox {
-  background-color: var(--light-box--overlay-background-color);
-
   > div {
     position: fixed;
     height: var(--visual-viewport-height);

packages/components/src/components/Overlay/Overlay.module.scss

@@ -1,5 +1,4 @@
 .overlay {
-  background: var(--overlay--background-color);
   position: absolute;
   top: 0;
   left: 0;
@@ -14,6 +13,14 @@
   &[data-exiting] {
     animation: overlay-fade var(--transition--duration--default) reverse ease-in;
   }
+
+  &.typeModal {
+    background: var(--overlay--background-color);
+  }
+
+  &.typeLightBox {
+    background: var(--light-box--overlay-background-color);
+  }
 }
 
 .suspense {

packages/components/src/components/Overlay/Overlay.tsx

@@ -50,7 +50,11 @@ export const Overlay: FC<OverlayProps> = (props) => {
 
   const isOpen = isOpenFromProps ?? controller.useIsOpen();
 
-  const rootClassName = clsx(styles.overlay, className);
+  const rootClassName = clsx(
+    styles.overlay,
+    className,
+    overlayType === "Modal" ? styles.typeModal : styles.typeLightBox,
+  );
 
   return (
     <OverlayContentView
@@ -60,7 +64,7 @@ export const Overlay: FC<OverlayProps> = (props) => {
       isDismissable={isDismissable}
       className={rootClassName}
     >
-      <OverlayContextProvider type="Modal" controller={controller}>
+      <OverlayContextProvider type={overlayType} controller={controller}>
         {children}
       </OverlayContextProvider>
     </OverlayContentView>

packages/components/vite.build.config.ts

@@ -9,11 +9,11 @@ export default mergeConfig(
   defineConfig({
     experimental: {},
     build: {
-      minify: false,
+      minify: "oxc",
       sourcemap: true,
       outDir: "dist",
       target: "esnext",
-      cssMinify: "esbuild",
+      cssMinify: "lightningcss",
       lib: {
         entry: {
           default: "./src/index/default.ts",

packages/components/vite.config.ts

@@ -22,6 +22,7 @@ export default defineConfig({
     ],
   },
   optimizeDeps: {
+    include: ["@mittwald/flow-icons"],
     exclude: ["@lezer/lr"],
   },
   css: {

packages/core/package.json

@@ -10,22 +10,5 @@
   "dependencies": {
     "@types/invariant": "^2.2.37",
     "invariant": "^2.2.4"
-  },
-  "devDependencies": {
-    "@vitest/browser-playwright": "^4.0.18",
-    "vite-plugin-node-polyfills": "^0.25.0",
-    "vitest": "^4.0.18"
-  },
-  "peerDependencies": {
-    "@vitest/browser-playwright": "^4",
-    "vitest": "^4"
-  },
-  "peerDependenciesMeta": {
-    "@vitest/browser-playwright": {
-      "optional": true
-    },
-    "vitest": {
-      "optional": true
-    }
   }
 }

packages/ext-bridge/package.json

@@ -56,13 +56,12 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "rimraf": "^6.1.2",
-    "rollup-preserve-directives": "^1.1.3",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1",
+    "vite": "^8.0.8",
     "vite-plugin-checker": "^0.12.0",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-externalize-deps": "^0.10.0",
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.4"
   },
   "peerDependencies": {
     "i18next": "^26.0.0",

packages/ext-bridge/vite.build.config.ts

@@ -1,4 +1,3 @@
-import preserveDirectives from "rollup-preserve-directives";
 import { defineConfig, mergeConfig } from "vite";
 import dts from "vite-plugin-dts";
 import { externalizeDeps } from "vite-plugin-externalize-deps";
@@ -8,7 +7,6 @@ export default mergeConfig(
   baseConfig,
   defineConfig({
     plugins: [
-      preserveDirectives(),
       externalizeDeps(),
       dts({
         include: ["src"],

packages/mstudio-ext-react-components/package.json

@@ -34,9 +34,8 @@
     "react": "^19.2.0",
     "rimraf": "^6.1.2",
     "rollup-plugin-auto-named-exports": "1.0.0-beta.3",
-    "rollup-preserve-directives": "^1.1.3",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1",
+    "vite": "^8.0.8",
     "vite-plugin-banner": "^0.8.1",
     "vite-plugin-checker": "^0.12.0",
     "vite-plugin-dts": "^4.5.4",

packages/mstudio-ext-react-components/vite.build.config.ts

@@ -1,4 +1,3 @@
-import preserveDirectives from "rollup-preserve-directives";
 import { defineConfig, mergeConfig } from "vite";
 import banner from "vite-plugin-banner";
 import dts from "vite-plugin-dts";
@@ -29,7 +28,6 @@ export default mergeConfig(
       },
     },
     plugins: [
-      preserveDirectives(),
       banner((filename) =>
         filename.endsWith(".mjs") && !filename.endsWith("index.mjs")
           ? '"use client"\r\n/* */'

packages/react-tunnel/package.json

@@ -38,22 +38,22 @@
     "@types/node": "^24.10.9",
     "@types/react": "^19.2",
     "@types/react-dom": "^19.2",
-    "@vitejs/plugin-react": "^5.1.3",
-    "@vitest/browser-playwright": "^4.0.18",
-    "@vitest/coverage-v8": "^4.0.18",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/browser-playwright": "^4.1.4",
+    "@vitest/coverage-v8": "^4.1.4",
     "nx": "^22.4.4",
     "prettier": "^3.8.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "rimraf": "^6.1.2",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1",
+    "vite": "^8.0.8",
     "vite-plugin-banner": "^0.8.1",
     "vite-plugin-checker": "^0.12.0",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-externalize-deps": "^0.10.0",
-    "vitest": "^4.0.18",
-    "vitest-browser-react": "^2.0.2"
+    "vitest": "^4.1.4",
+    "vitest-browser-react": "^2.2.0"
   },
   "peerDependencies": {
     "react": "^19.2.0",

packages/react-tunnel/src/Tunnel.browser.test.tsx

@@ -102,7 +102,7 @@ test("Content from entry is updated in exit", async () => {
 
   expect(dom.getByTestId("exit")).toHaveTextContent("Hello!");
 
-  dom.rerender(
+  await dom.rerender(
     <TunnelProvider>
       <div data-testid="exit">
         <TunnelExit />
@@ -126,7 +126,7 @@ test("Content in exit is removed when not rendering entry", async () => {
 
   expect(dom.getByTestId("exit")).toHaveTextContent("Hello!");
 
-  dom.rerender(
+  await dom.rerender(
     <TunnelProvider>
       <div data-testid="exit">
         <TunnelExit />
@@ -147,7 +147,7 @@ test("Fallback content in exit is rendered again when not rendering entry", asyn
     </TunnelProvider>,
   );
 
-  dom.rerender(
+  await dom.rerender(
     <TunnelProvider>
       <div data-testid="exit">
         <TunnelExit>Fallback!</TunnelExit>
@@ -181,7 +181,7 @@ test("Render function in TunnelExit gets updated children from TunnelEntry", asy
     </TunnelProvider>,
   );
 
-  dom.rerender(
+  await dom.rerender(
     <TunnelProvider>
       <div data-testid="exit">
         <TunnelExit>{(children) => <>{children} Tunnel!</>}</TunnelExit>
@@ -209,7 +209,7 @@ test("Order of multiple children is preserved when entry is updated", async () =
 
   expect(dom.getByTestId("exit")).toHaveTextContent("Hello Tunnel!");
 
-  dom.rerender(
+  await dom.rerender(
     <TunnelProvider>
       <div data-testid="exit">
         <TunnelExit />

packages/remote-core/package.json

@@ -44,11 +44,11 @@
     "rimraf": "^6.1.2",
     "rollup-preserve-directives": "^1.1.3",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1",
+    "vite": "^8.0.8",
     "vite-plugin-checker": "^0.12.0",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-externalize-deps": "^0.10.0",
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.4"
   },
   "peerDependencies": {
     "@mittwald/ext-bridge": "workspace:*",