Merge pull request #4408 from grommet/style-dictionaryv4

Upgrade to style-dictionary v4

design-tokens/package.json

@@ -38,8 +38,8 @@
     "jest": "^29.6.2",
     "prettier": "3.0.0",
     "simple-git": "^3.24.0",
-    "style-dictionary": "^3.9.2",
-    "style-dictionary-utils": "^2.0.7",
+    "style-dictionary": "^4.2.0",
+    "style-dictionary-utils": "^3.0.0",
     "ts-jest": "^29.1.1",
     "tsx": "^4.19.1",
     "typescript": "^5.1.6"

design-tokens/src/HPEStyleDictionary.ts

@@ -1,65 +1,76 @@
-import StyleDictionary from 'style-dictionary-utils';
+import { StyleDictionary } from 'style-dictionary-utils';
 import {
   commonJs,
   commonJsGrommetRefs,
   cssColorModes,
   cssBreakpoints,
   esmGrommetRefs,
+  javascriptEsm,
   jsonFlat,
 } from './formats/index.js';
 import {
   cssW3c,
   javascriptW3c,
   linearGradientCss,
   numberToDimension,
+  shadowCSS,
 } from './transforms/index.js';
 
-StyleDictionary.registerFormat({
+export const HPEStyleDictionary = new StyleDictionary({
+  log: {
+    verbosity: 'verbose',
+  },
+});
+
+HPEStyleDictionary.registerFormat({
   name: 'javascript/commonJs',
-  formatter: commonJs,
+  format: commonJs,
 });
-StyleDictionary.registerFormat({
+HPEStyleDictionary.registerFormat({
+  name: 'javascript/esm',
+  format: javascriptEsm,
+});
+HPEStyleDictionary.registerFormat({
   name: 'css/variables-themed',
-  formatter: cssColorModes,
+  format: cssColorModes,
 });
-StyleDictionary.registerFormat({
+HPEStyleDictionary.registerFormat({
   name: 'css/variables-breakpoints',
-  formatter: cssBreakpoints,
+  format: cssBreakpoints,
 });
-StyleDictionary.registerFormat({
+HPEStyleDictionary.registerFormat({
   name: `esmGrommetRefs`,
-  formatter: esmGrommetRefs,
+  format: esmGrommetRefs,
 });
-StyleDictionary.registerFormat({
+HPEStyleDictionary.registerFormat({
   name: `commonJsGrommetRefs`,
-  formatter: commonJsGrommetRefs,
+  format: commonJsGrommetRefs,
 });
-StyleDictionary.registerFormat({
+HPEStyleDictionary.registerFormat({
   name: `jsonFlat`,
-  formatter: jsonFlat,
+  format: jsonFlat,
 });
-StyleDictionary.registerTransform({
-  name: 'numberToDimension',
+HPEStyleDictionary.registerTransform({
   ...numberToDimension,
 });
-StyleDictionary.registerTransform({
+HPEStyleDictionary.registerTransform({
+  ...shadowCSS,
+});
+HPEStyleDictionary.registerTransform({
   name: 'name/dot',
   type: 'name',
-  transformer: (token, config) => {
+  transform: (token, config) => {
     return [config.prefix].concat(token.path).join('.');
   },
 });
-StyleDictionary.registerTransform({
-  name: 'linearGradient/css',
+HPEStyleDictionary.registerTransform({
   ...linearGradientCss,
 });
-StyleDictionary.registerTransformGroup({
+HPEStyleDictionary.registerTransformGroup({
   name: 'js/w3c',
   transforms: javascriptW3c,
 });
-StyleDictionary.registerTransformGroup({
+HPEStyleDictionary.registerTransformGroup({
   name: 'css/w3c',
   transforms: cssW3c,
 });
-
-export const HPEStyleDictionary: StyleDictionary.Core = StyleDictionary;

design-tokens/src/formats/commonJs.ts

@@ -1,18 +1,19 @@
-import StyleDictionary from 'style-dictionary';
-import { FormatterArguments } from 'style-dictionary/types/Format.js';
+import { fileHeader, minifyDictionary } from 'style-dictionary/utils';
+import { FormatFn, FormatFnArguments } from 'style-dictionary/types';
 import { jsonToNestedValue } from './utils/jsonToNestedValue.js';
-const { fileHeader } = StyleDictionary.formatHelpers;
 
-export const commonJs = ({
+export const commonJs: FormatFn = async ({
   dictionary,
   file,
   platform = {},
-}: FormatterArguments) => {
+}: FormatFnArguments) => {
   const { prefix } = platform;
   const tokens = prefix ? { [prefix]: dictionary.tokens } : dictionary.tokens;
   //
-  const output = `${fileHeader({ file })}module.exports = ${JSON.stringify(
-    jsonToNestedValue(tokens),
+  const output = `${await fileHeader({
+    file,
+  })}module.exports = ${JSON.stringify(
+    jsonToNestedValue(minifyDictionary(tokens, true)), // build in minify
     null,
     2,
   )}\n`;

design-tokens/src/formats/commonJsGrommetRefs.ts

@@ -1,28 +1,28 @@
-import StyleDictionary from 'style-dictionary';
-import { FormatterArguments } from 'style-dictionary/types/Format.js';
+import { fileHeader, minifyDictionary } from 'style-dictionary/utils';
+import { FormatFn, FormatFnArguments } from 'style-dictionary/types';
 import { getGrommetValue } from './utils/getGrommetValue.js';
 import { jsonToNestedValue } from './utils/jsonToNestedValue.js';
 import { access } from '../utils.js';
 
-const { fileHeader } = StyleDictionary.formatHelpers;
-
-export const commonJsGrommetRefs = ({
+export const commonJsGrommetRefs: FormatFn = async ({
   dictionary,
   file,
   platform = {},
-}: FormatterArguments) => {
+}: FormatFnArguments) => {
   const { prefix } = platform;
   let tokens = dictionary.tokens;
 
   dictionary.allTokens.forEach((token: any) => {
     const value = getGrommetValue(token, dictionary);
     const originalToken = access(token.path.join('.'), tokens);
-    originalToken.value = value;
+    originalToken.$value = value;
   });
 
   tokens = prefix ? { [prefix]: tokens } : tokens;
-  const output = `${fileHeader({ file })}module.exports = ${JSON.stringify(
-    jsonToNestedValue(tokens),
+  const output = `${await fileHeader({
+    file,
+  })}module.exports = ${JSON.stringify(
+    jsonToNestedValue(minifyDictionary(tokens, true)), // build in minify
     null,
     2,
   )}\n`;

design-tokens/src/formats/cssBreakpoints.ts

@@ -1,20 +1,21 @@
-import StyleDictionary from 'style-dictionary';
-import { FormatterArguments } from 'style-dictionary/types/Format.js';
+import { FormatFn, FormatFnArguments } from 'style-dictionary/types';
+import { fileHeader, formattedVariables } from 'style-dictionary/utils';
 
-export const cssBreakpoints = ({
+export const cssBreakpoints: FormatFn = async ({
   dictionary,
   file,
   options,
-}: FormatterArguments) => {
+}: FormatFnArguments) => {
   const { outputReferences, mediaQuery } = options;
-  let output = `:root {\n${StyleDictionary.formatHelpers.formattedVariables({
+  let output = `:root {\n${formattedVariables({
     format: 'css',
     dictionary,
     outputReferences,
+    usesDtcg: true,
   })}\n}`;
   if (mediaQuery) output = `@media (${mediaQuery}) {\n${output}\n}\n`;
 
-  return `${StyleDictionary.formatHelpers.fileHeader({
+  return `${await fileHeader({
     file,
   })}${output}`;
 };

design-tokens/src/formats/cssColorModes.ts

@@ -1,22 +1,23 @@
-import StyleDictionary from 'style-dictionary';
-import { FormatterArguments } from 'style-dictionary/types/Format.js';
+import { FormatFn, FormatFnArguments } from 'style-dictionary/types';
+import { formattedVariables, fileHeader } from 'style-dictionary/utils';
 
-export const cssColorModes = ({
+export const cssColorModes: FormatFn = async ({
   dictionary,
   file,
   options,
-}: FormatterArguments) => {
+}: FormatFnArguments) => {
   const { outputReferences, theme, mode } = options;
-  const darkTokens = StyleDictionary.formatHelpers.formattedVariables({
+  const darkTokens = formattedVariables({
     format: 'css',
     dictionary,
     outputReferences,
+    usesDtcg: true,
   });
   const dataTheme = theme ? `[data-theme=${theme}]` : '';
   // TO DO "mode" is fairly coupled with concept of "dark" right now
   // just confirm this would be able to expand to concepts like "high-contrast"
   const dataMode = mode ? `[data-mode=${mode}]` : '';
-  return `${StyleDictionary.formatHelpers.fileHeader({
+  return `${await fileHeader({
     file,
   })}:root${dataTheme}${dataMode} {\n${darkTokens}\n}\n
 ${

design-tokens/src/formats/esmGrommetRefs.ts

@@ -1,26 +1,25 @@
-import StyleDictionary from 'style-dictionary';
-import { FormatterArguments } from 'style-dictionary/types/Format.js';
+import { fileHeader, minifyDictionary } from 'style-dictionary/utils';
+import { FormatFn, FormatFnArguments } from 'style-dictionary/types';
 import { getGrommetValue } from './utils/getGrommetValue.js';
 import { jsonToNestedValue } from './utils/jsonToNestedValue.js';
 import { access } from '../utils.js';
-const { fileHeader } = StyleDictionary.formatHelpers;
 
-export const esmGrommetRefs = ({
+export const esmGrommetRefs: FormatFn = async ({
   dictionary,
   file,
   platform = {},
-}: FormatterArguments) => {
+}: FormatFnArguments) => {
   const { prefix } = platform;
   let tokens = dictionary.tokens;
   dictionary.allTokens.forEach((token: any) => {
     const value = getGrommetValue(token, dictionary);
     const originalToken = access(token.path.join('.'), tokens);
-    originalToken.value = value;
+    originalToken.$value = value;
   });
 
   tokens = prefix ? { [prefix]: tokens } : tokens;
-  const output = `${fileHeader({ file })}export default ${JSON.stringify(
-    jsonToNestedValue(tokens),
+  const output = `${await fileHeader({ file })}export default ${JSON.stringify(
+    jsonToNestedValue(minifyDictionary(tokens, true)), // build in minify
     null,
     2,
   )}\n`;

design-tokens/src/formats/index.ts

@@ -3,4 +3,5 @@ export { commonJsGrommetRefs } from './commonJsGrommetRefs.js';
 export { cssColorModes } from './cssColorModes.js';
 export { cssBreakpoints } from './cssBreakpoints.js';
 export { esmGrommetRefs } from './esmGrommetRefs.js';
+export { javascriptEsm } from './javascriptEsm.js';
 export { jsonFlat } from './jsonFlat.js';

design-tokens/src/formats/javascriptEsm.ts

@@ -0,0 +1,22 @@
+import { fileHeader, minifyDictionary } from 'style-dictionary/utils';
+import { FormatFn, FormatFnArguments } from 'style-dictionary/types';
+import { jsonToNestedValue } from './utils/jsonToNestedValue.js';
+
+export const javascriptEsm: FormatFn = async ({
+  dictionary,
+  file,
+  platform = {},
+}: FormatFnArguments) => {
+  const { prefix } = platform;
+  const tokens = prefix ? { [prefix]: dictionary.tokens } : dictionary.tokens;
+  //
+  const output =
+    (await fileHeader({ file })) +
+    `export default ${JSON.stringify(
+      jsonToNestedValue(minifyDictionary(tokens, true)), // Build in minified
+      null,
+      2,
+    )}\n`;
+  // TO DO return prettified
+  return output;
+};

design-tokens/src/formats/jsonFlat.ts

@@ -1,12 +1,18 @@
-import StyleDictionary from 'style-dictionary';
-import type { Formatter, TransformedToken } from 'style-dictionary';
-const { fileHeader } = StyleDictionary.formatHelpers;
+import { fileHeader } from 'style-dictionary/utils';
+import {
+  TransformedToken,
+  FormatFn,
+  FormatFnArguments,
+} from 'style-dictionary/types';
 
 export const flattenJson = (tokens: TransformedToken[]) =>
   Object.fromEntries(tokens.map(token => [token.name, token]));
 
-export const jsonFlat: Formatter = ({ dictionary, file }) => {
-  const output = `${fileHeader({ file })}export default ${JSON.stringify(
+export const jsonFlat: FormatFn = async ({
+  dictionary,
+  file,
+}: FormatFnArguments) => {
+  const output = `${await fileHeader({ file })}export default ${JSON.stringify(
     flattenJson(dictionary.allTokens),
     null,
     2,

design-tokens/src/formats/utils/getGrommetValue.ts

@@ -1,3 +1,4 @@
+import { usesReferences, getReferences } from 'style-dictionary/utils';
 import { isReference } from '../../utils.js';
 
 const tokenToGrommetRef = (value: string): string => {
@@ -11,7 +12,7 @@ const tokenToGrommetRef = (value: string): string => {
  */
 export const getGrommetValue = (token: any, dictionary: any) => {
   let result;
-  const originalValue = token.original.value;
+  const originalValue = token.original.$value;
   if (token.$type === 'border') {
     let color = originalValue.color;
     if (
@@ -23,13 +24,13 @@ export const getGrommetValue = (token: any, dictionary: any) => {
 
     result = {
       color: color,
-      width: token.value.width,
-      style: token.value.style,
+      width: token.$value.width,
+      style: token.$value.style,
     };
   } else if (
     token.$type !== 'shadow' &&
     token.$type !== 'gradient' && // shadow and gradient are already transformed
-    dictionary.usesReference(originalValue) &&
+    usesReferences(originalValue, dictionary.tokens) &&
     !originalValue.split('.')[0].includes('base') &&
     !originalValue.split('.')[0].includes('fontWeight')
   ) {
@@ -47,7 +48,9 @@ export const getGrommetValue = (token: any, dictionary: any) => {
       result = tokenToGrommetRef(originalValue);
       if (result === 'full') result = '2em';
     } else {
-      const refs = dictionary.getReferences(originalValue);
+      const refs = getReferences(originalValue, dictionary.unfilteredTokens, {
+        usesDtcg: true,
+      });
       let grommetValue;
       refs.forEach((ref: any) => {
         grommetValue = getGrommetValue(ref, dictionary);
@@ -56,7 +59,7 @@ export const getGrommetValue = (token: any, dictionary: any) => {
       else result = grommetValue;
     }
     // references to "base" tokens or non-references should resolve to raw values
-  } else result = token.value;
+  } else result = token.$value;
 
   return result;
 };

design-tokens/src/formats/utils/jsonToNestedValue.ts

@@ -2,7 +2,7 @@ export const jsonToNestedValue = (
   token: string | { [key: string]: any } | undefined,
 ) => {
   if (!token || typeof token !== 'object') return token;
-  if ('value' in token) return token.value;
+  if ('$value' in token) return token.$value;
   const nextObj: { [key: string]: any } = {};
   Object.entries(token).forEach(([key, value]) => {
     nextObj[key] = jsonToNestedValue(value);