Vite migration

packages/react/.storybook/main.js

@@ -11,7 +11,7 @@ import remarkGfm from 'remark-gfm';
 import fs from 'fs';
 import glob from 'fast-glob';
 import path from 'path';
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import react from '@vitejs/plugin-react';
 
 // We can't use .mdx files in conjuction with `storyStoreV7`, which we are using to preload stories for CI purposes only.
 // MDX files are fine to ignore in CI mode since they don't make a difference for VRT testing
@@ -26,6 +26,9 @@ const storyGlobs = [
   '../src/**/*-story.js',
 ];
 
+const getAbsolutePath = (packageName) =>
+  path.dirname(require.resolve(path.join(packageName, 'package.json')));
+
 const stories = glob
   .sync(storyGlobs, {
     ignore: ['../src/**/docs/*.mdx', '../src/**/next/docs/*.mdx'],
@@ -65,6 +68,7 @@ const stories = glob
     }
     return true;
   });
+
 const config = {
   addons: [
     {
@@ -73,13 +77,12 @@ const config = {
         actions: true,
         backgrounds: false,
         controls: true,
-        docs: true,
+        docs: false,
         toolbars: true,
         viewport: true,
       },
     },
     '@storybook/addon-storysource',
-    '@storybook/addon-webpack5-compiler-babel',
     /**
      * For now, the storybook-addon-accessibility-checker fork replaces the @storybook/addon-a11y.
      * Eventually they plan to attempt to get this back into the root addon with the storybook team.
@@ -98,79 +101,63 @@ const config = {
       },
     },
   ],
+  core: {
+    builder: '@storybook/builder-vite',
+  },
   features: {
     previewCsfV3: true,
     buildStoriesJson: true,
   },
   framework: {
-    name: '@storybook/react-webpack5',
+    name: getAbsolutePath('@storybook/react-vite'),
     options: {},
   },
   stories,
   typescript: {
     reactDocgen: 'react-docgen', // Favor docgen from prop-types instead of TS interfaces
   },
+  async viteFinal(config) {
+    // Merge custom configuration into the default config
+    const { mergeConfig } = await import('vite');
 
-  webpack(config) {
-    config.module.rules.push({
-      test: /\.s?css$/,
-      sideEffects: true,
-      use: [
-        {
-          loader:
-            process.env.NODE_ENV === 'production'
-              ? MiniCssExtractPlugin.loader
-              : 'style-loader',
-        },
-        {
-          loader: 'css-loader',
-          options: {
-            importLoaders: 2,
-            sourceMap: true,
-          },
-        },
-        {
-          loader: 'postcss-loader',
-          options: {
-            postcssOptions: {
-              plugins: [
-                require('autoprefixer')({
-                  overrideBrowserslist: ['last 1 version'],
-                }),
-              ],
-            },
-            sourceMap: true,
-          },
-        },
-        {
-          loader: 'sass-loader',
-          options: {
-            implementation: require('sass'),
-            sassOptions: {
-              includePaths: [
-                path.resolve(__dirname, '..', 'node_modules'),
-                path.resolve(__dirname, '..', '..', '..', 'node_modules'),
-              ],
-            },
-            warnRuleAsWarning: true,
-            sourceMap: true,
+    return mergeConfig(config, {
+      // Add dependencies to pre-optimization
+      define: {
+        __DEV__: JSON.stringify(process.env.NODE_ENV === 'development'),
+      },
+      esbuild: {
+        include: /\.[jt]sx?$/,
+        exclude: [],
+        loader: 'tsx',
+      },
+      optimizeDeps: {
+        esbuildOptions: {
+          loader: {
+            '.js': 'jsx',
           },
         },
+      },
+      plugins: [
+        react({
+          // babel: {
+          // presets: ['babel-preset-carbon'],
+          // This instructs Vite to use Babel for the necessary transforms,
+          // babelrc: true,
+          // configFile: true,
+          // },
+        }),
       ],
+      resolve: {
+        preserveSymlinks: true,
+      },
     });
-    if (process.env.NODE_ENV === 'production') {
-      config.plugins.push(
-        new MiniCssExtractPlugin({
-          filename: '[name].[contenthash].css',
-        })
-      );
-    }
-    return config;
   },
+
   docs: {
     autodocs: true,
     defaultName: 'Overview',
   },
+  logLevel: 'debug',
 };
 
 export default config;

packages/react/.storybook/styles.scss

@@ -6,7 +6,7 @@
 //
 
 @use '../index.scss' as styles with (
-  $font-path: '~@ibm/plex'
+  $font-path: '@ibm/plex'
 );
 @use '../scss/grid/flexbox';
 

packages/react/README.md

@@ -43,6 +43,7 @@ Or if you're just using a bundler:
 Or anything else not listed above:
 
 - [Webpack with Sass](https://webpack.js.org/loaders/sass-loader/)
+- [Vite with Sass](https://vite.dev/guide/features.html#css-modules)
 - [Create React App with Sass](https://create-react-app.dev/docs/adding-a-sass-stylesheet/)
 - [Snowpack with Sass](https://www.snowpack.dev/guides/sass/)
 

packages/react/package.json

@@ -85,34 +85,28 @@
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-typescript": "^11.0.0",
     "@stackblitz/sdk": "^1.11.0",
-    "@storybook/addon-a11y": "^8.4.5",
-    "@storybook/addon-actions": "^8.4.5",
-    "@storybook/addon-docs": "^8.4.5",
-    "@storybook/addon-essentials": "^8.4.5",
-    "@storybook/addon-links": "^8.1.10",
-    "@storybook/addon-storysource": "^8.4.5",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.4.5",
-    "@storybook/manager-api": "^8.4.5",
-    "@storybook/react": "^8.4.5",
-    "@storybook/react-webpack5": "^8.4.5",
-    "@storybook/theming": "^8.4.5",
+    "@storybook/addon-a11y": "^8.4.7",
+    "@storybook/addon-actions": "^8.4.7",
+    "@storybook/addon-docs": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-storysource": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/builder-vite": "^8.4.7",
+    "@storybook/manager-api": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/theming": "^8.4.7",
     "@types/react-is": "~18.3.0",
-    "autoprefixer": "^10.4.0",
-    "babel-loader": "^9.0.0",
+    "@vitejs/plugin-react": "^4.3.2",
     "babel-plugin-dev-expression": "^0.2.3",
     "babel-preset-carbon": "^0.6.0",
     "browserify-zlib": "^0.2.0",
     "browserslist-config-carbon": "^11.2.0",
     "clipboardy": "^2.1.0",
-    "css-loader": "^7.0.0",
     "enquirer": "^2.3.6",
     "fast-glob": "^3.2.7",
     "fs-extra": "^11.0.0",
-    "html-webpack-plugin": "^5.5.0",
-    "mini-css-extract-plugin": "^2.4.5",
-    "postcss": "^8.4.5",
-    "postcss-loader": "^8.0.0",
     "prettier2": "npm:prettier@2",
     "process": "^0.11.10",
     "prop-types": "^15.7.2",
@@ -125,13 +119,11 @@
     "rollup-plugin-strip-banner": "^3.0.0",
     "sass": "^1.77.7",
     "sass-loader": "^16.0.0",
-    "storybook": "^8.4.5",
+    "storybook": "^8.4.7",
     "storybook-addon-accessibility-checker": "^3.1.61-rc.3",
     "stream-browserify": "^3.0.0",
-    "style-loader": "^4.0.0",
     "typescript-config-carbon": "^0.3.0",
-    "webpack": "^5.65.0",
-    "webpack-dev-server": "^5.0.0"
+    "vite": "^6.0.0"
   },
   "sideEffects": [
     "es/index.js",