further cleanup

packages/cli/src/tokens/build.ts

@@ -6,7 +6,7 @@ import chalk from 'chalk';
 import * as R from 'ramda';
 import StyleDictionary from 'style-dictionary';
 
-import { getConfigsForThemeDimensions } from './build/configs.js';
+import { configs, getConfigsForThemeDimensions } from './build/configs.js';
 import type { BuildConfig, ThemePermutation } from './build/types.js';
 import { makeEntryFile } from './build/utils/entryfile.js';
 
@@ -29,22 +29,22 @@ const sd = new StyleDictionary();
  * Declarative configuration of the build output
  */
 const buildConfigs = {
- typography: { sdConfig: 'typographyVariables', dimensions: ['typography'] },
- 'color-mode': { sdConfig: 'colorModeVariables', dimensions: ['mode'] },
- semantic: { sdConfig: 'semanticVariables', dimensions: ['semantic'] },
+ typography: { getConfig: configs.typographyVariables, dimensions: ['typography'] },
+ 'color-mode': { getConfig: configs.colorModeVariables, dimensions: ['mode'] },
+ semantic: { getConfig: configs.semanticVariables, dimensions: ['semantic'] },
  storefront: {
  name: 'Storefront preview tokens',
- sdConfig: 'typescriptTokens',
+ getConfig: configs.typescriptTokens,
  dimensions: ['mode'],
  options: { outPath: path.resolve('../../apps/storefront/tokens') },
  },
  entryFiles: {
  name: 'CSS entry files',
- sdConfig: 'semanticVariables',
+ getConfig: configs.semanticVariables,
  dimensions: ['semantic'],
  build: async (sdConfigs, { outPath }) => {
  await Promise.all(
- sdConfigs.map(async ({ theme }) => {
+ sdConfigs.map(async ({ permutation: { theme } }) => {
  console.log(`👷 ${theme}.css`);
 
  return makeEntryFile({ theme, outPath, buildPath: path.resolve(`${outPath}/${theme}`) });
@@ -70,7 +70,7 @@ export async function buildTokens(options: Options): Promise<void> {
  const buildAndSdConfigs = R.map(
  (val: BuildConfig) => ({
  buildConfig: val,
- sdConfigs: getConfigsForThemeDimensions(val.sdConfig, relevant$themes, val.dimensions, {
+ sdConfigs: getConfigsForThemeDimensions(val.getConfig, relevant$themes, val.dimensions, {
  outPath,
  tokensDir,
  ...val.options,
@@ -88,9 +88,9 @@ export async function buildTokens(options: Options): Promise<void> {
  return await buildConfig.build(sdConfigs, { outPath, tokensDir, ...buildConfig.options });
  }
  await Promise.all(
- sdConfigs.map(async ({ config, ...modeNames }) => {
+ sdConfigs.map(async ({ config, permutation }) => {
  const modes: Array<keyof ThemePermutation> = ['theme', ...buildConfig.dimensions];
- const modeMessage = modes.map((x) => modeNames[x]).join(' - ');
+ const modeMessage = modes.map((x) => permutation[x]).join(' - ');
  console.log(modeMessage);
 
  return (await sd.extend(config)).buildAllPlatforms();

packages/cli/src/tokens/build/configs.ts

@@ -65,13 +65,14 @@ const outputColorReferences = (token: TransformedToken) => {
  return false;
 };
 
-type GetStyleDictionaryConfig = (
- options: ThemePermutation & {
+export type GetStyleDictionaryConfig = (
+ permutation: ThemePermutation,
+ options: {
  outPath?: string;
  },
 ) => StyleDictionaryConfig;
 
-const colorModeVariables: GetStyleDictionaryConfig = ({ mode = 'light', outPath, theme }) => {
+const colorModeVariables: GetStyleDictionaryConfig = ({ mode = 'light', theme }, { outPath }) => {
  const selector = `${mode === 'light' ? ':root, ' : ''}[data-ds-color-mode="${mode}"]`;
  const layer = `ds.theme.color-mode.${mode}`;
 
@@ -106,7 +107,7 @@ const colorModeVariables: GetStyleDictionaryConfig = ({ mode = 'light', outPath,
  };
 };
 
-const semanticVariables: GetStyleDictionaryConfig = ({ outPath, theme }) => {
+const semanticVariables: GetStyleDictionaryConfig = ({ theme }, { outPath }) => {
  const selector = `:root`;
  const layer = `ds.theme.semantic`;
 
@@ -157,7 +158,7 @@ const semanticVariables: GetStyleDictionaryConfig = ({ outPath, theme }) => {
  };
 };
 
-const typescriptTokens: GetStyleDictionaryConfig = ({ mode, outPath, theme }) => {
+const typescriptTokens: GetStyleDictionaryConfig = ({ mode, theme }, { outPath }) => {
  return {
  usesDtcg,
  preprocessors: ['tokens-studio'],
@@ -195,7 +196,7 @@ const typescriptTokens: GetStyleDictionaryConfig = ({ mode, outPath, theme }) =>
  };
 };
 
-const typographyVariables: GetStyleDictionaryConfig = ({ outPath, theme, typography }) => {
+const typographyVariables: GetStyleDictionaryConfig = ({ theme, typography }, { outPath }) => {
  const selector = `${typography === 'primary' ? ':root, ' : ''}[data-ds-typography="${typography}"]`;
  const layer = `ds.theme.typography.${typography}`;
 
@@ -250,17 +251,15 @@ const typographyVariables: GetStyleDictionaryConfig = ({ outPath, theme, typogra
  };
 };
 
-const configs = {
+export const configs = {
  colorModeVariables,
  typographyVariables,
  semanticVariables,
  typescriptTokens,
 };
 
-export type StyleDictionaryConfigs = keyof typeof configs;
-
 export const getConfigsForThemeDimensions = (
- configName: keyof typeof configs,
+ getConfig: GetStyleDictionaryConfig,
  themes: ThemeObject[],
  dimensions: ThemeDimension[],
  options: GetSdConfigOptions,
@@ -269,20 +268,12 @@ export const getConfigsForThemeDimensions = (
 
  const permutations = getMultidimensionalThemes(themes, dimensions);
  return permutations
- .map(({ selectedTokenSets, mode, theme, semantic, size, typography }) => {
+ .map(({ selectedTokenSets, permutation }) => {
  const setsWithPaths = selectedTokenSets.map((x) => `${tokensDir}/${x}.json`);
 
  const [source, include] = paritionPrimitives(setsWithPaths);
- const getConfig = configs[configName];
 
- const config_ = getConfig({
- outPath,
- theme,
- mode,
- semantic,
- size,
- typography,
- });
+ const config_ = getConfig(permutation, { outPath });
 
  const config: StyleDictionaryConfig = {
  ...config_,
@@ -294,7 +285,7 @@ export const getConfigsForThemeDimensions = (
  include,
  };
 
- return { mode, theme, semantic, size, typography, config };
+ return { permutation, config };
  })
  .sort();
 };

packages/cli/src/tokens/build/types.ts

@@ -1,5 +1,5 @@
 import type SD from 'style-dictionary/types';
-import type { StyleDictionaryConfigs } from './configs';
+import type { GetStyleDictionaryConfig } from './configs';
 
 /**
  * A multi-dimensional theme is a concrete permutation of the possible theme dimensions
@@ -24,14 +24,14 @@ export type GetSdConfigOptions = {
 export type BuildConfig = {
  /** Optional name of the build config - only used in the console output */
  name?: string;
- /** Style Dictionary configuration id */
- sdConfig: StyleDictionaryConfigs;
+ /** Style Dictionary configuration creator */
+ getConfig: GetStyleDictionaryConfig;
  /** Which theme dimensions to include. `theme` (e.g. digdir/altinn) is always included. */
  dimensions: ThemeDimension[];
- /** Custom StyleDictionary options. If not supplied, the default is used */
+ /** Custom options used when creating Style Dictionary configs. If not supplied, the default is used */
  options?: Partial<GetSdConfigOptions>;
  /** Custom build function. If not supplied, the default is used. */
  build?: (sdConfigs: SDConfigForThemePermutation[], options: GetSdConfigOptions) => Promise<void>;
 };
 
-export type SDConfigForThemePermutation = ThemePermutation & { config: SD.Config };
+export type SDConfigForThemePermutation = { permutation: ThemePermutation; config: SD.Config };

packages/cli/src/tokens/build/utils/getMultidimensionalThemes.ts

@@ -29,15 +29,16 @@ export const getMultidimensionalThemes = (themes: ThemeObject[], dimensions: The
  console.log(chalk.cyan(` (ignoring permutations for ${nonDependentKeys})`));
  }
  return permutations.filter((val: PermutatedTheme) => {
- const filters = nonDependentKeys.map((x) => val[x] === grouped$themes[x][0].name);
+ const filters = nonDependentKeys.map((x) => val.permutation[x] === grouped$themes[x][0].name);
  return filters.every((x) => x);
  });
 };
 
 export type PermutatedTheme = {
  name: string;
  selectedTokenSets: string[];
-} & ThemePermutation;
+ permutation: ThemePermutation;
+};
 
 const processed: unique symbol = Symbol('Type brand for ProcessedThemeObject');
 type ProcessedThemeObject = ThemeObject & { [processed]: true };
@@ -91,30 +92,32 @@ function permutateThemes(groups: GroupedThemes): PermutatedTheme[] {
  const permutatedTheme = perm.reduce(
  (acc, theme) => {
  const { group, name, selectedTokenSets } = theme;
- let updatedPermutatedTheme = acc;
+ let updatedPermutation = acc.permutation;
 
  if (group) {
- const groupProp = R.lensProp<PermutatedTheme>(group as keyof ThemePermutation);
- updatedPermutatedTheme = R.set(groupProp, name, updatedPermutatedTheme);
+ const groupProp = R.lensProp<ThemePermutation>(group as keyof ThemePermutation);
+ updatedPermutation = R.set(groupProp, name, updatedPermutation);
  }
 
  const updatedName = `${String(acc.name)}${acc ? separator : ''}${name}`;
- const sets = [...updatedPermutatedTheme.selectedTokenSets, ...filterTokenSets(selectedTokenSets)];
+ const sets = [...acc.selectedTokenSets, ...filterTokenSets(selectedTokenSets)];
 
  return {
- ...updatedPermutatedTheme,
+ permutation: updatedPermutation,
  name: updatedName,
  selectedTokenSets: sets,
  };
  },
  {
  name: '',
  selectedTokenSets: [],
- mode: 'unknown',
- theme: 'unknown',
- semantic: 'unknown',
- size: 'unknown',
- typography: 'unknown',
+ permutation: {
+ mode: 'unknown',
+ theme: 'unknown',
+ semantic: 'unknown',
+ size: 'unknown',
+ typography: 'unknown',
+ },
  } as PermutatedTheme,
  );