@digdir/designsystemet 1.1.3 → 1.1.4

package/dist/src/tokens/process/platform.js

@@ -1,6 +1,6 @@
 // src/tokens/process/platform.ts
 import chalk2 from "chalk";
-import * as R12 from "ramda";
+import * as R10 from "ramda";
 import StyleDictionary2 from "style-dictionary";
 
 // src/tokens/types.ts
@@ -11,7 +11,7 @@ var colorCategories = {
 
 // src/tokens/process/configs.ts
 import { register } from "@tokens-studio/sd-transforms";
-import * as R11 from "ramda";
+import * as R9 from "ramda";
 import StyleDictionary from "style-dictionary";
 
 // src/tokens/utils.ts
@@ -122,7 +122,11 @@ var colorScheme = {
         (t) => !isColorCategoryToken(t)
       ])
     );
-    const formattedTokens = filteredAllTokens.map(format).join("\n");
+    const formattedMap = filteredAllTokens.map((token) => ({
+      token,
+      formatted: format(token)
+    }));
+    const formattedTokens = formattedMap.map(R2.view(R2.lensProp("formatted"))).join("\n");
     const content = `{
 ${formattedTokens}
 ${colorSchemeProperty}}
@@ -140,7 +144,8 @@ var colorCategory = {
   name: "ds/css-colorcategory",
   format: async ({ dictionary, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
-    const { selector, layer } = platform;
+    const { selector, layer, files } = platform;
+    const destination = files?.[0]?.destination;
     const format = R2.compose(
       createPropertyFormatter({
         outputReferences,
@@ -157,7 +162,12 @@ var colorCategory = {
         }
       })
     );
-    const formattedTokens = dictionary.allTokens.map(format).join("\n");
+    const formattedMap = dictionary.allTokens.map((token) => ({
+      token,
+      formatted: format(token)
+    }));
+    buildOptions.buildTokenFormats[destination] = formattedMap;
+    const formattedTokens = formattedMap.map(R2.view(R2.lensProp("formatted"))).join("\n");
     const content = `{
 ${formattedTokens}
 }
@@ -188,30 +198,30 @@ var overrideSizingFormula = (format, token) => {
     calc
   };
 };
-var formatSizingTokens = (format, tokens) => {
-  const { round, calc } = R3.reduce(
-    (acc, token) => {
-      const { round: round2, calc: calc2, name } = overrideSizingFormula(format, token);
-      return {
-        round: [...acc.round, `${name}: ${round2};`],
-        calc: [...acc.calc, `${name}: ${calc2};`]
-      };
-    },
-    { round: [], calc: [] },
-    tokens
-  );
-  return `
+var formatSizingTokens = (format, tokens) => R3.reduce(
+  (acc, token) => {
+    const { round, calc, name } = overrideSizingFormula(format, token);
+    return {
+      tokens: [...acc.tokens, token],
+      round: [...acc.round, `${name}: ${round};`],
+      calc: [...acc.calc, `${name}: ${calc};`]
+    };
+  },
+  { tokens: [], round: [], calc: [] },
+  tokens
+);
+var sizingTemplate = ({ round, calc }) => `
 ${calc.join("\n")}
 
   @supports (width: round(down, .1em, 1px)) {
 ${round.join("\n")}
   }`;
-};
 var semantic = {
   name: "ds/css-semantic",
   format: async ({ dictionary, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
-    const { selector, layer } = platform;
+    const { selector, layer, files } = platform;
+    const destination = files?.[0]?.destination;
     const format = createPropertyFormatter2({
       outputReferences,
       dictionary,
@@ -224,7 +234,18 @@ var semantic = {
       (t) => pathStartsWithOneOf(["_size"], t) && isDigit(t.path[1]),
       filteredTokens
     );
-    const formattedTokens = [R3.map(format, restTokens).join("\n"), formatSizingTokens(format, sizingTokens)];
+    const formattedSizingTokens = formatSizingTokens(format, sizingTokens);
+    const formattedMap = restTokens.map((token) => ({
+      token,
+      formatted: format(token)
+    }));
+    const formattedSizingMap = formattedSizingTokens.round.map((t, i) => ({
+      token: formattedSizingTokens.tokens[i],
+      formatted: t
+    }));
+    buildOptions.buildTokenFormats[destination] = [...formattedMap, ...formattedSizingMap];
+    const sizingSnippet = sizingTemplate(formattedSizingTokens);
+    const formattedTokens = formattedMap.map(R3.view(R3.lensProp("formatted"))).concat(sizingSnippet);
     const content = `{
 ${formattedTokens.join("\n")}
 }
@@ -249,7 +270,8 @@ var typography = {
   name: "ds/css-typography",
   format: async ({ dictionary, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
-    const { selector, layer } = platform;
+    const { selector, layer, files } = platform;
+    const destination = files?.[0]?.destination;
     const format = createPropertyFormatter3({
       outputReferences,
       dictionary,
@@ -257,7 +279,12 @@ var typography = {
       usesDtcg
     });
     const filteredTokens = R4.reject(typographyFontFamilyPredicate, dictionary.allTokens);
-    const formattedTokens = R4.pipe(R4.map(format), R4.join("\n"))(filteredTokens);
+    const formattedMap = filteredTokens.map((token) => ({
+      token,
+      formatted: format(token)
+    }));
+    buildOptions.buildTokenFormats[destination] = formattedMap;
+    const formattedTokens = formattedMap.map(R4.view(R4.lensProp("formatted"))).join("\n");
     const content = selector ? `${selector} {
 ${formattedTokens}
 }` : formattedTokens;
@@ -464,90 +491,6 @@ var semanticVariables = ({ theme }) => {
   };
 };
 
-// src/tokens/process/configs/storefront.ts
-import * as R9 from "ramda";
-import { outputReferencesFilter as outputReferencesFilter2 } from "style-dictionary/utils";
-
-// src/tokens/process/formats/js-tokens.ts
-import * as R8 from "ramda";
-import { createPropertyFormatter as createPropertyFormatter4, fileHeader } from "style-dictionary/utils";
-var groupByType = R8.groupBy((token) => getType(token));
-var removeUnwatedTokens = R8.pipe(
-  R8.reject((token) => isColorCategoryToken(token)),
-  R8.reject((token) => R8.any((path) => path.startsWith("_"))(token.path))
-);
-var dissocExtensions = R8.pipe(R8.dissoc("$extensions"), R8.dissocPath(["original", "$extensions"]));
-var removeUnwatedProps = R8.map((token) => dissocExtensions(token));
-var toCssVarName = R8.pipe(R8.split(":"), R8.head, R8.trim);
-var jsTokens = {
-  name: "ds/js-tokens",
-  format: async ({ dictionary, file, options }) => {
-    const { usesDtcg, outputReferences } = options;
-    const format = createPropertyFormatter4({
-      outputReferences,
-      dictionary,
-      format: "css",
-      usesDtcg
-    });
-    const formatTokens = R8.map((token) => {
-      if (pathStartsWithOneOf(["size", "_size"], token)) {
-        const { calc, name } = overrideSizingFormula(format, token);
-        return {
-          ...token,
-          name: name.trim(),
-          $value: calc.trim()
-        };
-      }
-      return {
-        ...token,
-        name: toCssVarName(format(token))
-      };
-    });
-    const processTokens = R8.pipe(removeUnwatedTokens, removeUnwatedProps, formatTokens, groupByType);
-    const tokens = processTokens(inlineTokens(isInlineTokens, dictionary.allTokens));
-    const content = Object.entries(tokens).map(
-      ([name, token]) => `export const  ${name} = ${JSON.stringify(token, null, 2).replace(/"([^"]+)":/g, "$1:")} 
-`
-    ).join("\n");
-    return fileHeader({ file }).then((fileHeaderText) => fileHeaderText + content);
-  }
-};
-
-// src/tokens/process/configs/storefront.ts
-var typescriptTokens = ({ "color-scheme": colorScheme2, theme }) => {
-  return {
-    preprocessors: ["tokens-studio"],
-    platforms: {
-      ts: {
-        prefix,
-        basePxFontSize,
-        transforms: dsTransformers,
-        buildPath: `${theme}/`,
-        files: [
-          {
-            destination: `${colorScheme2}.ts`,
-            format: jsTokens.name,
-            filter: (token) => {
-              if (pathStartsWithOneOf(["border-width", "letter-spacing", "border-radius"], token) && !R9.includes("semantic", token.filePath))
-                return false;
-              const isSemanticColor = R9.includes("semantic", token.filePath) && typeEquals(["color"], token);
-              const wantedTypes = typeEquals(["shadow", "dimension", "typography", "opacity"], token);
-              return isSemanticColor || wantedTypes;
-            }
-          }
-        ],
-        options: {
-          outputReferences: (token, options) => {
-            const include = pathStartsWithOneOf(["border-radius"], token);
-            const isWantedSize = pathStartsWithOneOf(["size", "_size"], token) && isDigit(token.path[1]);
-            return (include || isWantedSize) && outputReferencesFilter2(token, options);
-          }
-        }
-      }
-    }
-  };
-};
-
 // src/tokens/process/configs/typography.ts
 import { expandTypesMap } from "@tokens-studio/sd-transforms";
 var typographyVariables = ({ theme, typography: typography2 }) => {
@@ -574,6 +517,7 @@ var typographyVariables = ({ theme, typography: typography2 }) => {
           sizeRem.name,
           "ts/size/lineheight",
           "ts/typography/fontWeight",
+          "ts/size/css/letterspacing",
           typographyName.name
         ],
         files: [
@@ -761,13 +705,13 @@ var TypographyValues;
 // src/tokens/process/utils/getMultidimensionalThemes.ts
 import chalk from "chalk";
 import { kebabCase } from "change-case";
-import * as R10 from "ramda";
+import * as R8 from "ramda";
 var getMultidimensionalThemes = (processed$themes, dimensions) => {
   const verboseLogging = buildOptions?.verbose;
   const grouped$themes = groupThemes(processed$themes);
   const permutations = permutateThemes(grouped$themes);
   const ALL_DEPENDENT_ON = ["theme"];
-  const keys2 = R10.keys(grouped$themes);
+  const keys2 = R8.keys(grouped$themes);
   const nonDependentKeys = keys2.filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));
   if (verboseLogging) {
     console.log(chalk.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
@@ -793,7 +737,7 @@ function groupThemes(themes) {
   }
   return groups;
 }
-var hasUnknownProps = R10.pipe(R10.values, R10.none(R10.equals("unknown")), R10.not);
+var hasUnknownProps = R8.pipe(R8.values, R8.none(R8.equals("unknown")), R8.not);
 function permutateThemes(groups) {
   const separator = "_";
   const permutations = cartesian(Object.values(groups));
@@ -803,8 +747,8 @@ function permutateThemes(groups) {
         const { group, name, selectedTokenSets } = theme;
         let updatedPermutation = acc.permutation;
         if (group) {
-          const groupProp = R10.lensProp(group);
-          updatedPermutation = R10.set(groupProp, name, updatedPermutation);
+          const groupProp = R8.lensProp(group);
+          updatedPermutation = R8.set(groupProp, name, updatedPermutation);
         }
         const updatedName = `${String(acc.name)}${acc ? separator : ""}${name}`;
         const sets = [...acc.selectedTokenSets, ...filterTokenSets(selectedTokenSets)];
@@ -863,7 +807,6 @@ StyleDictionary.registerTransform(sizeRem);
 StyleDictionary.registerTransform(typographyName);
 StyleDictionary.registerTransform(resolveMath);
 StyleDictionary.registerTransform(unitless);
-StyleDictionary.registerFormat(jsTokens);
 for (const format of Object.values(formats)) {
   StyleDictionary.registerFormat(format);
 }
@@ -877,8 +820,7 @@ var configs = {
   warningColorVariables: colorCategoryVariables({ category: "builtin", color: "warning" }),
   infoColorVariables: colorCategoryVariables({ category: "builtin", color: "info" }),
   typographyVariables,
-  semanticVariables,
-  typescriptTokens
+  semanticVariables
 };
 var getConfigsForThemeDimensions = (getConfig, processed$themes, dimensions, options) => {
   const { tokensDir, tokenSets } = options;
@@ -894,7 +836,7 @@ var getConfigsForThemeDimensions = (getConfig, processed$themes, dimensions, opt
               obj.filePath = tokenSet;
             }
           });
-          tokenSource.tokens = R11.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
+          tokenSource.tokens = R9.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
         }
       }
     } else {
@@ -926,6 +868,7 @@ var getConfigsForThemeDimensions = (getConfig, processed$themes, dimensions, opt
 // src/tokens/process/platform.ts
 var initResult = {
   formatted: [],
+  tokens: [],
   permutation: {
     "color-scheme": "",
     "main-color": "",
@@ -936,7 +879,11 @@ var initResult = {
     typography: ""
   }
 };
-var buildOptions;
+var buildOptions = {
+  verbose: false,
+  processed$themes: [],
+  buildTokenFormats: {}
+};
 var sd = new StyleDictionary2();
 var buildConfigs = {
   typography: { getConfig: configs.typographyVariables, dimensions: ["typography"] },
@@ -969,19 +916,15 @@ var buildConfigs = {
     log: ({ permutation: { theme } }) => `${theme} - info`
   },
   semantic: { getConfig: configs.semanticVariables, dimensions: ["semantic"] }
-  // storefront: {
-  //   name: 'Storefront preview tokens',
-  //   getConfig: configs.typescriptTokens,
-  //   dimensions: ['color-scheme'],
-  //   options: { outPath: path.resolve('../../apps/storefront/tokens') },
-  //   enabled: () => buildOptions?.preview ?? false,
-  // },
 };
 async function processPlatform(options) {
   const { type, processed$themes } = options;
   const platform = "css";
   const tokenSets = type === "format" ? options.tokenSets : void 0;
   const tokensDir = type === "build" ? options.tokensDir : void 0;
+  const filteredProcessed$themes = processed$themes.filter(
+    (theme) => R10.not(theme.group === "size" && theme.name !== "medium")
+  );
   const UNSAFE_DEFAULT_COLOR = process.env.UNSAFE_DEFAULT_COLOR ?? "";
   if (UNSAFE_DEFAULT_COLOR) {
     console.warn(
@@ -1004,19 +947,16 @@ async function processPlatform(options) {
   buildOptions = options;
   buildOptions.defaultColor = UNSAFE_DEFAULT_COLOR;
   buildOptions.colorGroups = colorGroups;
-  const filteredProcessed$themes = processed$themes.filter(
-    (theme) => R12.not(theme.group === "size" && theme.name !== "medium")
-  );
-  const customColors = getCustomColors(filteredProcessed$themes, colorGroups);
   if (!buildOptions.defaultColor) {
-    const firstMainColor = R12.head(customColors);
+    const customColors = getCustomColors(filteredProcessed$themes, colorGroups);
+    const firstMainColor = R10.head(customColors);
     buildOptions.defaultColor = firstMainColor;
   }
   if (buildOptions.defaultColor) {
     console.log(`
 \u{1F3A8} Using ${chalk2.blue(buildOptions.defaultColor)} as default color`);
   }
-  const buildAndSdConfigs = R12.map((buildConfig) => {
+  const buildAndSdConfigs = R10.map((buildConfig) => {
     const sdConfigs = getConfigsForThemeDimensions(
       buildConfig.getConfig,
       filteredProcessed$themes,
@@ -1052,7 +992,7 @@ async function processPlatform(options) {
     typography: [initResult]
   };
   try {
-    for (const [buildName, { buildConfig, sdConfigs }] of R12.toPairs(buildAndSdConfigs)) {
+    for (const [buildName, { buildConfig, sdConfigs }] of R10.toPairs(buildAndSdConfigs)) {
       if (!(buildConfig.enabled?.() ?? true)) {
         continue;
       }
@@ -1064,13 +1004,16 @@ async function processPlatform(options) {
             const { config, permutation } = sdConfig;
             const modes = ["theme", ...buildConfig.dimensions];
             const modeMessage = modes.map((x) => permutation[x]).join(" - ");
-            const logMessage = R12.isNil(buildConfig.log) ? modeMessage : buildConfig?.log(sdConfig);
+            const logMessage = R10.isNil(buildConfig.log) ? modeMessage : buildConfig?.log(sdConfig);
             console.log(logMessage);
             const sdOptions = { cache: true };
             const sdExtended = await sd.extend(config);
+            const formatted = await sdExtended.formatPlatform(platform, sdOptions);
+            const tokens = (await sdExtended.getPlatformTokens(platform, sdOptions)).allTokens;
             const result = {
               permutation,
-              formatted: await sdExtended.formatPlatform(platform, sdOptions)
+              formatted,
+              tokens
             };
             return Promise.resolve(result);
           })