More organization

README.md

@@ -48,7 +48,7 @@ This should have created a build directory and it should look like this:
 │   ├── tokens.scss
 ```
 
-If you open `config/build.ts` you will see there is 1 platforms defined for web (however, we can build for android, compose, ios, and ios-swift). Each platform has a transformGroup, buildPath, and files. The buildPath and files of the platform should match up to the files what were built. The files built should look like these:
+If you open `style-dictionary/build.ts` you will see there is 1 platforms defined for web (however, we can build for android, compose, ios, and ios-swift). Each platform has a transformGroup, buildPath, and files. The buildPath and files of the platform should match up to the files what were built. The files built should look like these:
 
 **JS**
 ```js
@@ -120,7 +120,7 @@ $token-color-neutrals-100: #3A3A3F;
 ```
 
 This shows a few things happening:
-1. The build system does a deep merge of all the token JSON files defined in the `source` attribute of `config/build.ts`. This allows you to split up the token JSON files however you want.
+1. The build system does a deep merge of all the token JSON files defined in the `source` attribute of `style-dictionary/build.ts`. This allows you to split up the token JSON files however you want.
 2. The build system resolves references to other design tokens in other files as well. For example in `tokens/alias/light.json` the value `{color.neutrals.white}` gets resolved properly.
 
 ## Example Usage in Apps

package.json

@@ -18,7 +18,7 @@
   },
   "scripts": {
     "clean": "rm -rf dist",
-    "generate": "yarn clean && ts-node --esm config/build.ts",
+    "generate": "yarn clean && ts-node --esm style-dictionary/build.ts",
     "storybook": "storybook dev -p 6007",
     "test": "echo \"Error: no test specified\" && exit 1",
     "build-storybook": "storybook build"

style-dictionary/build.ts

@@ -0,0 +1,49 @@
+import StyleDictionary from 'style-dictionary';
+import { promises } from 'fs';
+import { registerTransforms, permutateThemes } from '@tokens-studio/sd-transforms';
+import { registerJavascriptNested } from './formats/registerJavascriptNested.js';
+import { registerTypescriptNestedDefinitions } from './formats/registerTypescriptNestedDefinitions.js';
+import { registerJsonFlat } from './formats/registerJsonFlat.js';
+import { getStyleDictionaryConfig } from './configs/getStyleDictionaryConfig.js'
+
+const readFile = promises.readFile;
+const buffer = await readFile('tokens/$themes.json');
+const content = buffer.toString('utf-8');
+const $themes = JSON.parse(content);
+
+// https://github.com/tokens-studio/sd-transforms
+registerTransforms(StyleDictionary);
+
+registerJavascriptNested();
+registerTypescriptNestedDefinitions();
+registerJsonFlat();
+
+async function buildTokens() {
+  const themes = permutateThemes($themes, { separator: '_' });
+  const themesKeys = Object.entries(themes);
+  const configs = themesKeys.map(([name, selectedTokenSets]) => {
+      return getStyleDictionaryConfig({
+        theme: {
+          name,
+          selectedTokenSets
+        }
+      })
+  });
+
+  for (let i=0; i < configs.length; i++) {
+    console.log('\n==============================================');
+    console.log(`Theme: ${Object.keys(themes)[i]}`);
+
+    const cfg = configs[i];
+    const sd = new StyleDictionary(cfg);
+    await sd.buildPlatform('js');
+    await sd.buildPlatform('scss');
+    await sd.buildPlatform('css');
+  }
+
+  console.log('\n==============================================');
+  console.log('\nBuild completed!');
+  console.log('\n==============================================');
+}
+
+buildTokens();

style-dictionary/configs/getStyleDictionaryConfig.ts

@@ -0,0 +1,70 @@
+import type { Config } from "style-dictionary/types";
+
+import type { StyleDictionaryOptions } from '../types';
+
+const PREFIX = 'token';
+
+export function getStyleDictionaryConfig(
+  options: StyleDictionaryOptions
+): Config {
+  const { theme } = options;
+  let buildPath;
+
+  if (theme.name === 'light' || theme.name === '') {
+    buildPath = 'dist/';
+  } else {
+    buildPath = `dist/themes/${theme.name}/`;
+  }
+
+  return {
+    // If we want to show collisions, we can change `include` to `source`.
+    include: theme.selectedTokenSets.map(tokenset => `tokens/${tokenset}.json`),
+    platforms: {
+      js: {
+        transforms: ['name/pascal', 'size/px', 'color/hex', 'ts/shadow/css/shorthand', 'ts/typography/css/shorthand'],
+        buildPath,
+        prefix: `${PREFIX}-`,
+        files: [
+          {
+            destination: 'tokens.es6.js',
+            format: 'javascript/es6'
+          },
+          {
+            destination: 'tokens.d.ts',
+            format: 'javascript/es6'
+          },
+          {
+            destination: 'index.js',
+            format: 'javascript/nested'
+          },
+          {
+            destination: 'index.d.ts',
+            format: 'typescript/nested/definitions'
+          }
+        ]
+      },
+      scss: {
+        transforms: ['name/kebab', 'time/seconds', 'size/px', 'color/css', 'ts/shadow/css/shorthand', 'ts/typography/css/shorthand'],
+        buildPath,
+        prefix: `${PREFIX}-`,
+        files: [
+          {
+            destination: 'tokens.scss',
+            format: 'scss/variables',
+          }
+        ]
+      },
+      css: {
+        transforms: ['name/kebab', 'time/seconds', 'size/px', 'color/css', 'ts/shadow/css/shorthand', 'ts/typography/css/shorthand'],
+        buildPath,
+        prefix: `${PREFIX}-`,
+        files: [
+          {
+            destination: 'tokens.css',
+            format: 'css/variables',
+          }
+        ]
+      }
+    }
+  };
+}

tsconfig.json

@@ -16,7 +16,7 @@
     }
   },
   "include": [
-    "config/**/*"
+    "style-dictionary/**/*"
   ],
   "exclude": [
     "node_modules",