chore(components): update @embroider/addon-dev v8

Author: aklkv

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",
@@ -103,13 +103,13 @@
     "eslint-plugin-ember": "^12.5.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-n": "^17.18.0",
+    "fs-extra": "^11.3.3",
     "globals": "^16.0.0",
     "postcss": "^8.5.3",
     "prettier": "^3.5.3",
     "prettier-plugin-ember-template-tag": "^2.0.5",
     "rollup": "^4.39.0",
     "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-scss": "^4.0.1",
     "sass": "^1.89.2",
     "stylelint": "^16.17.0",
     "stylelint-config-rational-order": "^0.1.2",

packages/components/rollup.config.mjs

@@ -6,24 +6,25 @@
 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 { buildStylesPlugin } from './scripts/rollup-plugin-build-styles.mjs';
+
 const addon = new Addon({
   srcDir: 'src',
   destDir: 'dist',
 });
 
+const STYLE_ENTRIES = [
+  '@hashicorp/design-system-components.scss',
+  '@hashicorp/design-system-power-select-overrides.scss',
+];
+
 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,17 +51,6 @@ 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',
-  }),
-
   // Ensure that standalone .hbs files are properly integrated as Javascript.
   addon.hbs(),
 
@@ -92,6 +82,18 @@ const plugins = [
       { src: 'LICENSE.md', dest: 'dist' },
     ],
   }),
+
+  // Compile SCSS entrypoints -> CSS alongside the copied SCSS in dist/styles/**
+  buildStylesPlugin({
+    srcRoot: 'src/styles',
+    distRoot: 'dist/styles',
+    entries: STYLE_ENTRIES,
+    includePathsByEntry: {
+      '@hashicorp/design-system-components.scss': [
+        'node_modules/@hashicorp/design-system-tokens/dist/products/css',
+      ],
+    },
+  }),
 ];
 
 if (!process.env.development) {
@@ -103,6 +105,6 @@ export default {
   // This provides defaults that work well alongside `publicEntrypoints` below.
   // You can augment this if you need to.
   output: addon.output(),
-  plugins: plugins,
+  plugins,
   external: ['ember-modifier', 'prismjs'],
 };

packages/components/scripts/rollup-plugin-build-styles.mjs

@@ -0,0 +1,105 @@
+import { join, dirname, resolve } from 'node:path';
+import fs from 'fs-extra';
+import * as sass from 'sass';
+
+/**
+ * Compile a single SCSS entry into CSS (+ .map) under distRoot, preserving the same relative path.
+ * Example:
+ *   srcRoot:  src/styles
+ *   distRoot: dist/styles
+ *   relScss:  @hashicorp/design-system-components.scss
+ * -> writes:
+ *   dist/styles/@hashicorp/design-system-components.css
+ *   dist/styles/@hashicorp/design-system-components.css.map
+ */
+function compileOne({ srcRoot, distRoot, relScss, includePaths = [] }) {
+  const inFile = join(srcRoot, relScss);
+
+  const outCss = join(distRoot, relScss).replace(/\.scss$/, '.css');
+  const outMap = `${outCss}.map`;
+
+  const result = sass.compile(inFile, {
+    style: 'expanded',
+    sourceMap: true,
+    sourceMapIncludeSources: true,
+    // allow @use/@import to resolve from your styles root, includePaths, and node_modules
+    loadPaths: [srcRoot, ...includePaths, 'node_modules'],
+  });
+
+  fs.ensureDirSync(dirname(outCss));
+  fs.writeFileSync(outCss, result.css);
+
+  if (result.sourceMap) {
+    fs.writeFileSync(outMap, JSON.stringify(result.sourceMap));
+  }
+}
+
+export function buildStylesPlugin(options = {}) {
+  const {
+    srcRoot = 'src/styles',
+    distRoot = 'dist/styles',
+    entries = [],
+    includePathsByEntry = {},
+  } = options;
+
+  // Force a build at least once, then only when styles change.
+  let needsBuild = true;
+
+  const absSrcRoot = resolve(srcRoot);
+
+  function isInStylesTree(id) {
+    // Rollup provides absolute paths for watched files most of the time.
+    // In case it doesn't, fall back to simple substring check too.
+    const abs = resolve(id);
+    return (
+      abs.startsWith(absSrcRoot) ||
+      id.includes('/src/styles/') ||
+      id.includes('\\src\\styles\\')
+    );
+  }
+
+  async function copyStylesTree() {
+    // Mirror srcRoot into distRoot
+    await fs.ensureDir(dirname(distRoot));
+    await fs.remove(distRoot);
+    await fs.copy(srcRoot, distRoot);
+  }
+
+  async function buildAll() {
+    // 1) Copy the whole styles tree late, so Embroider can't clean it away.
+    await copyStylesTree();
+
+    // 2) Compile entrypoints into CSS next to the copied SCSS.
+    for (const relScss of entries) {
+      compileOne({
+        srcRoot,
+        distRoot,
+        relScss,
+        includePaths: includePathsByEntry[relScss] ?? [],
+      });
+    }
+  }
+
+  return {
+    name: 'build-styles-sidecar',
+
+    buildStart() {
+      // Ensure watch mode re-runs when anything under styles changes.
+      // (Rollup will re-run the build when watched files change.)
+      this.addWatchFile(absSrcRoot);
+    },
+
+    watchChange(id) {
+      if (isInStylesTree(id)) {
+        needsBuild = true;
+      }
+    },
+
+    async writeBundle() {
+      if (!needsBuild) return;
+
+      await buildAll();
+      needsBuild = false;
+    },
+  };
+}