feat!: refactor token transformer

BREAKING CHANGE: new platform output files. Replaces “headless” with “global” and removes “calcite” from filenames.

Significantly reduces the filesize of platform output files.
Now supports composite color mode tokens and typography tokens
Adds multi-file output, including ./index files

packages/calcite-design-tokens/support/run.ts

@@ -1,16 +1,23 @@
-import { readFileSync } from "fs";
-import { resolve, dirname } from "path";
-import { fileURLToPath } from "url";
-import { getThemes } from "./token-transformer/getThemes.js";
-import { run } from "./token-transformer/sd-run.js";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
+import { run as styleDictionaryRunner } from "./token-transformer/sd-run.js";
+// TODO; make CLI to load config
+import { config } from "../src/$config.js";
+import { CalciteTokenTransformConfig } from "./types/config.js";
 
+const runConfig: CalciteTokenTransformConfig = config;
 /**
- * Get all themes defined int the tokens/$themes.json and generate a Style Dictionary output for each theme
+ * Get all themes defined int the src/$themes.json and generate a Style Dictionary output for each theme
  */
-const rawData = readFileSync(resolve(__dirname, "../src/$themes.json"), { encoding: "utf-8" });
-const data = JSON.parse(rawData);
-
-getThemes(data).then((themes) => Promise.all(themes.map((theme) => run("src", "dist", theme))));
+// const rawData = readFileSync(join(tokensDir, "$themes.json"), { encoding: "utf-8" });
+// const data = JSON.parse(rawData);
+// const files = await getThemes(data);
+Promise.all(
+  runConfig.files.map(({ name, source, references, options }) =>
+    styleDictionaryRunner({
+      name: name,
+      source: source,
+      include: references,
+      options: { ...runConfig.options, ...options },
+      output: config.output,
+    })
+  )
+);

packages/calcite-design-tokens/support/token-transformer/contextFiles/contextStreamClose.ts

@@ -0,0 +1,95 @@
+import { join } from "path";
+import { readFile, writeFile } from "fs/promises";
+import { default as StyleDictionary } from "style-dictionary";
+import { Platform, PlatformUnion } from "../../types/platform.js";
+import { CalciteConfigOutput } from "../../types/config.js";
+import { TokenColorSchemeUnion, TokenColorScheme } from "../../types/tokenTypes/colorScheme.js";
+
+export async function contextStreamClose(
+  format: PlatformUnion,
+  context: string,
+  output: CalciteConfigOutput
+): Promise<void> {
+  const buildPath = `${output.dir}/${format}/`;
+  const colorContextPaths: Partial<Record<TokenColorSchemeUnion, string>> = {
+    light: join(output.dir, "css", `light.css`),
+    dark: join(output.dir, "css", `dark.css`),
+  };
+
+  switch (format) {
+    case Platform.CSS:
+      if (context === "classes") {
+        const colorContextFiles: Partial<Record<TokenColorSchemeUnion, string>> = {
+          light: await readFile(colorContextPaths[TokenColorScheme.LIGHT], "utf-8"),
+          dark: await readFile(colorContextPaths[TokenColorScheme.DARK], "utf-8"),
+        };
+        const contextClass = Object.entries(colorContextFiles).map(([contextKey, str]) => {
+          const newStr = str
+            .slice(str.indexOf("--"))
+            .replaceAll(/(:root)|\{|\}/g, "")
+            .trim();
+          const colorContextCustomProps = newStr.split("\n").filter((d) => d && d.length > 0);
+          return `.calcite-mode-${contextKey} {\n\t` + colorContextCustomProps.join("\n\t") + `\n}`;
+        });
+
+        const clsFilePath = join(buildPath, "classes.css");
+        const rawClsFileDataBuffer = await readFile(clsFilePath);
+
+        const bufferClassContent = Buffer.concat([
+          Buffer.from(StyleDictionary.formatHelpers.fileHeader({ file: { destination: clsFilePath } })),
+          rawClsFileDataBuffer,
+          Buffer.from(contextClass.join("\n") + "\n"),
+        ]);
+
+        await writeFile(clsFilePath, bufferClassContent);
+      } else {
+        const colorContextPath = join(buildPath, `${context}.css`);
+        const rawData = await readFile(colorContextPath, "utf-8");
+        const str = rawData
+          .slice(rawData.indexOf("--"))
+          .replaceAll(/(:root)|\{|\}/g, "")
+          .trim();
+        const strArray = str.split("\n");
+        const newStr =
+          StyleDictionary.formatHelpers.fileHeader({ file: { destination: colorContextPath } }) +
+          `:root {\n\t` +
+          strArray.join("\n\t") +
+          `\n}\n`;
+        await writeFile(colorContextPath, newStr);
+      }
+      break;
+    case Platform.SCSS:
+    case Platform.SASS:
+      if (context === "mixins") {
+        const colorContextFiles: Partial<Record<TokenColorSchemeUnion, string>> = {
+          light: await readFile(colorContextPaths[TokenColorScheme.LIGHT], "utf-8"),
+          dark: await readFile(colorContextPaths[TokenColorScheme.DARK], "utf-8"),
+        };
+        const contextMixin = Object.entries(colorContextFiles).map(([contextKey, str]) => {
+          const newStr = str
+            .slice(str.indexOf("--"))
+            .replaceAll(/(:root)|\{|\}/g, "")
+            .trim();
+          const colorContextCustomProps = newStr
+            .split("\n")
+            .filter((d) => d && d.length > 0)
+            .map((p) => p.trim());
+          return `@mixin calcite-mode-${contextKey} {\n\t` + colorContextCustomProps.join("\n\t") + `\n}`;
+        });
+
+        const mixinFilePath = join(buildPath, `mixins.${format}`);
+        const rawClsFileDataBuffer = await readFile(mixinFilePath);
+
+        const bufferClassContent = Buffer.concat([
+          Buffer.from(StyleDictionary.formatHelpers.fileHeader({ file: { destination: mixinFilePath } })),
+          rawClsFileDataBuffer,
+          Buffer.from(contextMixin.join("\n") + "\n"),
+        ]);
+
+        await writeFile(mixinFilePath, bufferClassContent);
+      }
+      break;
+    default:
+      break;
+  }
+}

packages/calcite-design-tokens/support/token-transformer/contextFiles/writeStream.ts

@@ -0,0 +1,73 @@
+import { WriteStream, createWriteStream } from "fs";
+import { join } from "path";
+import { PlatformUnion } from "../../types/platform";
+
+export type WriteStreamMap = Partial<Record<string, WriteStream>>;
+export type WriteStreamsMap = Partial<Record<PlatformUnion, WriteStreamMap>>;
+export type EventMap = Record<string, (format: PlatformUnion, context: string, streams: WriteStreamsMap) => void>;
+export class ContextStreams {
+  streams: WriteStreamsMap;
+
+  events: EventMap;
+
+  constructor(events: EventMap) {
+    this.streams = {};
+    this.events = events;
+  }
+
+  getStreams(
+    format: PlatformUnion,
+    context: string,
+    buildPath: string
+  ): WriteStream | WriteStreamMap | WriteStreamsMap {
+    if (!format) {
+      return this.streams;
+    }
+
+    if (!context) {
+      if (!this.streams[format]) {
+        this.streams[format] = {};
+      }
+      return this.streams[format];
+    }
+
+    if (!this.streams[format][context]) {
+      this.streams[format][context] = this.createStream(format, context, buildPath);
+    }
+
+    return this.streams[format][context];
+  }
+
+  getStream(format: PlatformUnion, context: string, buildPath: string): WriteStream {
+    if (!this.streams[format]) {
+      this.streams[format] = {};
+    }
+
+    if (!this.streams[format][context]) {
+      this.streams[format][context] = this.createStream(format, context, buildPath);
+    }
+
+    return this.streams[format][context];
+  }
+
+  add(str: string, args: { format: PlatformUnion; context: string; buildPath: string }): void {
+    const stream = this.getStream(args.format, args.context, args.buildPath);
+    stream.write(str);
+    stream.write("\n");
+  }
+
+  createStream(format: PlatformUnion, context: string, buildPath: string): WriteStream {
+    const path = join(
+      buildPath.includes(format) ? buildPath.slice(0, buildPath.indexOf(format)) : buildPath,
+      format,
+      `${context}.${format}`
+    );
+    const newStream = createWriteStream(path, { autoClose: true });
+
+    Object.entries(this.events).forEach(([event, cb]) => {
+      newStream.on(event, () => cb(format, context, this.streams));
+    });
+
+    return newStream;
+  }
+}