feat(design-tokens): ✨ build several token-sets for different themes

Author: epodivilov

packages/design-tokens/package.json

@@ -2,15 +2,28 @@
   "name": "@3jane/design-tokens",
   "version": "0.0.0",
   "type": "module",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
   "scripts": {
-    "build": "node ./scripts/build.mjs --input './src/**/*.json' --output './dist/tokens.json'",
+    "build": "node ./scripts/build.mjs --input src/\\$themes.json --output ./dist",
     "test": "glob -c \"tsx --test --no-warnings\" \"./tests/**/*.test.ts\""
   },
   "devDependencies": {
     "@tokens-studio/sd-transforms": "^0.14.2",
     "ajv": "^8.16.0",
     "commander": "^12.1.0",
     "glob": "^10.4.2",
+    "lodash.camelcase": "^4.3.0",
     "lodash.setwith": "^4.3.2",
     "style-dictionary": "4.0.0-prerelease.13",
     "tsx": "^4.16.0",

packages/design-tokens/scripts/build.mjs

@@ -1,50 +1,124 @@
+import { readFile, writeFile } from "fs/promises";
+import { resolve, join, dirname, relative } from "path";
+import { Command } from "commander";
 import StyleDictionary from "style-dictionary";
 import { registerTransforms } from "@tokens-studio/sd-transforms";
-import { Command } from "commander";
-import path from "path";
 import setWith from "lodash.setwith";
+import camelCase from "lodash.camelcase";
 
 const program = new Command();
 
 program
-  .option("--input <path>", "Input path for tokens")
-  .option("--output <path>", "Output path for generated file")
+  .option("--input <path>", "input path to $themes.json")
+  .option("--output <directory>", "output directory")
   .parse(process.argv);
 
 const options = program.opts();
 
-const inputPath = options.input || "./src/**/*.json";
-const outputPath = options.output || "./dist/tokens.json";
-
-const outputDir = path.dirname(outputPath);
-const outputFile = path.basename(outputPath);
-
-await registerTransforms(StyleDictionary, {});
-
-StyleDictionary.registerFormat({
-  name: "minimalJSON",
-  formatter: ({ dictionary }) => {
-    const out = {};
-    dictionary.allTokens.map((t) => setWith(out, t.path, t.value, Object));
-    return JSON.stringify(out, null, 4);
-  },
-});
-
-const sd = new StyleDictionary({
-  source: [inputPath],
-  platforms: {
-    js: {
-      buildPath: path.join(outputDir, "/"),
-      transformGroup: "tokens-studio",
-      files: [
-        {
-          destination: outputFile,
-          format: "minimalJSON",
-        },
-      ],
+if (!options.input || !options.output) {
+  console.error("Both --input and --output options are required.");
+  process.exit(1);
+}
+
+const inputPath = resolve(process.cwd(), options.input);
+const outputDir = resolve(process.cwd(), options.output);
+
+(async () => {
+  StyleDictionary.registerTransform({
+    name: "name/cti/custom",
+    type: "name",
+    transformer: function (token, config) {
+      return camelCase(
+        [config.prefix]
+          .concat(token.path.map((it) => it.replace("-", "Minus")))
+          .join(" ")
+      );
     },
-  },
-});
+  });
+
+  StyleDictionary.registerFormat({
+    name: "minimalJSON",
+    formatter: ({ dictionary }) =>
+      JSON.stringify(
+        dictionary.allTokens.reduce((out, t) => {
+          // if (["semantics", "composites"].includes(t.path[0]) === false) {
+          //   return out;
+          // }
+
+          return setWith(out, t.path, t.value, Object);
+        }, {}),
+        null,
+        2
+      ),
+  });
+
+  registerTransforms(StyleDictionary, { casing: "custom" });
+
+  try {
+    const blob = await readFile(inputPath, "utf8");
+    const data = JSON.parse(blob);
+
+    const result = data.map((item) => {
+      const name = item.name;
+      const selectedTokenSets = item.selectedTokenSets || {};
+
+      const sources = Object.keys(selectedTokenSets).map((key) =>
+        relative(process.cwd(), join(dirname(inputPath), `${key}.json`))
+      );
+
+      return {
+        name,
+        sources,
+      };
+    });
+
+    const modules = await Promise.all(
+      result.map(async ({ name, sources }) => {
+        const exportedName = camelCase(name);
+        const sd = new StyleDictionary({
+          source: sources,
+          platforms: {
+            js: {
+              buildPath: join(relative(process.cwd(), outputDir), "/"),
+              transformGroup: "tokens-studio",
+              transform: ["name/with-minus"],
+              files: [
+                {
+                  destination: `${name}.json`,
+                  format: "minimalJSON",
+                },
+              ],
+            },
+          },
+        });
+
+        await sd.cleanAllPlatforms();
+        await sd.buildAllPlatforms();
+
+        return {
+          name: exportedName,
+          file: `./${name}.json`,
+        };
+      })
+    );
+
+    const es = modules.map(
+      ({ name, file }) => `export { default as ${name} } from "${file}";`
+    );
+    const cjs = modules.map(
+      ({ name, file }) => `exports.${name} = require("${file}");`
+    );
+    const types = modules.map(
+      ({ name, file }) =>
+        `export declare const ${name}: typeof import("${file}");`
+    );
 
-await sd.cleanAllPlatforms();
-await sd.buildAllPlatforms();
+    await Promise.all([
+      writeFile(join(outputDir, "index.js"), es.join("\n"), "utf8"),
+      writeFile(join(outputDir, "index.cjs.js"), cjs.join("\n"), "utf8"),
+      writeFile(join(outputDir, "index.d.ts"), types.join("\n"), "utf8"),
+    ]);
+  } catch (error) {
+    console.error("Error processing the files:", error);
+  }
+})();

packages/design-tokens/tests/validate-tokens.test.ts

@@ -2,12 +2,17 @@ import { test } from "node:test";
 import { equal } from "node:assert";
 import Ajv from "ajv";
 
-import tokens from "../dist/tokens.json";
 import schema from "./tokens-schema.json";
 
-test("tokens should be valid structure", () => {
-  const ajv = new Ajv();
-  const validate = ajv.compile(schema);
+import * as tokens from "../dist";
 
-  equal(validate(tokens), true);
+const ajv = new Ajv();
+const validate = ajv.compile(schema);
+
+test("light tokens should be valid structure", () => {
+  equal(validate(tokens.light), true);
+});
+
+test("light tokens should be valid structure", () => {
+  equal(validate(tokens.dark), true);
 });

packages/mui-themes/src/semantic/index.ts

@@ -1,4 +1,4 @@
-import tokens from "@3jane/design-tokens/dist/tokens.json";
+import * as tokens from "@3jane/design-tokens";
 
 export const semantic = {
   color: {