moved tokens formats

digdir · Jun 4, 2024 · ce9b163 · ce9b163
1 parent 81e87a1
commit ce9b163
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 53 deletions.
diff --git a/packages/cli/src/tokens/build.ts b/packages/cli/src/tokens/build.ts
@@ -8,7 +8,8 @@ import type { Config, TransformedToken } from 'style-dictionary/types';
 import * as R from 'ramda';
 
 import { nameKebab, typographyShorthand, sizeRem } from './transformers.js';
-import { groupedTokens, scopedReferenceVariables } from './formatters.js';
+import { groupedTokens } from './formats/groupedTokens.js';
+import { scopedReferenceVariables } from './formats/scopedReferenceVariables.js';
 
 void registerTransforms(StyleDictionary);
 
@@ -92,7 +93,7 @@ const getStorefrontConfig = ({ fileName = 'unknown', buildPath = 'unknown' }): C
           {
             destination: `${fileName}.ts`,
             format: groupedTokens.name,
-            filter: (token) => {
+            filter: (token: TransformedToken) => {
               if (
                 R.test(/accent|neutral|brand1|brand2|brand3|success|danger|warning/, token.name) ||
                 R.includes('semantic', token.filePath)
@@ -124,26 +125,27 @@ type Options = {
 const sd = new StyleDictionary();
 
 export async function run(options: Options): Promise<void> {
-  const tokensPath = options.tokens;
-  const storefrontTokensOutPath = path.resolve('../../apps/storefront/tokens');
-  const packageTokensOutPath = path.resolve(options.out);
+  const tokensDir = options.tokens;
+  const storefrontOutDir = path.resolve('../../apps/storefront/tokens');
+  const tokensOutDir = path.resolve(options.out);
 
-  const $themes = JSON.parse(fs.readFileSync(path.resolve(`${tokensPath}/$themes.json`), 'utf-8')) as ThemeObject[];
+  const $themes = JSON.parse(fs.readFileSync(path.resolve(`${tokensDir}/$themes.json`), 'utf-8')) as ThemeObject[];
 
   const themes = permutateThemes($themes, {
     separator,
   }) as Record<string, string[]>;
 
+  console.log(themes);
+
   const getConfigs = (configCallback: GetConfig, outPath: string) =>
     Object.entries(themes)
       .map(([name, tokensets]) => {
-        const updatedSets = tokensets.map((x) => `${tokensPath}/${x}.json`);
+        const setsWithPaths = tokensets.map((x) => `${tokensDir}/${x}.json`);
 
         const [fileName, folderName] = processThemeName(name);
 
         const paritionPrimitives = /(?!.*global\.json).*primitives.*/;
-        // const paritionPrimitives = /.*primitives.*/;
-        const [source, include] = R.partition(R.test(paritionPrimitives), updatedSets);
+        const [source, include] = R.partition(R.test(paritionPrimitives), setsWithPaths);
 
         const config_ = configCallback({
           fileName: fileName,
@@ -152,7 +154,7 @@ export async function run(options: Options): Promise<void> {
 
         const config = {
           ...config_,
-          source: source,
+          source,
           include,
         };
 
@@ -162,12 +164,12 @@ export async function run(options: Options): Promise<void> {
       })
       .sort();
 
-  const tokenConfigs = getConfigs(getCSSConfig, packageTokensOutPath);
-  const storefrontConfigs = getConfigs(getStorefrontConfig, storefrontTokensOutPath);
+  const tokenConfigs = getConfigs(getCSSConfig, tokensOutDir);
+  const storefrontConfigs = getConfigs(getStorefrontConfig, storefrontOutDir);
 
   if (tokenConfigs.length > 0) {
     console.log('🍱 Staring token builder');
-    console.log('➡️  Tokens path: ', tokensPath);
+    console.log('➡️  Tokens path: ', tokensDir);
 
     console.log('\n🏗️  Start building CSS tokens');
     await Promise.all(

diff --git a/packages/cli/src/tokens/formats/groupedTokens.ts b/packages/cli/src/tokens/formats/groupedTokens.ts
@@ -0,0 +1,42 @@
+import * as R from 'ramda';
+import type { TransformedToken, Format } from 'style-dictionary/types';
+import { fileHeader, createPropertyFormatter } from 'style-dictionary/utils';
+
+const groupByType = R.groupBy((token: TransformedToken) => token.type as string);
+
+/** Add token name with prefix to list for removal */
+const removeUnwatedTokens = R.filter(
+  (token: TransformedToken) => !['fds-base_spacing', 'fds-base_sizing'].includes(token.name),
+);
+
+const toCssVarName = R.pipe(R.split(':'), R.head, R.trim);
+
+/**
+ * Format for displaying tokens in storefront
+ */
+export const groupedTokens: Format = {
+  name: 'groupedTokens',
+  format: async function ({ dictionary, file }) {
+    const format = createPropertyFormatter({
+      dictionary,
+      format: 'css',
+    });
+
+    const formatTokens = R.map((token: TransformedToken) => ({
+      ...token,
+      name: toCssVarName(format(token)),
+    }));
+
+    const processTokens = R.pipe(removeUnwatedTokens, formatTokens, groupByType);
+
+    const tokens = processTokens(dictionary.allTokens);
+
+    const content = Object.entries(tokens)
+      .map(
+        ([name, token]) => `export const  ${name} = ${JSON.stringify(token, null, 2).replace(/"([^"]+)":/g, '$1:')} \n`,
+      )
+      .join('\n');
+
+    return fileHeader({ file }).then((fileHeaderText) => fileHeaderText + content);
+  },
+};
diff --git a/packages/cli/src/tokens/formatters.ts → ...okens/formats/scopedReferenceVariables.ts b/packages/cli/src/tokens/formatters.ts → ...okens/formats/scopedReferenceVariables.ts
@@ -1,4 +1,3 @@
-import * as R from 'ramda';
 import type { TransformedToken, Format } from 'style-dictionary/types';
 import { fileHeader, createPropertyFormatter, usesReferences, getReferences } from 'style-dictionary/utils';
 
@@ -69,42 +68,3 @@ ${tokens.join('\n')}
     );
   },
 };
-
-const groupByType = R.groupBy((token: TransformedToken) => token.type as string);
-
-/** Add token name with prefix to list for removal */
-const removeUnwatedTokens = R.filter(
-  (token: TransformedToken) => !['fds-base_spacing', 'fds-base_sizing'].includes(token.name),
-);
-
-const toCssVarName = R.pipe(R.split(':'), R.head, R.trim);
-
-/**
- * Format for displaying tokens in storefront
- */
-export const groupedTokens: Format = {
-  name: 'groupedTokens',
-  format: async function ({ dictionary, file }) {
-    const format = createPropertyFormatter({
-      dictionary,
-      format: 'css',
-    });
-
-    const formatTokens = R.map((token: TransformedToken) => ({
-      ...token,
-      name: toCssVarName(format(token)),
-    }));
-
-    const processTokens = R.pipe(removeUnwatedTokens, formatTokens, groupByType);
-
-    const tokens = processTokens(dictionary.allTokens);
-
-    const content = Object.entries(tokens)
-      .map(
-        ([name, token]) => `export const  ${name} = ${JSON.stringify(token, null, 2).replace(/"([^"]+)":/g, '$1:')} \n`,
-      )
-      .join('\n');
-
-    return fileHeader({ file }).then((fileHeaderText) => fileHeaderText + content);
-  },
-};