fix(build): add rollup plugin to switch out .scss?lit during build

packages/carbon-web-components/.storybook/main.ts

@@ -1,3 +1,12 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import type { StorybookConfig } from '@storybook/web-components-vite';
 import { mergeConfig } from 'vite';
 import { litStyleLoader, litTemplateLoader } from '@mordech/vite-lit-loader';

packages/carbon-web-components/package.json

@@ -100,6 +100,7 @@
     "@percy/cli": "^1.27.4",
     "@percy/cypress": "^3.1.2",
     "@percy/dom": "^1.27.5",
+    "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^21.0.3",
     "@rollup/plugin-node-resolve": "^8.4.0",

packages/carbon-web-components/src/components/checkbox/checkbox-group.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -14,7 +14,7 @@ import { prefix } from '../../globals/settings';
 import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
 import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
 import CDSCheckbox from './checkbox';
-import styles from './checkbox.scss';
+import styles from './checkbox.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**

packages/carbon-web-components/src/components/copy-button/copy-button.stories.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -53,7 +53,6 @@ const meta: Meta = {
 };
 
 export const Default = {
-  name: 'Default',
   parameters: {
     controls: { exclude: /(.*?)/ },
   },
@@ -63,4 +62,4 @@ export const Playground = {
   argTypes: controls,
 };
 
-export default meta;
+export default meta;

packages/carbon-web-components/src/components/data-table/table-cell-content.ts

@@ -1,14 +1,14 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 import { LitElement, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 import { prefix } from '../../globals/settings';
 import styles from './data-table.scss?lit';
 

packages/carbon-web-components/src/components/icon/icon.stories.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -22,58 +22,56 @@
 
 import storyDocs from './icon.mdx';
 
-
 export const Default = {
-  render: () => html` ${Add16()} ${Add20()} ${Add24()} ${Add32()} `
-}
-
+  render: () => html` ${Add16()} ${Add20()} ${Add24()} ${Add32()} `,
+};
 
 export const withCustomClass = {
   name: 'With custom class',
   render: () => html`
-  <style>
-    .test-class {
-      fill: #0062ff;
-    }
-  </style>
-  ${Add16({ class: 'test-class' })} ${Add20({ class: 'test-class' })}
-  ${Add24({ class: 'test-class' })} ${Add32({ class: 'test-class' })}
-`
-}
+    <style>
+      .test-class {
+        fill: #0062ff;
+      }
+    </style>
+    ${Add16({ class: 'test-class' })} ${Add20({ class: 'test-class' })}
+    ${Add24({ class: 'test-class' })} ${Add32({ class: 'test-class' })}
+  `,
+};
 
 export const withAriaLabel = {
   name: 'With aria label',
   render: () => html`
-  ${Add16({ 'aria-label': 'add' })} ${Add20({ 'aria-label': 'add' })}
-  ${Add24({ 'aria-label': 'add' })} ${Add32({ 'aria-label': 'add' })}
-`
-}
+    ${Add16({ 'aria-label': 'add' })} ${Add20({ 'aria-label': 'add' })}
+    ${Add24({ 'aria-label': 'add' })} ${Add32({ 'aria-label': 'add' })}
+  `,
+};
 
-export const withTitle =  {
+export const withTitle = {
   name: 'With title',
   render: () => html`
-  ${Add16({
-    'aria-describedby': 'id-title-1',
-    // @ts-ignore
-    children: svg`<title id="id-title-1">add</title>`,
-  })}
-  ${Add20({
-    'aria-describedby': 'id-title-2',
-    // @ts-ignore
-    children: svg`<title id="id-title-2">add</title>`,
-  })}
-  ${Add24({
-    'aria-describedby': 'id-title-3',
-    // @ts-ignore
-    children: svg`<title id="id-title-3">add</title>`,
-  })}
-  ${Add32({
-    'aria-describedby': 'id-title-4',
-    // @ts-ignore
-    children: svg`<title id="id-title-4">add</title>`,
-  })}
-`
-}
+    ${Add16({
+      'aria-describedby': 'id-title-1',
+      // @ts-ignore
+      children: svg`<title id="id-title-1">add</title>`,
+    })}
+    ${Add20({
+      'aria-describedby': 'id-title-2',
+      // @ts-ignore
+      children: svg`<title id="id-title-2">add</title>`,
+    })}
+    ${Add24({
+      'aria-describedby': 'id-title-3',
+      // @ts-ignore
+      children: svg`<title id="id-title-3">add</title>`,
+    })}
+    ${Add32({
+      'aria-describedby': 'id-title-4',
+      // @ts-ignore
+      children: svg`<title id="id-title-4">add</title>`,
+    })}
+  `,
+};
 
 const meta = {
   title: 'Components/Icon',
@@ -84,4 +82,4 @@
   },
 };
 
-export default meta;
+export default meta;

packages/carbon-web-components/src/components/link/link.stories.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -19,7 +19,7 @@ const defaultArgs = {
   inline: false,
   size: LINK_SIZE.MEDIUM,
   visited: false,
-}
+};
 
 const controls = {
   disabled: {
@@ -31,20 +31,20 @@ const controls = {
     description: `Provide the href attribute for the <a> node`,
   },
   size: {
-    control: 'radio', options: [LINK_SIZE.SMALL, LINK_SIZE.MEDIUM, LINK_SIZE.LARGE],
-    description: `Specify the size of the Link. Currently supports either sm, 'md' (default) or 'lg' as an option.`
+    control: 'radio',
+    options: [LINK_SIZE.SMALL, LINK_SIZE.MEDIUM, LINK_SIZE.LARGE],
+    description: `Specify the size of the Link. Currently supports either sm, 'md' (default) or 'lg' as an option.`,
   },
   visited: {
     control: 'boolean',
     description: `Specify whether you want the link to receive visited styles after the link has been clicked`,
   },
-}
+};
 
 export const Default = {
-  render: () => html` <cds-link href="#"> Link </cds-link> `
+  render: () => html` <cds-link href="#"> Link </cds-link> `,
 };
 
-
 export const Inline = {
   render: () => html`
     <cds-link inline href="#"
@@ -64,20 +64,15 @@ export const Inline = {
       Duis at tincidunt orci. Ut velit ipsum, lacinia at ex quis, aliquet
       rhoncus purus. Praesent et scelerisque ligula.
     </p>
-  `
+  `,
 };
 
 export const PairedWithIcon = {
   args: defaultArgs,
   parameters: {
     controls: { exclude: /(.*?)/ },
   },
-  render: ({ 
-    disabled,
-    href,
-    size,
-    onClick
-   }) => html`
+  render: ({ disabled, href, size, onClick }) => html`
     <cds-link
       ?disabled="${disabled}"
       href="${ifDefined(href)}"
@@ -91,14 +86,7 @@ export const PairedWithIcon = {
 export const Playground = {
   argTypes: controls,
   args: defaultArgs,
-  render: ({ 
-    disabled,
-    href,
-    inline,
-    size,
-    visited,
-    onClick
-   }) => html`
+  render: ({ disabled, href, inline, size, visited, onClick }) => html`
     <cds-link
       ?disabled="${disabled}"
       href="${ifDefined(href)}"
@@ -120,4 +108,4 @@ const meta = {
   },
 };
 
-export default meta;
+export default meta;

packages/carbon-web-components/src/components/modal/modal-footer-button.ts

@@ -1,15 +1,15 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2021, 2023
+ * Copyright IBM Corp. 2021, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 import { prefix } from '../../globals/settings';
 import CDSButton from '../button/button';
-import buttonStyles from '../button/button.scss';
+import buttonStyles from '../button/button.scss?lit';
 import styles from './modal.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 

packages/carbon-web-components/src/components/ui-shell/ui-shell-story.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -15,7 +15,7 @@ import Fade16 from '@carbon/web-components/es/icons/fade/16';
 import Search20 from '@carbon/web-components/es/icons/search/20';
 import Notification20 from '@carbon/web-components/es/icons/notification/20';
 import SwitcherIcon20 from '@carbon/web-components/es/icons/switcher/20';
-import contentStyles from '@carbon/styles/scss/components/ui-shell/content/_content.scss';
+import contentStyles from '@carbon/styles/scss/components/ui-shell/content/_content.scss?lit';
 import { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from './side-nav';
 import { classMap } from 'lit/directives/class-map.js';
 import './index';

packages/carbon-web-components/tests/spec/copy-button_spec.ts

@@ -1,14 +1,14 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 import { render } from 'lit';
-import { Default } from '../../src/components/copy-button/copy-button-story';
+import { Default } from '../../src/components/copy-button/copy-button.stories';
 
 const template = (props?) =>
   Default({

packages/carbon-web-components/tests/spec/link_spec.ts

@@ -1,18 +1,18 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 import { render } from 'lit';
 import '../../src/components/link/link';
-import { pairedWithIcon } from '../../src/components/link/link.stories';
+import { PairedWithIcon } from '../../src/components/link/link.stories';
 
 const template = (props?) =>
-  pairedWithIcon({
+  (PairedWithIcon = {
     'cds-link': props,
   });
 

packages/carbon-web-components/tests/spec/overflow-menu_spec.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -10,7 +10,7 @@
 import { render } from 'lit';
 
 import CDSOverflowMenu from '../../src/components/overflow-menu/overflow-menu';
-import { Playground } from '../../src/components/overflow-menu/overflow-menu-story';
+import { Playground } from '../../src/components/overflow-menu/overflow-menu.stories';
 
 const template = (props?) =>
   Playground({

packages/carbon-web-components/tools/babel-plugin-resource-js-paths.js

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -18,7 +18,7 @@ module.exports = function resourceJSPaths(babel) {
       ImportDeclaration(path, state) {
         const { node } = path;
         const { value: source } = node.source;
-        if (/^\..*\.scss$/i.test(source)) {
+        if (/^\..*\.scss\?lit$/i.test(source)) {
           const declaration = t.cloneNode(node);
           declaration.source.value = `./${replaceExtension(source, '.css.js')}`;
           path.replaceWith(declaration);