[03] [Project Solar / Phase 1 / Themed CSS for HDS components] Rollup configuration and Sass processing for multiple files

packages/components/package.json

@@ -30,7 +30,10 @@
     "lint:js:fix": "eslint . --fix",
     "lint:types": "glint",
     "start": "rollup --config --watch --environment development",
-    "prepublishOnly": "pnpm build && test -f 'dist/styles/@hashicorp/design-system-components.css' || (echo \"\n\\033[31m⚠️  Error: the pre-compiled CSS file \\`dist/styles/@hashicorp/design-system-components.css\\` was not found\\033[0m\\n\" && exit 1)"
+    "test-f:design-system-components": "test -f 'dist/styles/@hashicorp/design-system-components.css' || (echo \"\n\\033[31m⚠️  Error: the pre-compiled CSS file \\`dist/styles/@hashicorp/design-system-components.css\\` was not found\\033[0m\\n\" && exit 1)",
+    "test-f:design-system-components-common": "test -f 'dist/styles/@hashicorp/design-system-components-common.css' || (echo \"\n\\033[31m⚠️  Error: the pre-compiled CSS file \\`dist/styles/@hashicorp/design-system-components-common.css\\` was not found\\033[0m\\n\" && exit 1)",
+    "test-f:design-system-power-select-overrides": "test -f 'dist/styles/@hashicorp/design-system-power-select-overrides.css' || (echo \"\n\\033[31m⚠️  Error: the pre-compiled CSS file \\`dist/styles/@hashicorp/design-system-power-select-overrides.css\\` was not found\\033[0m\\n\" && exit 1)",
+    "prepublishOnly": "pnpm build && pnpm test-f:design-system-components && pnpm test-f:design-system-components-common && pnpm test-f:design-system-power-select-overrides"
   },
   "dependencies": {
     "@codemirror/commands": "^6.8.0",
@@ -112,7 +115,6 @@
     "prettier-plugin-ember-template-tag": "^2.0.5",
     "rollup": "^4.39.0",
     "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-scss": "^4.0.1",
     "stylelint": "^16.17.0",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard-scss": "^14.0.0",

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 }) => ({
+    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: ['node_modules/@hashicorp/design-system-tokens/dist'],
+        });
+
+        // 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,22 @@ 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([
+    {
+      inputFile: 'design-system-components.scss',
+      outputFile: 'design-system-components.css',
+    },
+    {
+      inputFile: 'design-system-components-common.scss',
+      outputFile: 'design-system-components-common.css',
+    },
+    {
+      inputFile: 'design-system-power-select-overrides.scss',
+      outputFile: 'design-system-power-select-overrides.css',
+    },
+  ]),
 
   // Ensure that standalone .hbs files are properly integrated as Javascript.
   addon.hbs(),

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

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+// these files come from `packages/tokens/dist/`
+@use "products/css/helpers/color";
+@use "products/css/helpers/elevation";
+@use "products/css/helpers/focus-ring";
+@use "products/css/helpers/typography";
+
+// main components file
+@use "../components/index";
+
+// screen-reader utility class
+@use "../mixins/screen-reader-only" as *;
+
+// The `.sr-only` utility class visually hides content but keeps it accessible to screen readers for accessibility purposes.
+.sr-only {
+  @include screen-reader-only();
+}

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

@@ -3,63 +3,8 @@
  * 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 are the "standard" HDS tokens (the file comes from `packages/tokens/dist/`)
+@use "products/css/tokens";
 
-// Notice: this list can be automatically edited by the Ember blueprint, please don't remove the start/end comments
-// START COMPONENTS CSS FILES IMPORTS
-@use "../components/accordion";
-@use "../components/advanced-table";
-@use "../components/alert";
-@use "../components/app-footer";
-@use "../components/app-frame";
-@use "../components/app-header";
-@use "../components/app-side-nav";
-@use "../components/application-state";
-@use "../components/badge";
-@use "../components/badge-count";
-@use "../components/breadcrumb";
-@use "../components/button";
-@use "../components/button-set";
-@use "../components/card";
-@use "../components/code-block";
-@use "../components/code-editor";
-@use "../components/copy";
-@use "../components/dialog-primitive";
-@use "../components/disclosure-primitive";
-@use "../components/dismiss-button";
-@use "../components/dropdown";
-@use "../components/flyout";
-@use "../components/form"; // multiple components
-@use "../components/icon";
-@use "../components/icon-tile";
-@use "../components/layout"; // multiple components
-@use "../components/link"; // multiple components
-@use "../components/menu-primitive";
-@use "../components/modal";
-@use "../components/page-header";
-@use "../components/pagination";
-@use "../components/reveal";
-@use "../components/rich-tooltip";
-@use "../components/segmented-group";
-@use "../components/separator";
-@use "../components/side-nav";
-@use "../components/stepper";
-@use "../components/table";
-@use "../components/tabs";
-@use "../components/tag";
-@use "../components/text";
-@use "../components/time";
-@use "../components/toast";
-@use "../components/tooltip";
-// END COMPONENT CSS FILES IMPORTS
-
-@use "../mixins/screen-reader-only" as *;
-// stylelint-disable-next-line selector-class-pattern
-.sr-only {
-  @include screen-reader-only();
-}
+// these are the styles specific (and only) for the HDS components
+@use "./design-system-components-common";

packages/components/src/styles/components/index.scss

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+// Notice: this list can be automatically edited by the Ember blueprint, please don't remove the start/end comments
+// START COMPONENTS CSS FILES IMPORTS
+@use "./accordion";
+@use "./advanced-table";
+@use "./alert";
+@use "./app-footer";
+@use "./app-frame";
+@use "./app-header";
+@use "./app-side-nav";
+@use "./application-state";
+@use "./badge";
+@use "./badge-count";
+@use "./breadcrumb";
+@use "./button";
+@use "./button-set";
+@use "./card";
+@use "./code-block";
+@use "./code-editor";
+@use "./copy";
+@use "./dialog-primitive";
+@use "./disclosure-primitive";
+@use "./dismiss-button";
+@use "./dropdown";
+@use "./flyout";
+@use "./form"; // multiple components
+@use "./icon";
+@use "./icon-tile";
+@use "./layout"; // multiple components
+@use "./link"; // multiple components
+@use "./menu-primitive";
+@use "./modal";
+@use "./page-header";
+@use "./pagination";
+@use "./reveal";
+@use "./rich-tooltip";
+@use "./segmented-group";
+@use "./separator";
+@use "./side-nav";
+@use "./stepper";
+@use "./table";
+@use "./tabs";
+@use "./tag";
+@use "./text";
+@use "./time";
+@use "./toast";
+@use "./tooltip";
+// END COMPONENT CSS FILES IMPORTS

showcase/blueprints/hds-component/index.js

@@ -38,7 +38,7 @@ module.exports = {
 
 const updateHDSComponentsCSS = (options) => {
   const name = options.entity.name;
-  const cssFilePath = `${options.project.root}/../packages/components/src/styles/@hashicorp/design-system-components.scss`;
+  const cssFilePath = `${options.project.root}/../packages/components/src/styles/components/index.scss`;
   const source = fs.readFileSync(cssFilePath, 'utf-8');
   const oldLinesArray = source.split(/\r?\n/);
   const firstComponentImportIndex =

showcase/ember-cli-build.js

@@ -17,7 +17,7 @@ module.exports = function (defaults) {
     sassOptions: {
       precision: 4,
       includePaths: [
-        'node_modules/@hashicorp/design-system-tokens/dist/products/css',
+        'node_modules/@hashicorp/design-system-tokens/dist',
         'node_modules/@hashicorp/design-system-components/dist/styles',
         'node_modules/ember-power-select/vendor',
       ],

website/ember-cli-build.js

@@ -15,7 +15,7 @@ module.exports = function (defaults) {
     sassOptions: {
       precision: 4,
       includePaths: [
-        'node_modules/@hashicorp/design-system-tokens/dist/products/css',
+        'node_modules/@hashicorp/design-system-tokens/dist',
         'node_modules/@hashicorp/design-system-components/dist/styles',
         'node_modules/ember-power-select/vendor',
       ],