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

packages/components/package.json

@@ -112,7 +112,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 plugins 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,34 @@ 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-theming-with-css-selectors.scss',
+      outputFile: 'design-system-components-theming-with-css-selectors.css',
+    },
+    {
+      inputFile:
+        'design-system-components-theming-with-prefers-color-scheme.scss',
+      outputFile:
+        'design-system-components-theming-with-prefers-color-scheme.css',
+    },
+    {
+      inputFile:
+        'design-system-components-theming-with-combined-strategies.scss',
+      outputFile:
+        'design-system-components-theming-with-combined-strategies.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-theming-with-combined-strategies.scss

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+// these files come from `packages/tokens/dist/`
+@use "products/css/themed-tokens/with-combined-strategies/tokens.css";
+// TODO understand if these are common/shared or we should have different ones for the themed tokens
+@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 *;
+
+.sr-only {
+  @include screen-reader-only();
+}

packages/components/src/styles/@hashicorp/design-system-components-theming-with-css-selectors.scss

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+// these files come from `packages/tokens/dist/`
+@use "products/css/themed-tokens/with-css-selectors/tokens.css";
+// TODO understand if these are common/shared or we should have different ones for the themed tokens
+@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 *;
+
+.sr-only {
+  @include screen-reader-only();
+}

packages/components/src/styles/@hashicorp/design-system-components-theming-with-prefers-color-scheme.scss

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+// these files come from `packages/tokens/dist/`
+@use "products/css/themed-tokens/with-prefers-color-scheme/tokens.css";
+// TODO understand if these are common/shared or we should have different ones for the themed tokens
+@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 *;
+
+.sr-only {
+  @include screen-reader-only();
+}

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

@@ -3,63 +3,20 @@
  * 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";
+// TODO understand if these are common/shared or we should have different ones for the themed tokens
+@use "products/css/helpers/color";
+@use "products/css/helpers/elevation";
+@use "products/css/helpers/focus-ring";
+@use "products/css/helpers/typography";
 
-// 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
+// main components file
+@use "../components/index";
 
+// screen-reader utility class
 @use "../mixins/screen-reader-only" as *;
-// stylelint-disable-next-line selector-class-pattern
+
 .sr-only {
   @include screen-reader-only();
 }

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/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',
       ],