build(performance): rolldown-vite integration

cspell.json

@@ -127,6 +127,7 @@
     "interstitialscreenview",
     "interstitialscreenviewmodule",
     "jsnext",
+    "lightningcss",
     "listbox",
     "loglevel",
     "Menlo",

packages/ibm-products-styles/src/components/Datagrid/styles/addons/_FilterPanel.scss

@@ -19,6 +19,7 @@
   initial-value: 320px;
   syntax: '<length>';
 }
+
 $block-class-component: #{$block-class}-filter-panel;
 
 .#{$block-class-component} {
@@ -171,6 +172,7 @@ $block-class-component: #{$block-class}-filter-panel;
   margin-block-start: auto;
 
   opacity: 1;
+  /* stylelint-disable-next-line carbon/layout-use */
   transform: translateY(64px) translateZ(0);
 
   &.#{$block-class-component}__animationComplete {

packages/ibm-products-styles/src/components/Datagrid/styles/addons/_animations.scss

@@ -30,19 +30,19 @@
     inline-size: 0;
     opacity: 0;
     /* stylelint-disable-next-line carbon/layout-use */
-    transform: translateX(calc(var(--panel-transform) * -1));
+    transform: translateX(calc(var(--panel-transform, 320px) * -1));
   }
 
   100% {
-    inline-size: var(--panel-transform);
+    inline-size: var(--panel-transform, 320px);
     opacity: 1;
     transform: translateX(0);
   }
 }
 
 @keyframes filter-panel-exit-left {
   0% {
-    inline-size: var(--panel-transform);
+    inline-size: var(--panel-transform, 320px);
     opacity: 1;
     transform: translateX(0);
   }
@@ -51,6 +51,6 @@
     inline-size: 0;
     opacity: 0;
     /* stylelint-disable-next-line carbon/layout-use */
-    transform: translateX(calc(var(--panel-transform) * -1));
+    transform: translateX(calc(var(--panel-transform, 320px) * -1));
   }
 }

packages/ibm-products-styles/src/components/FilterSummary/_filter-summary.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2022, 2023
+// Copyright IBM Corp. 2022, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -12,12 +12,6 @@
 
 $block-class: #{$pkg-prefix}--filter-summary;
 
-@property --panel-transform {
-  inherits: true;
-  initial-value: 16px;
-  syntax: '<length>';
-}
-
 .#{$block-class} {
   display: flex;
   align-items: flex-start;

packages/ibm-products-styles/src/components/SidePanel/_animations.scss

@@ -29,7 +29,7 @@
   0% {
     opacity: 0;
     /* stylelint-disable-next-line carbon/layout-use */
-    transform: translateX(var(--panel-transform));
+    transform: translateX(var(--panel-transform, 320px));
   }
 
   100% {
@@ -42,7 +42,7 @@
   0% {
     opacity: 0;
     /* stylelint-disable-next-line carbon/layout-use */
-    transform: translateX(calc(var(--panel-transform) * -1));
+    transform: translateX(calc(var(--panel-transform, 320px) * -1));
   }
 
   100% {
@@ -60,7 +60,7 @@
   100% {
     opacity: 0;
     /* stylelint-disable-next-line carbon/layout-use */
-    transform: translateX(var(--panel-transform));
+    transform: translateX(var(--panel-transform, 320px));
   }
 }
 
@@ -73,6 +73,6 @@
   100% {
     opacity: 0;
     /* stylelint-disable-next-line carbon/layout-use */
-    transform: translateX(calc(var(--panel-transform) * -1));
+    transform: translateX(calc(var(--panel-transform, 320px) * -1));
   }
 }

packages/ibm-products-styles/src/components/TruncatedText/_truncated-text.scss

@@ -7,7 +7,7 @@
 
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/theme';
 
 $block-class: #{c4p-settings.$pkg-prefix}--truncated-text;
 
@@ -21,7 +21,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--truncated-text;
   }
 
   &__expand-toggle {
-    color: $link-primary;
+    color: theme.$link-primary;
     cursor: pointer;
   }
 }

packages/ibm-products-web-components/.storybook/main.ts

@@ -57,6 +57,14 @@ const config = {
         include: ['@storybook/web-components-vite'],
         exclude: ['lit', 'lit-html'],
       },
+      css: {
+        transformer: 'lightningcss', // Use Lightning CSS for transformations
+        lightningcss: {
+          // Allows for build to still pass even if lightning css finds invalid syntax
+          // Doesn't seem to parse ::slotted() pseudo selector usage well
+          errorRecovery: true,
+        },
+      },
     });
   },
   docs: {

packages/ibm-products-web-components/package.json

@@ -57,7 +57,7 @@
   "dependencies": {
     "@carbon-labs/wc-empty-state": "^0.5.0",
     "@carbon/ibm-products-styles": "^2.69.0",
-    "@carbon/styles": "1.85.0",
+    "@carbon/styles": "1.87.0",
     "@carbon/web-components": "2.33.0",
     "@ibm/telemetry-js": "^1.10.0",
     "@lit-labs/signals": "^0.1.2",

packages/ibm-products-web-components/src/components/truncated-text/truncated-text.scss

@@ -11,7 +11,7 @@
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/themes' as *;
 @use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/theme';
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/config';
 
@@ -75,7 +75,7 @@ $block-class: #{$prefix}--truncated-text;
   @extend %reset-button;
 
   padding: 0 $spacing-01;
-  color: $link-primary;
+  color: theme.$link-primary;
 
   &.#{$block-class}_button-hide {
     display: none;
@@ -84,25 +84,25 @@ $block-class: #{$prefix}--truncated-text;
 
 .#{$block-class}_button-expand {
   &.#{$block-class}_button-layered {
-    background-color: $layer;
+    background-color: theme.$layer;
   }
 
   // Gradient LTR
   &:dir(ltr)::before {
-    @include gradient-bg(90deg, $background);
+    @include gradient-bg(90deg, theme.$background);
   }
 
   &.#{$block-class}_button-layered:dir(ltr)::before {
-    @include gradient-bg(90deg, $layer);
+    @include gradient-bg(90deg, theme.$layer);
   }
 
   // Gradient RTL
   &:dir(rtl)::before {
-    @include gradient-bg(270deg, $background);
+    @include gradient-bg(270deg, theme.$background);
   }
 
   &.#{$block-class}_button-layered:dir(rtl)::before {
-    @include gradient-bg(270deg, $layer);
+    @include gradient-bg(270deg, theme.$layer);
   }
 }
 

packages/ibm-products/.storybook/Annotation/index.js → packages/ibm-products/.storybook/Annotation/index.jsx

@@ -9,7 +9,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { WarningHex, Layers, Chemistry } from '@carbon/react/icons';
-import { pkg } from '../../../ibm-products/src';
+import { pkg } from '../../src';
 
 const types = {
   'deprecation-notice': {

packages/ibm-products/.storybook/WithFeatureFlags/index.js → packages/ibm-products/.storybook/WithFeatureFlags/index.jsx

@@ -9,7 +9,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import LinkTo from '@storybook/addon-links/react';
 
-import { FeatureFlags } from '../../../ibm-products/src/components/FeatureFlags';
+import { FeatureFlags } from '../../src/components/FeatureFlags';
 import { Annotation } from '../Annotation';
 
 function WithFeatureFlags({ flags, children, ...rest }) {

packages/ibm-products/.storybook/get-auto-track-script.ts

@@ -0,0 +1,54 @@
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+//cspell: disable
+export const getAutoTrack = (source: string) => `
+  <script>
+    window._ibmAnalytics = {
+      settings: {
+        name: '${source}',
+        isSpa: false,
+        tealiumProfileName: 'in-app-usage-growth',
+      },
+      onLoad: [['ibmStats.pageview', []]],
+    };
+
+    window.digitalData = {
+      page: {
+        pageInfo: {
+          ibm: {
+            siteId: 'IBM_${source}',
+          },
+          segment: {
+            enabled: true,
+            env: 'test',
+            key: 'aWg1ug3bDNcSTnde9iwvg1OcvVRzf0JC',
+            coremetrics: false,
+            commonProperties: {
+              productCode: 'C4IP',
+              productTitle: 'Carbon for IBM Products',
+            },
+            pageProperties: {
+              productCode: 'C4IP',
+              productTitle: 'Carbon for IBM Products',
+            },
+          },
+        },
+        category: {
+          primaryCategory: 'PC110',
+        },
+      },
+    };
+  </script>
+  <script
+    src="//1.www.s81c.com/common/stats/ibm-common.js"
+    type="text/javascript"
+    async="async"></script>
+  <script
+    type="text/javascript"
+    async="async"
+    src="//1.www.s81c.com/common/carbon/autotrack.min.js"></script>`;

packages/ibm-products/.storybook/main.js

@@ -7,7 +7,8 @@
 import { createRequire } from 'node:module';
 import { dirname, join, resolve } from 'path';
 import remarkGfm from 'remark-gfm';
-import { getAutoTrack } from '../../../scripts/get-auto-track-script';
+import react from '@vitejs/plugin-react';
+// import { getAutoTrack } from './get-auto-track-script';
 
 const require = createRequire(import.meta.url);
 
@@ -16,7 +17,7 @@ const stories = [
   './ComponentPlayground/**/*.stories.*',
   './Welcome/**/*.stories.*',
   './PrebuiltPatterns/**/*.mdx',
-  '../../../examples/carbon-for-ibm-products/example-gallery/src/example-gallery.stories.js',
+  '../../../examples/carbon-for-ibm-products/example-gallery/src/example-gallery.stories.*',
 ];
 
 export default {
@@ -59,7 +60,8 @@ export default {
       ${head}
       ${
         process.env.NODE_ENV !== 'development'
-          ? getAutoTrack('ibm-products-react-storybook')
+          ? // ? getAutoTrack('ibm-products-react-storybook')
+            ''
           : ''
       }
     `;
@@ -70,18 +72,6 @@ export default {
     const { mergeConfig } = await import('vite');
 
     return mergeConfig(config, {
-      esbuild: {
-        include: /\.[jt]sx?$/,
-        exclude: [],
-        loader: 'tsx',
-      },
-      optimizeDeps: {
-        esbuildOptions: {
-          loader: {
-            '.js': 'jsx',
-          },
-        },
-      },
       resolve: {
         alias: {
           ALIAS_STORY_STYLE_CONFIG: resolve(
@@ -104,6 +94,9 @@ export default {
           },
         },
       },
+      experimental: {
+        enableNativePlugin: true,
+      },
     });
   },
 

packages/ibm-products/.storybook/preview.js → packages/ibm-products/.storybook/preview.jsx

@@ -7,12 +7,12 @@
 
 import React, { useEffect } from 'react';
 import { white, g10, g90, g100 } from '@carbon/themes';
-import '../../ibm-products/src/feature-flags';
+import '../src/feature-flags';
 
-import { pkg } from '../../ibm-products/src/settings';
-import theme from '../.storybook/theme';
+import { pkg } from '../src/settings';
+import theme from './theme';
 import index from './index.scss?inline';
-import { StoryDocsPage } from '../../ibm-products/src/global/js/utils/StoryDocsPage';
+import { StoryDocsPage } from '../src/global/js/utils/StoryDocsPage';
 
 // Enable all components, whether released or not, for storybook purposes
 pkg._silenceWarnings(true);

packages/ibm-products/package.json

@@ -68,18 +68,20 @@
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
+    "@carbon/styles": "^1.87.0",
     "@ibm/telemetry-js-config-generator": "^2.0.1",
     "@percy/cli": "^1.31.0",
     "@percy/storybook": "^9.0.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.3",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@storybook/addon-docs": "^9.0.8",
-    "@storybook/addon-links": "^9.0.8",
+    "@storybook/addon-docs": "^9.1.1",
+    "@storybook/addon-links": "^9.1.1",
     "@storybook/csf": "^0.1.13",
-    "@storybook/react-vite": "^9.0.13",
+    "@storybook/react-vite": "^9.1.1",
     "@types/react-table": "^7.7.20",
+    "@vitejs/plugin-react": "^5.0.0",
     "babel-plugin-dev-expression": "^0.2.3",
     "babel-preset-ibm-cloud-cognitive": "^0.31.0",
     "chalk": "^4.1.2",
@@ -100,9 +102,9 @@
     "rollup": "^4.35.0",
     "rollup-plugin-strip-banner": "^3.1.0",
     "sass": "^1.85.1",
-    "storybook": "^9.0.8",
+    "storybook": "^9.1.1",
     "typescript-config-carbon": "^0.6.0",
-    "vite": "^7.0.0",
+    "vite": "npm:rolldown-vite@latest",
     "yargs": "^18.0.0"
   },
   "dependencies": {
@@ -125,7 +127,7 @@
     "@carbon/grid": "^11.38.0",
     "@carbon/layout": "^11.36.0",
     "@carbon/motion": "^11.30.0",
-    "@carbon/react": "^1.86.0",
+    "@carbon/react": "^1.87.0",
     "@carbon/themes": "^11.55.0",
     "@carbon/type": "^11.42.0",
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0",