Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 12 commits into
base: project-solar/phase-1/HDS-5216_modes/modes-pipeline-implementation
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
14efb4e
Draft a custom plugin to compile the themed SCSS
alex-ju Sep 24, 2025
6abb702
updated SCSS files organization for components (split common part) + …
didoo Sep 26, 2025
dd2f663
added support for source maps for generated themed CSS files
didoo Sep 29, 2025
b228c8b
TEMP - Added generation of “alt” CSS for HDS components to compare wi…
didoo Sep 30, 2025
9ca58b2
abstracted logic for custom Rollup plugin to compile multiple Sass fi…
didoo Sep 30, 2025
49b9155
updated `includePaths` for design tokens in Showcase and Website `emb…
didoo Sep 30, 2025
29415b1
moved compilation of existing Scss files for components and overrides…
didoo Sep 30, 2025
fe0dfab
removed `rollup-plugin-scss` dev dependency (we use our own custom pl…
didoo Sep 30, 2025
6feda57
added CSS compilation for `combined-strategies` tokens
didoo Oct 2, 2025
3180ef8
updated the `prePublish` script in `package.json` of `components` to …
didoo Oct 15, 2025
1abfe15
simplified architecture of CSS compilation for HDS components (as agr…
didoo Oct 24, 2025
f4877f6
fixed `prepublisOnly` script that was causing error in build (looking…
didoo Oct 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions packages/components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
73 changes: 56 additions & 17 deletions packages/components/rollup.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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(),
Expand Down
20 changes: 20 additions & 0 deletions packages/components/src/styles/@hashicorp/design-system-components-common.scss
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[note for future] Not something that needs to be decided now. In the future, once the existing design-system-components.css file is deprecated, we could rename this file to design-system-components for simplicities sake.

Would require consumers to make an update, but would allow us to say this -common prefix is just for this in-between period where both files exist. The -common really isn't needed if we get back to the case where only one file is being generated.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[Note] The structure looks all good to me. I like the simplicity of not having the theming files be included in the components package.

Did a test build and it generated as expected, and is much simpler than with the theming files. We do have some extra comments getting added in there when files get combined, but that is happening in our current build as well.

We should update the showcase to follow our new recommendation of using the design-system-components-common.css file + a theme file (which I think has already been done in the 04 PR 🙌 )

Example of the extra comments:

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-accordion {
  display: flex;
  flex-direction: column;
}

Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
/**
* 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 *;

.sr-only {
@include screen-reader-only();
}
63 changes: 4 additions & 59 deletions packages/components/src/styles/@hashicorp/design-system-components.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 the HDS components
@use "./design-system-components-common";
52 changes: 52 additions & 0 deletions packages/components/src/styles/components/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[todo] In the ember blueprint index.js file we will need to update the path for the code that generates this file.

const cssFilePath = `${options.project.root}/../packages/components/src/styles/@hashicorp/design-system-components.scss`;

// 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
10 changes: 0 additions & 10 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion showcase/ember-cli-build.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
],
Expand Down
2 changes: 1 addition & 1 deletion website/ember-cli-build.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
],
Expand Down
Loading