diff --git a/packages/components/package.json b/packages/components/package.json index 6112a99e819..eff7de50090 100644 --- a/packages/components/package.json +++ b/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", diff --git a/packages/components/rollup.config.mjs b/packages/components/rollup.config.mjs index 9b83a1c23c6..8b52c2fe51f 100644 --- a/packages/components/rollup.config.mjs +++ b/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(), diff --git a/packages/components/src/styles/@hashicorp/design-system-components-theming-with-combined-strategies.scss b/packages/components/src/styles/@hashicorp/design-system-components-theming-with-combined-strategies.scss new file mode 100644 index 00000000000..28ac7a9f0b4 --- /dev/null +++ b/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(); +} diff --git a/packages/components/src/styles/@hashicorp/design-system-components-theming-with-css-selectors.scss b/packages/components/src/styles/@hashicorp/design-system-components-theming-with-css-selectors.scss new file mode 100644 index 00000000000..8fb787a5541 --- /dev/null +++ b/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(); +} diff --git a/packages/components/src/styles/@hashicorp/design-system-components-theming-with-prefers-color-scheme.scss b/packages/components/src/styles/@hashicorp/design-system-components-theming-with-prefers-color-scheme.scss new file mode 100644 index 00000000000..c83e68e495b --- /dev/null +++ b/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(); +} diff --git a/packages/components/src/styles/@hashicorp/design-system-components.scss b/packages/components/src/styles/@hashicorp/design-system-components.scss index 00c6008b820..a07b10042c8 100644 --- a/packages/components/src/styles/@hashicorp/design-system-components.scss +++ b/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(); } diff --git a/packages/components/src/styles/components/index.scss b/packages/components/src/styles/components/index.scss new file mode 100644 index 00000000000..aa64026dd67 --- /dev/null +++ b/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 diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f2a145ccb7f..729757721d5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -295,9 +295,6 @@ importers: rollup-plugin-copy: specifier: ^3.5.0 version: 3.5.0 - rollup-plugin-scss: - specifier: ^4.0.1 - version: 4.0.1 stylelint: specifier: ^16.17.0 version: 16.23.0(typescript@5.9.2) @@ -10247,9 +10244,6 @@ packages: resolution: {integrity: sha512-wI8D5dvYovRMx/YYKtUNt3Yxaw4ORC9xo6Gt9t22kveWz1enG9QrhVlagzwrxSC455xD1dHMKhIJkbsQ7d48BA==} engines: {node: '>=8.3'} - rollup-plugin-scss@4.0.1: - resolution: {integrity: sha512-3W3+3OzR+shkDl3hJ1XTAuGkP4AfiLgIjie2GtcoZ9pHfRiNqeDbtCu1EUnkjZ98EPIM6nnMIXkKlc7Sx5bRvA==} - rollup-pluginutils@2.8.2: resolution: {integrity: sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==} @@ -24712,10 +24706,6 @@ snapshots: globby: 10.0.1 is-plain-object: 3.0.1 - rollup-plugin-scss@4.0.1: - dependencies: - rollup-pluginutils: 2.8.2 - rollup-pluginutils@2.8.2: dependencies: estree-walker: 0.6.1 diff --git a/showcase/ember-cli-build.js b/showcase/ember-cli-build.js index 72fd5925260..7fb71fdd38e 100644 --- a/showcase/ember-cli-build.js +++ b/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', ], diff --git a/website/ember-cli-build.js b/website/ember-cli-build.js index ad5b7ca6183..fd0f2390547 100644 --- a/website/ember-cli-build.js +++ b/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', ],