chore: convert style dictionary files to ESM (#3242)

cloudscape-design · Feb 4, 2025 · 3146174 · 3146174
1 parent 3f666b4
commit 3146174
Show file tree

Hide file tree

Showing 56 changed files with 217 additions and 219 deletions.
diff --git a/build-tools/tasks/package-json.js b/build-tools/tasks/package-json.js
@@ -80,6 +80,7 @@ function generatePackageJson(target, baseContent, { injectDependencies } = {}) {
 
 const styleDictionaryPackageJson = generatePackageJson(path.join(workspace.targetPath, 'style-dictionary'), {
   name: '@cloudscape-design/style-dictionary',
+  type: 'module',
   dependencies: { lodash: '^4.0.0' },
 });
 

diff --git a/build-tools/tasks/styles.js b/build-tools/tasks/styles.js
@@ -3,7 +3,7 @@
 const { parallel, series } = require('gulp');
 const { readFileSync } = require('fs');
 const { createHash } = require('crypto');
-const { join, basename } = require('path');
+const { join } = require('path');
 const { buildThemedComponentsInternal } = require('@cloudscape-design/theming-build/internal');
 
 const themes = require('../utils/themes');
@@ -12,15 +12,17 @@ const { task } = require('../utils/gulp-utils');
 const { writeFile } = require('../utils/files');
 const { compileTypescript } = require('./typescript');
 
+const styleDictionaryRoot = join(__dirname, '../../', workspace.compiledStyleDictionary);
+
 function generateEnvironment() {
   return task(`style-dictionary:environment`, () => {
     const tokenStylesPath = join(workspace.sourcePath, './internal/styles/global.scss');
     const hash = createHash('sha256');
     hash.update(readFileSync(tokenStylesPath, 'utf-8'));
     const tokenStylesHash = hash.digest('hex').slice(0, 6);
     writeFile(
-      join(rootDir, workspace.compiledStyleDictionary, 'utils/environment.js'),
-      `exports.tokenStylesSuffix = "${tokenStylesHash}";`
+      join(styleDictionaryRoot, 'utils/environment.js'),
+      `export const tokenStylesSuffix = "${tokenStylesHash}";`
     );
     return Promise.resolve();
   });
@@ -34,18 +36,18 @@ function compileStyleDictionary() {
   });
 }
 
-const rootDir = join(__dirname, '../../');
-
 function stylesTask(theme) {
-  return task(`styles:${theme.name}`, () => {
+  return task(`styles:${theme.name}`, async () => {
     const designTokensOutputDir = join(workspace.targetPath, theme.designTokensDir);
-    const primary = getTheme(theme.primaryThemePath);
-    const secondary = theme.secondaryThemePaths ? theme.secondaryThemePaths.map(path => getTheme(path)) : [];
-    const styleDictionaryName = basename(theme.primaryThemePath);
+    // eslint-disable-next-line no-unsanitized/method
+    const { default: primary } = await import(join(styleDictionaryRoot, theme.primaryThemePath));
+    const secondary = await Promise.all(
+      // eslint-disable-next-line no-unsanitized/method
+      theme.secondaryThemePaths?.map(async path => (await import(join(styleDictionaryRoot, path))).default) ?? []
+    );
 
-    const metadata = require(
-      join(rootDir, `${workspace.compiledStyleDictionary}/${styleDictionaryName}/metadata`)
-    ).default;
+    // eslint-disable-next-line no-unsanitized/method
+    const { default: metadata } = await import(join(styleDictionaryRoot, theme.primaryThemePath, '../metadata.js'));
     const exposed = [];
     const themeable = [];
     const variablesMap = {};
@@ -83,10 +85,6 @@ function stylesTask(theme) {
   });
 }
 
-function getTheme(themePath) {
-  return require(join(rootDir, workspace.compiledStyleDictionary, themePath)).default;
-}
-
 module.exports = series(
   generateEnvironment(),
   compileStyleDictionary(),

diff --git a/build-tools/utils/themes.js b/build-tools/utils/themes.js
@@ -12,8 +12,8 @@ const themes = [
     designTokensDir: 'design-tokens',
     designTokensPackageJson: { name: '@cloudscape-design/design-tokens' },
     outputPath: path.join(workspace.targetPath, 'components'),
-    primaryThemePath: './classic',
-    secondaryThemePaths: ['./visual-refresh-secondary'],
+    primaryThemePath: './classic/index.js',
+    secondaryThemePaths: ['./visual-refresh-secondary/index.js'],
   },
 ];
 

diff --git a/style-dictionary/classic/borders.ts b/style-dictionary/classic/borders.ts
@@ -1,9 +1,9 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import merge from 'lodash/merge';
+import merge from 'lodash/merge.js';
 
-import { StyleDictionary } from '../utils/interfaces';
-import { tokens as parentTokens } from '../visual-refresh/borders';
+import { StyleDictionary } from '../utils/interfaces.js';
+import { tokens as parentTokens } from '../visual-refresh/borders.js';
 
 const tokens: StyleDictionary.BordersDictionary = {
   borderActiveWidth: '2px',

diff --git a/style-dictionary/classic/color-charts.ts b/style-dictionary/classic/color-charts.ts
@@ -1,10 +1,10 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import merge from 'lodash/merge';
+import merge from 'lodash/merge.js';
 
-import { expandColorDictionary } from '../utils';
-import { StyleDictionary } from '../utils/interfaces';
-import { tokens as parentTokens } from '../visual-refresh/color-charts';
+import { expandColorDictionary } from '../utils/index.js';
+import { StyleDictionary } from '../utils/interfaces.js';
+import { tokens as parentTokens } from '../visual-refresh/color-charts.js';
 
 const tokens: StyleDictionary.ColorChartsDictionary = {
   colorChartsLineGrid: { dark: '{colorGrey650}' },

diff --git a/style-dictionary/classic/color-palette.ts b/style-dictionary/classic/color-palette.ts
@@ -1,9 +1,9 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import merge from 'lodash/merge';
+import merge from 'lodash/merge.js';
 
-import { StyleDictionary } from '../utils/interfaces';
-import { tokens as parentTokens } from '../visual-refresh/color-palette';
+import { StyleDictionary } from '../utils/interfaces.js';
+import { tokens as parentTokens } from '../visual-refresh/color-palette.js';
 
 const tokens: StyleDictionary.ColorPaletteDictionary = {
   colorBlue100: '#f1faff',

diff --git a/style-dictionary/classic/color-severity.ts b/style-dictionary/classic/color-severity.ts
@@ -1,10 +1,10 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import merge from 'lodash/merge';
+import merge from 'lodash/merge.js';
 
-import { expandColorDictionary } from '../utils';
-import { StyleDictionary } from '../utils/interfaces';
-import { tokens as parentTokens } from '../visual-refresh/color-severity';
+import { expandColorDictionary } from '../utils/index.js';
+import { StyleDictionary } from '../utils/interfaces.js';
+import { tokens as parentTokens } from '../visual-refresh/color-severity.js';
 
 const tokens: StyleDictionary.ColorSeverityDictionary = {
   colorTextNotificationSeverityMedium: { light: '{colorBlack}', dark: '{colorGrey900}' },

diff --git a/style-dictionary/classic/colors.ts b/style-dictionary/classic/colors.ts
@@ -1,10 +1,10 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import merge from 'lodash/merge';
+import merge from 'lodash/merge.js';
 
-import { expandColorDictionary } from '../utils';
-import { StyleDictionary } from '../utils/interfaces';
-import { tokens as parentTokens } from '../visual-refresh/colors';
+import { expandColorDictionary } from '../utils/index.js';
+import { StyleDictionary } from '../utils/interfaces.js';
+import { tokens as parentTokens } from '../visual-refresh/colors.js';
 
 const tokens: StyleDictionary.ColorsDictionary = {
   colorGreyOpaque70: 'rgba(255, 255, 255, 0.7)',

diff --git a/style-dictionary/classic/contexts/alert.ts b/style-dictionary/classic/contexts/alert.ts
@@ -1,10 +1,10 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import merge from 'lodash/merge';
+import merge from 'lodash/merge.js';
 
-import { expandColorDictionary } from '../../utils';
-import { StyleDictionary } from '../../utils/interfaces';
-import { tokens as parentTokens } from '../colors';
+import { expandColorDictionary } from '../../utils/index.js';
+import { StyleDictionary } from '../../utils/interfaces.js';
+import { tokens as parentTokens } from '../colors.js';
 
 const alertExpandableSectionTokens: StyleDictionary.ColorsDictionary = {
   colorBorderDividerDefault: '{colorTextButtonNormalDefault}',

diff --git a/style-dictionary/classic/contexts/compact-table.ts b/style-dictionary/classic/contexts/compact-table.ts
@@ -1,10 +1,10 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import merge from 'lodash/merge';
+import merge from 'lodash/merge.js';
 
-import { expandDensityDictionary } from '../../utils';
-import { StyleDictionary } from '../../utils/interfaces';
-import { tokens as parentTokens } from '../spacing';
+import { expandDensityDictionary } from '../../utils/index.js';
+import { StyleDictionary } from '../../utils/interfaces.js';
+import { tokens as parentTokens } from '../spacing.js';
 
 const spacingTokens: StyleDictionary.SpacingDictionary = {
   spaceScaledXxxs: '{spaceNone}',

diff --git a/style-dictionary/classic/contexts/flashbar-warning.ts b/style-dictionary/classic/contexts/flashbar-warning.ts
@@ -1,11 +1,11 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import merge from 'lodash/merge';
+import merge from 'lodash/merge.js';
 
-import { expandColorDictionary } from '../../utils';
-import { StyleDictionary } from '../../utils/interfaces';
-import { sharedTokens } from '../../visual-refresh/contexts/flashbar-warning';
-import { tokens as parentTokens } from '../colors';
+import { expandColorDictionary } from '../../utils/index.js';
+import { StyleDictionary } from '../../utils/interfaces.js';
+import { sharedTokens } from '../../visual-refresh/contexts/flashbar-warning.js';
+import { tokens as parentTokens } from '../colors.js';
 
 const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(
   merge({}, parentTokens, sharedTokens)

diff --git a/style-dictionary/classic/contexts/flashbar.ts b/style-dictionary/classic/contexts/flashbar.ts
@@ -1,10 +1,10 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import merge from 'lodash/merge';
+import merge from 'lodash/merge.js';
 
-import { expandColorDictionary } from '../../utils';
-import { StyleDictionary } from '../../utils/interfaces';
-import { tokens as parentTokens } from '../colors';
+import { expandColorDictionary } from '../../utils/index.js';
+import { StyleDictionary } from '../../utils/interfaces.js';
+import { tokens as parentTokens } from '../colors.js';
 
 const tokens = {
   colorBorderItemFocused: '{colorGrey100}',

diff --git a/style-dictionary/classic/contexts/tools-drawer-trigger.ts b/style-dictionary/classic/contexts/tools-drawer-trigger.ts
@@ -1,10 +1,10 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import merge from 'lodash/merge';
+import merge from 'lodash/merge.js';
 
-import { expandColorDictionary } from '../../utils';
-import { StyleDictionary } from '../../utils/interfaces';
-import { tokens as parentTokens } from '../colors';
+import { expandColorDictionary } from '../../utils/index.js';
+import { StyleDictionary } from '../../utils/interfaces.js';
+import { tokens as parentTokens } from '../colors.js';
 
 const appLayoutToolsDrawerTriggerFocusedButton: StyleDictionary.ColorsDictionary = {
   colorBorderItemFocused: {

diff --git a/style-dictionary/classic/contexts/top-navigation.ts b/style-dictionary/classic/contexts/top-navigation.ts
@@ -1,10 +1,10 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import merge from 'lodash/merge';
+import merge from 'lodash/merge.js';
 
-import { expandColorDictionary, pickState } from '../../utils';
-import { StyleDictionary } from '../../utils/interfaces';
-import { tokens as parentTokens } from '../colors';
+import { expandColorDictionary, pickState } from '../../utils/index.js';
+import { StyleDictionary } from '../../utils/interfaces.js';
+import { tokens as parentTokens } from '../colors.js';
 
 const tokens = {
   colorBackgroundContainerContent: '{colorAwsSquidInk}',

diff --git a/style-dictionary/classic/index.ts b/style-dictionary/classic/index.ts
@@ -9,52 +9,48 @@ import {
   createFlashbarContext,
   createFlashbarWarningContext,
   createTopNavigationContext,
-} from '../utils/contexts';
-import { createColorMode, createDensityMode, createMotionMode } from '../utils/modes';
+} from '../utils/contexts.js';
+import { StyleDictionary } from '../utils/interfaces.js';
+import { createColorMode, createDensityMode, createMotionMode } from '../utils/modes.js';
 
 const modes = [
   createColorMode('.awsui-dark-mode'),
   createDensityMode('.awsui-compact-mode'),
   createMotionMode('.awsui-motion-disabled'),
 ];
 
-const tokenCategories = [
-  require('./color-palette'),
-  require('./color-charts'),
-  require('./color-severity'),
-  require('./colors'),
-  require('./typography'),
-  require('./borders'),
-  require('./motion'),
-  require('./sizes'),
-  require('./spacing'),
-  require('./shadows'),
+const tokenCategories: Array<StyleDictionary.CategoryModule> = [
+  await import('./color-palette.js'),
+  await import('./color-charts.js'),
+  await import('./color-severity.js'),
+  await import('./colors.js'),
+  await import('./typography.js'),
+  await import('./borders.js'),
+  await import('./motion.js'),
+  await import('./sizes.js'),
+  await import('./spacing.js'),
+  await import('./shadows.js'),
 ];
 
-export function buildClassicOpenSource(builder: ThemeBuilder) {
+export async function buildClassicOpenSource(builder: ThemeBuilder) {
   tokenCategories.forEach(({ tokens, mode: modeId }) => {
     const mode = modes.find(mode => mode.id === modeId);
     builder.addTokens(tokens, mode);
   });
 
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  builder.addContext(createCompactTableContext(require('./contexts/compact-table').tokens));
-
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  builder.addContext(createTopNavigationContext(require('./contexts/top-navigation').tokens));
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  builder.addContext(createFlashbarContext(require('./contexts/flashbar').tokens));
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  builder.addContext(createFlashbarWarningContext(require('./contexts/flashbar-warning').tokens));
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  builder.addContext(createAlertContext(require('./contexts/alert').tokens));
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  builder.addContext(createAppLayoutToolsDrawerTriggerContext(require('./contexts/tools-drawer-trigger').tokens));
+  builder.addContext(createCompactTableContext((await import('./contexts/compact-table.js')).tokens));
+  builder.addContext(createTopNavigationContext((await import('./contexts/top-navigation.js')).tokens));
+  builder.addContext(createFlashbarContext((await import('./contexts/flashbar.js')).tokens));
+  builder.addContext(createFlashbarWarningContext((await import('./contexts/flashbar-warning.js')).tokens));
+  builder.addContext(createAlertContext((await import('./contexts/alert.js')).tokens));
+  builder.addContext(
+    createAppLayoutToolsDrawerTriggerContext((await import('./contexts/tools-drawer-trigger.js')).tokens)
+  );
 
   return builder.build();
 }
 
 const builder = new ThemeBuilder('classic', ':root', modes);
-const theme = buildClassicOpenSource(builder);
+const theme = await buildClassicOpenSource(builder);
 
 export default theme;
diff --git a/style-dictionary/classic/metadata.ts b/style-dictionary/classic/metadata.ts
@@ -1,8 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { StyleDictionary } from '../utils/interfaces';
-import { updateDescriptions } from '../utils/metadata';
-import parentMetadata from '../visual-refresh/metadata';
+import { StyleDictionary } from '../utils/interfaces.js';
+import { updateDescriptions } from '../utils/metadata.js';
+import parentMetadata from '../visual-refresh/metadata/index.js';
 
 const updatedDescriptions: StyleDictionary.TokenIndex<string> = {
   colorTextAccent:

diff --git a/style-dictionary/classic/motion.ts b/style-dictionary/classic/motion.ts
@@ -1,8 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { tokenStylesSuffix } from '../utils/environment';
-import { StyleDictionary } from '../utils/interfaces';
-import { mode, tokens as visualRefreshTokens } from '../visual-refresh/motion';
+import { tokenStylesSuffix } from '../utils/environment.js';
+import { StyleDictionary } from '../utils/interfaces.js';
+import { mode, tokens as visualRefreshTokens } from '../visual-refresh/motion.js';
 
 export const tokens: StyleDictionary.MotionDictionary = {
   ...visualRefreshTokens,

diff --git a/style-dictionary/classic/shadows.ts b/style-dictionary/classic/shadows.ts
@@ -1,10 +1,10 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import merge from 'lodash/merge';
+import merge from 'lodash/merge.js';
 
-import { expandColorDictionary } from '../utils';
-import { StyleDictionary } from '../utils/interfaces';
-import { tokens as parentTokens } from '../visual-refresh/shadows';
+import { expandColorDictionary } from '../utils/index.js';
+import { StyleDictionary } from '../utils/interfaces.js';
+import { tokens as parentTokens } from '../visual-refresh/shadows.js';
 
 const tokens: StyleDictionary.ShadowsDictionary = {
   shadowContainer: {

diff --git a/style-dictionary/classic/sizes.ts b/style-dictionary/classic/sizes.ts
@@ -1,10 +1,10 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import merge from 'lodash/merge';
+import merge from 'lodash/merge.js';
 
-import { expandDensityDictionary } from '../utils';
-import { StyleDictionary } from '../utils/interfaces';
-import { tokens as parentTokens } from '../visual-refresh/sizes';
+import { expandDensityDictionary } from '../utils/index.js';
+import { StyleDictionary } from '../utils/interfaces.js';
+import { tokens as parentTokens } from '../visual-refresh/sizes.js';
 
 const tokens: StyleDictionary.SizesDictionary = {
   sizeCalendarGridWidth: '234px',

diff --git a/style-dictionary/classic/spacing.ts b/style-dictionary/classic/spacing.ts
@@ -1,10 +1,10 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import merge from 'lodash/merge';
+import merge from 'lodash/merge.js';
 
-import { expandDensityDictionary } from '../utils';
-import { StyleDictionary } from '../utils/interfaces';
-import { tokens as parentTokens } from '../visual-refresh/spacing';
+import { expandDensityDictionary } from '../utils/index.js';
+import { StyleDictionary } from '../utils/interfaces.js';
+import { tokens as parentTokens } from '../visual-refresh/spacing.js';
 
 const tokens: StyleDictionary.SpacingDictionary = {
   spaceAlertActionLeft: '{spaceL}',