ciampo · Sep 28, 2026 · Sep 28, 2026 · Sep 28, 2026 · Sep 28, 2026
diff --git a/package-lock.json b/package-lock.json
@@ -10,6 +10,7 @@
 
 ### Internal
 
+-   Update the Vite development dependency to 8.3.1. ([#83569](https://github.com/WordPress/gutenberg/pull/83569))
 -   Restore color-scale Storybook accessibility checks with labeled color samples, readable seed labels, and keyboard scrolling ([#83358](https://github.com/WordPress/gutenberg/pull/83358)).
 
 ### Documentation

@@ -112,7 +112,7 @@
 		"source-map": "^0.6.1",
 		"storybook": "^10.5.3",
 		"stylelint": "^17.14.1",
-		"vite": "^8.2.2",
+		"vite": "^8.3.1",
 		"vitest": "^5.0.0",
 		"vitest-browser-react": "^2.3.0"
 	},

diff --git a/storybook/main.ts b/storybook/main.ts
@@ -2,10 +2,10 @@ import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { type InlineConfig, type PluginOption, mergeConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import emotion from '@rolldown/plugin-emotion';
 import type { StorybookConfig } from '@storybook/react-vite';
 import dsTokenFallbacks from '@wordpress/theme/postcss-plugins/postcss-ds-token-fallbacks';
 import dsTokenFallbacksJs from '@wordpress/theme/vite-plugins/vite-ds-token-fallbacks';
-import babel from './vite-babel-plugin.js';
 import { statusIndexer } from './status-indexer.js';
 
 /**
@@ -132,22 +132,7 @@ const config: StorybookConfig = {
 			plugins: [
 				dsTokenFallbacksJs(),
 				react() as PluginOption,
-				// @rolldown/plugin-babel requires Node 22, but Gutenberg still
-				// supports Node 20. Keep the same call shape so this fallback can
-				// be replaced with the package after the Node upgrade.
-				await babel( {
-					generatorOpts: {
-						decoratorsBeforeExport: true,
-						importAttributesKeyword: 'with',
-					},
-					overrides: [
-						{
-							test: /x(?:$|\?)/,
-							retainLines: NODE_ENV !== 'production',
-						},
-					],
-					plugins: [ getAbsolutePath( '@emotion/babel-plugin' ) ],
-				} ),
+				emotion( { sourceMap: true } ),
 				// Stub the vips and wasm-vips packages for Storybook since they use WASM modules that Vite can't handle.
 				{
 					name: 'stub-vips',

diff --git a/storybook/package.json b/storybook/package.json
@@ -24,18 +24,16 @@
 		"./preview": "./preview.jsx"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.25.7",
 		"@babel/types": "^7.29.7",
-		"@emotion/babel-plugin": "^11.13.5",
 		"@emotion/is-prop-valid": "^1.4.0",
 		"@emotion/react": "^11.14.0",
 		"@emotion/styled": "^11.14.1",
+		"@rolldown/plugin-emotion": "^0.2.0",
 		"@storybook/addon-a11y": "^10.5.3",
 		"@storybook/addon-docs": "^10.5.3",
 		"@storybook/addon-vitest": "^10.5.3",
 		"@storybook/icons": "^2.0.1",
 		"@storybook/react-vite": "^10.5.3",
-		"@types/babel__core": "^7.20.5",
 		"@types/js-yaml": "^3.12.10",
 		"@types/react": "^18.3.27",
 		"@vitejs/plugin-react": "^6.0.5",
@@ -76,7 +74,7 @@
 		"storybook-addon-tag-badges": "^3.0.4",
 		"terser": "^5.37.0",
 		"typescript": "npm:@typescript/typescript6@^6.0.2",
-		"vite": "^8.2.2",
+		"vite": "^8.3.1",
 		"vitest": "^5.0.0"
 	},
 	"publishConfig": {
@@ -87,7 +85,7 @@
 		"postmanifest-snapshot": "prettier --write components-manifest.yml",
 		"storybook:build": "NODE_OPTIONS=--max-old-space-size=8192 storybook build -c . -o ./build && node ./scripts/sanitize-components-manifest.mjs ./build/manifests/components.json && node ./scripts/inject-legacy-docgen.mjs ./build/manifests/components.json",
 		"storybook:dev": "storybook dev -c . -p 50240",
-		"test:smoke": "npm run test:smoke:build && vitest run --config vitest.config.ts",
+		"test:smoke": "npm run test:smoke:build && vitest run --config vitest.config.mts",
 		"test:smoke:build": "node ./scripts/smoke-static-build.mjs",
 		"test:smoke:setup": "playwright install chromium --with-deps"
 	}

diff --git a/storybook/vite-babel-plugin.ts b/storybook/vite-babel-plugin.ts
diff --git a/storybook/vitest.config.ts → storybook/vitest.config.mts b/storybook/vitest.config.ts → storybook/vitest.config.mts
diff --git a/storybook/vitest.setup.ts b/storybook/vitest.setup.ts
@@ -4,7 +4,7 @@
  * enough of them pile up it drops the page's connection to Vitest, which fails
  * the run with "Browser connection was closed while running tests". A full
  * garbage collection before each file keeps the page healthy. `gc` is exposed
- * by the `--js-flags=--expose-gc` launch argument in `vitest.config.ts`.
+ * by the `--js-flags=--expose-gc` launch argument in `vitest.config.mts`.
  */
 if ( typeof globalThis.gc !== 'function' ) {
 	throw new Error(

diff --git a/test/unit/package.json b/test/unit/package.json
@@ -42,7 +42,7 @@
 		"resize-observer-polyfill": "^1.5.1",
 		"timezone-mock": "^1.3.6",
 		"typescript": "npm:@typescript/typescript6@^6.0.2",
-		"vite": "^8.2.2",
+		"vite": "^8.3.1",
 		"vitest": "^5.0.0",
 		"yargs": "^17.3.0"
 	},