Skip to content

Commit 4d46a8b

Browse files
didoodidoo
authored
Merge pull request #3238 from hashicorp/project-solar/phase-1/HDS-5216_modes/modes-feature-branch
[01] [Project Solar / Phase 1 / Tokens Pipeline] Main feature branch for `$modes` support in tokens pipeline and component's CSS compilation
2 parents 20d4838 + 1864883 commit 4d46a8b

File tree

45 files changed

+88558
-293
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+88558
-293
lines changed

‎.changeset/tough-cows-rule.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
"@hashicorp/design-system-tokens": major
3+
---
4+
5+
MODES - TODOs
6+
7+
- Decide if this is a `major` or a `minor`
8+
- Add a proper changeset entry here

‎packages/components/package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,10 @@
3030
"lint:js:fix": "eslint . --fix",
3131
"lint:types": "glint",
3232
"start": "rollup --config --watch --environment development",
33-
"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)"
33+
"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)",
34+
"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)",
35+
"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)",
36+
"prepublishOnly": "pnpm build && pnpm test-f:design-system-components && pnpm test-f:design-system-components-common && pnpm test-f:design-system-power-select-overrides"
3437
},
3538
"dependencies": {
3639
"@codemirror/commands": "^6.8.0",
@@ -112,7 +115,6 @@
112115
"prettier-plugin-ember-template-tag": "^2.0.5",
113116
"rollup": "^4.39.0",
114117
"rollup-plugin-copy": "^3.5.0",
115-
"rollup-plugin-scss": "^4.0.1",
116118
"stylelint": "^16.17.0",
117119
"stylelint-config-rational-order": "^0.1.2",
118120
"stylelint-config-standard-scss": "^14.0.0",

‎packages/components/rollup.config.mjs‎

Lines changed: 56 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,57 @@
66
import { Addon } from '@embroider/addon-dev/rollup';
77
import { babel } from '@rollup/plugin-babel';
88
import copy from 'rollup-plugin-copy';
9-
import scss from 'rollup-plugin-scss';
109
import process from 'process';
1110
import path from 'node:path';
11+
import * as sass from 'sass';
1212

1313
const addon = new Addon({
1414
srcDir: 'src',
1515
destDir: 'dist',
1616
});
1717

18+
// Custom SCSS compilation plugin for Rollup
19+
function addScssCompilationPlugins(options) {
20+
return options.map(({ inputFile, outputFile }) => ({
21+
name: `rollup custom plugin to generate ${outputFile}`,
22+
generateBundle() {
23+
try {
24+
const inputFileFullPath = `src/styles/@hashicorp/${inputFile}`;
25+
const outputFileFullPath = `styles/@hashicorp/${outputFile}`;
26+
27+
const result = sass.compile(inputFileFullPath, {
28+
sourceMap: true,
29+
loadPaths: ['node_modules/@hashicorp/design-system-tokens/dist'],
30+
});
31+
32+
// Emit the compiled CSS
33+
this.emitFile({
34+
type: 'asset',
35+
fileName: outputFileFullPath,
36+
source: result.css,
37+
});
38+
39+
// Emit the source map
40+
if (result.sourceMap) {
41+
this.emitFile({
42+
type: 'asset',
43+
fileName: `${outputFileFullPath}.map`,
44+
source: JSON.stringify(result.sourceMap),
45+
});
46+
}
47+
} catch (error) {
48+
this.error(
49+
`Failed to compile SCSS file "${inputFile}": ${error.message}`
50+
);
51+
}
52+
},
53+
}));
54+
}
55+
1856
const plugins = [
1957
// These are the modules that users should be able to import from your
2058
// addon. Anything not listed here may get optimized away.
21-
addon.publicEntrypoints([
22-
'**/*.{js,ts}',
23-
'index.js',
24-
'template-registry.js',
25-
'styles/@hashicorp/design-system-components.scss',
26-
]),
59+
addon.publicEntrypoints(['**/*.{js,ts}', 'index.js', 'template-registry.js']),
2760

2861
// These are the modules that should get reexported into the traditional
2962
// "app" tree. Things in here should also be in publicEntrypoints above, but
@@ -50,16 +83,22 @@ const plugins = [
5083
// package names.
5184
addon.dependencies(),
5285

53-
scss({
54-
fileName: 'styles/@hashicorp/design-system-components.css',
55-
includePaths: [
56-
'node_modules/@hashicorp/design-system-tokens/dist/products/css',
57-
],
58-
}),
59-
60-
scss({
61-
fileName: 'styles/@hashicorp/design-system-power-select-overrides.css',
62-
}),
86+
// We use a custom plugin for the Sass/SCSS compilation
87+
// so we can have multiple input and multiple outputs
88+
...addScssCompilationPlugins([
89+
{
90+
inputFile: 'design-system-components.scss',
91+
outputFile: 'design-system-components.css',
92+
},
93+
{
94+
inputFile: 'design-system-components-common.scss',
95+
outputFile: 'design-system-components-common.css',
96+
},
97+
{
98+
inputFile: 'design-system-power-select-overrides.scss',
99+
outputFile: 'design-system-power-select-overrides.css',
100+
},
101+
]),
63102

64103
// Ensure that standalone .hbs files are properly integrated as Javascript.
65104
addon.hbs(),

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
6+
// these files come from `packages/tokens/dist/`
7+
@use "products/css/helpers/color";
8+
@use "products/css/helpers/elevation";
9+
@use "products/css/helpers/focus-ring";
10+
@use "products/css/helpers/typography";
11+
12+
// main components file
13+
@use "../components/index";
14+
15+
// screen-reader utility class
16+
@use "../mixins/screen-reader-only" as *;
17+
18+
// The `.sr-only` utility class visually hides content but keeps it accessible to screen readers for accessibility purposes.
19+
.sr-only {
20+
@include screen-reader-only();
21+
}

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

Lines changed: 4 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -3,63 +3,8 @@
33
* SPDX-License-Identifier: MPL-2.0
44
*/
55

6-
// these files come from the 'design-system-tokens' package
7-
@use "tokens";
8-
@use "helpers/color";
9-
@use "helpers/elevation";
10-
@use "helpers/focus-ring";
11-
@use "helpers/typography";
6+
// these are the "standard" HDS tokens (the file comes from `packages/tokens/dist/`)
7+
@use "products/css/tokens";
128

13-
// Notice: this list can be automatically edited by the Ember blueprint, please don't remove the start/end comments
14-
// START COMPONENTS CSS FILES IMPORTS
15-
@use "../components/accordion";
16-
@use "../components/advanced-table";
17-
@use "../components/alert";
18-
@use "../components/app-footer";
19-
@use "../components/app-frame";
20-
@use "../components/app-header";
21-
@use "../components/app-side-nav";
22-
@use "../components/application-state";
23-
@use "../components/badge";
24-
@use "../components/badge-count";
25-
@use "../components/breadcrumb";
26-
@use "../components/button";
27-
@use "../components/button-set";
28-
@use "../components/card";
29-
@use "../components/code-block";
30-
@use "../components/code-editor";
31-
@use "../components/copy";
32-
@use "../components/dialog-primitive";
33-
@use "../components/disclosure-primitive";
34-
@use "../components/dismiss-button";
35-
@use "../components/dropdown";
36-
@use "../components/flyout";
37-
@use "../components/form"; // multiple components
38-
@use "../components/icon";
39-
@use "../components/icon-tile";
40-
@use "../components/layout"; // multiple components
41-
@use "../components/link"; // multiple components
42-
@use "../components/menu-primitive";
43-
@use "../components/modal";
44-
@use "../components/page-header";
45-
@use "../components/pagination";
46-
@use "../components/reveal";
47-
@use "../components/rich-tooltip";
48-
@use "../components/segmented-group";
49-
@use "../components/separator";
50-
@use "../components/side-nav";
51-
@use "../components/stepper";
52-
@use "../components/table";
53-
@use "../components/tabs";
54-
@use "../components/tag";
55-
@use "../components/text";
56-
@use "../components/time";
57-
@use "../components/toast";
58-
@use "../components/tooltip";
59-
// END COMPONENT CSS FILES IMPORTS
60-
61-
@use "../mixins/screen-reader-only" as *;
62-
// stylelint-disable-next-line selector-class-pattern
63-
.sr-only {
64-
@include screen-reader-only();
65-
}
9+
// these are the styles specific (and only) for the HDS components
10+
@use "./design-system-components-common";

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
6+
// Notice: this list can be automatically edited by the Ember blueprint, please don't remove the start/end comments
7+
// START COMPONENTS CSS FILES IMPORTS
8+
@use "./accordion";
9+
@use "./advanced-table";
10+
@use "./alert";
11+
@use "./app-footer";
12+
@use "./app-frame";
13+
@use "./app-header";
14+
@use "./app-side-nav";
15+
@use "./application-state";
16+
@use "./badge";
17+
@use "./badge-count";
18+
@use "./breadcrumb";
19+
@use "./button";
20+
@use "./button-set";
21+
@use "./card";
22+
@use "./code-block";
23+
@use "./code-editor";
24+
@use "./copy";
25+
@use "./dialog-primitive";
26+
@use "./disclosure-primitive";
27+
@use "./dismiss-button";
28+
@use "./dropdown";
29+
@use "./flyout";
30+
@use "./form"; // multiple components
31+
@use "./icon";
32+
@use "./icon-tile";
33+
@use "./layout"; // multiple components
34+
@use "./link"; // multiple components
35+
@use "./menu-primitive";
36+
@use "./modal";
37+
@use "./page-header";
38+
@use "./pagination";
39+
@use "./reveal";
40+
@use "./rich-tooltip";
41+
@use "./segmented-group";
42+
@use "./separator";
43+
@use "./side-nav";
44+
@use "./stepper";
45+
@use "./table";
46+
@use "./tabs";
47+
@use "./tag";
48+
@use "./text";
49+
@use "./time";
50+
@use "./toast";
51+
@use "./tooltip";
52+
// END COMPONENT CSS FILES IMPORTS

‎packages/tokens/dist/devdot/css/helpers/typography.css‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)