Upgrade @embroider/addon-dev to unblock gts

packages/components/package.json

@@ -80,7 +80,7 @@
     "@babel/runtime": "^7.27.1",
     "@ember/string": "^4.0.1",
     "@ember/test-helpers": "^4.0.4",
-    "@embroider/addon-dev": "^7.1.5",
+    "@embroider/addon-dev": "^8.2.0",
     "@eslint/js": "^9.23.0",
     "@glimmer/component": "^2.0.0",
     "@glint/core": "^1.5.2",

packages/components/rollup.config.mjs

@@ -6,24 +6,57 @@
 import { Addon } from '@embroider/addon-dev/rollup';
 import { babel } from '@rollup/plugin-babel';
 import copy from 'rollup-plugin-copy';
-import scss from 'rollup-plugin-scss';
 import process from 'process';
 import path from 'node:path';
+import * as sass from 'sass';
 
 const addon = new Addon({
   srcDir: 'src',
   destDir: 'dist',
 });
 
+// Custom SCSS compilation plugin for Rollup
+function addScssCompilationPlugins(options) {
+  return options.map(({ inputFile, outputFile, loadPaths }) => ({
+    name: `rollup custom plugin to generate ${outputFile}`,
+    generateBundle() {
+      try {
+        const inputFileFullPath = `src/styles/@hashicorp/${inputFile}`;
+        const outputFileFullPath = `styles/@hashicorp/${outputFile}`;
+
+        const result = sass.compile(inputFileFullPath, {
+          sourceMap: true,
+          loadPaths,
+        });
+
+        // Emit the compiled CSS
+        this.emitFile({
+          type: 'asset',
+          fileName: outputFileFullPath,
+          source: result.css,
+        });
+
+        // Emit the source map
+        if (result.sourceMap) {
+          this.emitFile({
+            type: 'asset',
+            fileName: `${outputFileFullPath}.map`,
+            source: JSON.stringify(result.sourceMap),
+          });
+        }
+      } catch (error) {
+        this.error(
+          `Failed to compile SCSS file "${inputFile}": ${error.message}`
+        );
+      }
+    },
+  }));
+}
+
 const plugins = [
   // These are the modules that users should be able to import from your
   // addon. Anything not listed here may get optimized away.
-  addon.publicEntrypoints([
-    '**/*.{js,ts}',
-    'index.js',
-    'template-registry.js',
-    'styles/@hashicorp/design-system-components.scss',
-  ]),
+  addon.publicEntrypoints(['**/*.{js,ts}', 'index.js', 'template-registry.js']),
 
   // These are the modules that should get reexported into the traditional
   // "app" tree. Things in here should also be in publicEntrypoints above, but
@@ -50,16 +83,23 @@ const plugins = [
   // package names.
   addon.dependencies(),
 
-  scss({
-    fileName: 'styles/@hashicorp/design-system-components.css',
-    includePaths: [
-      'node_modules/@hashicorp/design-system-tokens/dist/products/css',
-    ],
-  }),
-
-  scss({
-    fileName: 'styles/@hashicorp/design-system-power-select-overrides.css',
-  }),
+  // We use a custom plugin for the Sass/SCSS compilation
+  // so we can have multiple input and multiple outputs
+  ...addScssCompilationPlugins(
+    // files that will be compiled
+    [
+      {
+        inputFile: 'design-system-components.scss',
+        outputFile: 'design-system-components.css',
+        loadPaths: ['node_modules/@hashicorp/design-system-tokens/dist'],
+      },
+      {
+        inputFile: 'design-system-power-select-overrides.scss',
+        outputFile: 'design-system-power-select-overrides.css',
+        loadPaths: ['node_modules/@hashicorp/design-system-tokens/dist'],
+      },
+    ]
+  ),
 
   // Ensure that standalone .hbs files are properly integrated as Javascript.
   addon.hbs(),
@@ -85,12 +125,20 @@ const plugins = [
   // to leave alone and keep in the published output.
   addon.keepAssets(['**/*.css', '**/*.scss']),
 
-  // Copy readme and license files into published package
   copy({
     targets: [
+      // Copy readme and license files into published package
       { src: 'README.md', dest: 'dist' },
       { src: 'LICENSE.md', dest: 'dist' },
+      // Copy sass mixins for consumers to use directly
+      { src: 'src/styles/mixins', dest: 'dist/styles' },
+      // Copy sass components for consumers to use directly
+      { src: 'src/styles/components', dest: 'dist/styles' },
     ],
+    hook: 'writeBundle',
+    copySync: true,
+    copyOnce: true,
+    // verbose: true,
   }),
 ];
 

packages/components/src/styles/@hashicorp/design-system-components.scss

@@ -3,12 +3,12 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-// these files come from the 'design-system-tokens' package
-@use "tokens";
-@use "helpers/color";
-@use "helpers/elevation";
-@use "helpers/focus-ring";
-@use "helpers/typography";
+// these files come from `packages/tokens/dist/`
+@use "products/css/tokens";
+@use "products/css/helpers/color";
+@use "products/css/helpers/elevation";
+@use "products/css/helpers/focus-ring";
+@use "products/css/helpers/typography";
 
 // Vendor styles
 @use "./design-system-ember-a11y-refocus";