@terrazzo/plugin-tailwind 2.0.0-beta.3 → 2.0.0-beta.5

package/CHANGELOG.md

@@ -4,12 +4,19 @@
 
 ### Minor Changes
 
+- Fully supports DTCG 2025.10 and resolvers.
+
+- ⚠️ Breaking change: plugin-tailwind now uses [Custom variants](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) which allow for closer 1:1 translation from tokens.
+  - This results in a config change from `modeVariations` → `customVariants`.
+
 - [#530](https://github.com/terrazzoapp/terrazzo/pull/530) [`370ed7b`](https://github.com/terrazzoapp/terrazzo/commit/370ed7b0f578a64824124145d7f4936536b37bb3) Thanks [@drwpow](https://github.com/drwpow)! - ⚠️ Breaking change: lint on plugins no longer runs on individual files, rather, the full set once merged.
 
   If your lint plugin is not using the `src` context value, no changes are needed. If it is, you’ll need to instead read from the `sources` array, and look up sources with a token’s `source.loc` filename manually. This change was because lint rules now run on all files in one pass, essentially.
 
 - [#530](https://github.com/terrazzoapp/terrazzo/pull/530) [`370ed7b`](https://github.com/terrazzoapp/terrazzo/commit/370ed7b0f578a64824124145d7f4936536b37bb3) Thanks [@drwpow](https://github.com/drwpow)! - ⚠️ [Plugin API] Minor breaking change: token.originalValue may be undefined for tokens created with $ref. This shouldn’t affect any tokens or plugins not using $refs. But going forward this value will be missing if the token was created dynamically via $ref.
 
+- [#646](https://github.com/terrazzoapp/terrazzo/pull/646) [`fd9de2b`](https://github.com/terrazzoapp/terrazzo/commit/fd9de2b4a93f42e1f1bfd81cf4a63475b506488d) Thanks [@9rotama](https://github.com/9rotama)! - feat: add template option to plugin-tailwind
+
 ### Patch Changes
 
 - [#530](https://github.com/terrazzoapp/terrazzo/pull/530) [`370ed7b`](https://github.com/terrazzoapp/terrazzo/commit/370ed7b0f578a64824124145d7f4936536b37bb3) Thanks [@drwpow](https://github.com/drwpow)! - Validation moved to lint rules, which means token validation can be individually configured, and optionally extended.

package/dist/index.d.ts

@@ -1,29 +1,47 @@
 import { Plugin } from "@terrazzo/parser";
 
 //#region src/lib.d.ts
+declare const FORMAT_ID = "tailwind";
+declare const PLUGIN_NAME = "@terrazzo/plugin-tailwind";
+type ResolverInput = Record<string, string>;
 interface TailwindPluginOptions {
   /**
    * Filename to output.
    * @default "tailwind-theme.css"
    */
   filename?: string;
+  /**
+   * Path to a template file. The template should contain `@terrazzo-slot;`
+   * which will be replaced with the generated theme.
+   */
+  template?: string;
   /** @see https://tailwindcss.com/docs/theme */
-  theme: Record<string, any>;
-  /** Array of mapping variants to DTCG modes. */
-  modeVariants?: {
-    variant: string;
-    mode: string;
-  }[];
+  theme: Record<string, unknown>;
+  /** Default permutation */
+  defaultTheme?: ResolverInput;
+  /**
+   * Associate Tailwind custom variants with Resolver permutations
+   * @see https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually
+   */
+  customVariants?: {
+    [name: string]: {
+      /** The CSS selector to apply to this variant */selector: string; /** The resolver input to load for this custom variant */
+      input: ResolverInput;
+    };
+  };
 }
 /** Flatten an arbitrarily-nested object */
 declare function flattenThemeObj(themeObj: Record<string, unknown>): {
   path: string[];
   value: string | string[];
 }[];
+declare const FILE_HEADER = "/* -------------------------------------------\n *  Autogenerated by \u26CB Terrazzo. DO NOT EDIT!\n * ------------------------------------------- */";
+declare function buildFileHeader(templatePath?: string): string;
+declare const TERRAZZO_SLOT = "@terrazzo-slot;";
+declare function applyTemplate(template: string, generatedTheme: string): string;
 //#endregion
 //#region src/index.d.ts
-declare const FORMAT_ID = "tailwind";
 declare function pluginTailwind(options: TailwindPluginOptions): Plugin;
 //#endregion
-export { FORMAT_ID, TailwindPluginOptions, pluginTailwind as default, flattenThemeObj };
+export { FILE_HEADER, FORMAT_ID, PLUGIN_NAME, ResolverInput, TERRAZZO_SLOT, TailwindPluginOptions, applyTemplate, buildFileHeader, pluginTailwind as default, flattenThemeObj };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../src/lib.ts","../src/index.ts"],"mappings":";;;UAAiB,qBAAA;;;AAAjB;;EAKE,QAAA;EAEa;EAAb,KAAA,EAAO,MAAA;EAAP;EAEA,YAAA;IAAiB,OAAA;IAAiB,IAAA;EAAA;AAAA;;iBAIpB,eAAA,CAAgB,QAAA,EAAU,MAAA;EAA4B,IAAA;EAAgB,KAAA;AAAA;;;cCRzE,SAAA;AAAA,iBAIW,cAAA,CAAe,OAAA,EAAS,qBAAA,GAAwB,MAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/lib.ts","../src/index.ts"],"mappings":";;;cAAa,SAAA;AAAA,cACA,WAAA;AAAA,KAED,aAAA,GAAgB,MAAA;AAAA,UAEX,qBAAA;EALK;;;;EAUpB,QAAA;EATsB;;;;EActB,QAAA;EAZuB;EAcvB,KAAA,EAAO,MAAA;EAdmB;EAgB1B,YAAA,GAAe,aAAA;EAdA;;;;EAmBf,cAAA;IAAA,CACG,IAAA;MAIqB,gDAFpB,QAAA,UAjBJ;MAmBI,KAAA,EAAO,aAAA;IAAA;EAAA;AAAA;;iBAMG,eAAA,CAAgB,QAAA,EAAU,MAAA;EAA4B,IAAA;EAAgB,KAAA;AAAA;AAAA,cAuBzE,WAAA;AAAA,iBAIG,eAAA,CAAgB,YAAA;AAAA,cAUnB,aAAA;AAAA,iBAEG,aAAA,CAAc,QAAA,UAAkB,cAAA;;;iBCvDxB,cAAA,CAAe,OAAA,EAAS,qBAAA,GAAwB,MAAA"}

package/dist/index.js

@@ -1,7 +1,12 @@
+import fsSync from "node:fs";
+import fs from "node:fs/promises";
+import { fileURLToPath } from "node:url";
 import { FORMAT_ID as FORMAT_ID$1 } from "@terrazzo/plugin-css";
 import { makeCSSVar } from "@terrazzo/token-tools/css";
 
 //#region src/lib.ts
+const FORMAT_ID = "tailwind";
+const PLUGIN_NAME = "@terrazzo/plugin-tailwind";
 /** Flatten an arbitrarily-nested object */
 function flattenThemeObj(themeObj) {
 	const result = [];
@@ -20,69 +25,128 @@ function flattenThemeObj(themeObj) {
 	traverse(themeObj, []);
 	return result;
 }
+const FILE_HEADER = `/* -------------------------------------------
+ *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
+ * ------------------------------------------- */`;
+function buildFileHeader(templatePath) {
+	if (templatePath) return `/* -------------------------------------------
+ *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
+ *  template: ${templatePath}
+ * ------------------------------------------- */`;
+	return FILE_HEADER;
+}
+const TERRAZZO_SLOT = "@terrazzo-slot;";
+function applyTemplate(template, generatedTheme) {
+	if (!template.includes(TERRAZZO_SLOT)) throw new Error(`Template must contain "${TERRAZZO_SLOT}" directive`);
+	return template.replace(/@terrazzo-slot;(\r?\n)+/, `${generatedTheme.trimEnd()}\n\n`);
+}
 
 //#endregion
 //#region src/index.ts
-const FORMAT_ID = "tailwind";
+const DEFAULT_THEME = ".";
 function pluginTailwind(options) {
-	const filename = options?.filename ?? options?.fileName ?? "tailwind-theme.css";
+	const filename = options?.filename ?? "tailwind-theme.css";
+	const variations = {
+		[DEFAULT_THEME]: {
+			selector: "",
+			input: options.defaultTheme ?? { tzMode: "." }
+		},
+		...options?.customVariants
+	};
+	let cwd;
+	const msg = {
+		group: "plugin",
+		label: PLUGIN_NAME
+	};
 	return {
-		name: "@terrazzo/plugin-tailwind",
+		name: PLUGIN_NAME,
 		enforce: "post",
-		config(config) {
-			if (!config.plugins.some((p) => p.name === "@terrazzo/plugin-css")) throw new Error("@terrazzo/plugin-css missing! Please install and add to the plugins array to use the Tailwind plugin.");
-			if (!options || !options.theme) throw new Error("Missing Tailwind `theme` option.");
+		config(config, { logger }) {
+			if (!config.plugins.some((p) => p.name === "@terrazzo/plugin-css")) logger.error({
+				...msg,
+				message: "@terrazzo/plugin-css missing! Please install and add to the plugins array to use the Tailwind plugin."
+			});
+			if (!options || !options.theme) logger.error({
+				...msg,
+				message: "Missing Tailwind `theme` option."
+			});
+			if (options && "modeVariants" in options) logger.error({
+				...msg,
+				message: "Migrate \"modeVariants\" to \"variants\" in config (see docs)"
+			});
+			cwd = new URL("./", config.outDir);
+			if (options?.template && !fsSync.existsSync(new URL(options.template, cwd))) logger.error({
+				...msg,
+				message: `Could not locate template ${fileURLToPath(new URL(options.template, cwd))}. Does the file exist?`
+			});
 		},
-		async transform({ getTransforms, setTransform }) {
-			const variants = [{
-				variant: ".",
-				mode: "."
-			}, ...options?.modeVariants ?? []];
-			for (const { variant, mode } of variants) {
-				const flatTheme = flattenThemeObj(options.theme);
+		async transform({ getTransforms, setTransform, context: { logger } }) {
+			const flatTheme = flattenThemeObj(options.theme);
+			for (const { input } of Object.values(variations)) {
+				const query = getTokenQuery(input);
 				for (const { path, value } of flatTheme) {
-					const tokens = getTransforms({
+					const variantTokens = getTransforms({
+						...query,
 						format: FORMAT_ID$1,
-						id: value,
-						mode
+						id: value
+					});
+					if (!variantTokens.length) logger.warn({
+						...msg,
+						message: `${value} matched 0 tokens`
 					});
-					for (const token of tokens) {
+					for (const token of variantTokens) {
 						let relName = token.id.split(".").at(-1);
 						for (const subgroup of [...Array.isArray(value) ? value : [value]]) {
 							const match = subgroup.replace(/\*.*/, "");
 							relName = token.id.replace(match, "");
 						}
 						setTransform(token.id, {
+							...query,
 							format: FORMAT_ID,
 							localID: makeCSSVar(`${path.join("-")}-${relName.replace(/\./g, "-")}`),
-							value: typeof token.value === "object" ? token.value["."] : token.value,
-							mode: variant
+							value: typeof token.value === "object" ? token.value["."] : token.value
 						});
 					}
 				}
 			}
 		},
 		async build({ getTransforms, outputFile }) {
-			const output = ["@import \"tailwindcss\";", ""];
-			const variants = { ".": [] };
-			for (const token of getTransforms({
-				format: FORMAT_ID,
-				mode: "*"
-			})) {
-				const { localID, value, mode } = token;
-				if (!variants[mode]) variants[mode] = [];
-				variants[mode].push(`${localID}: ${value};`);
+			let generatedTheme = "";
+			for (const [variant, { input, selector }] of Object.entries(variations)) {
+				if (generatedTheme) generatedTheme += "\n";
+				generatedTheme += `${variant === DEFAULT_THEME ? "@theme" : `@custom-variant ${variant} (${selector})`} {\n`;
+				for (const token of getTransforms({
+					...getTokenQuery(input),
+					format: FORMAT_ID
+				})) generatedTheme += `  ${token.localID}: ${token.value};\n`;
+				generatedTheme += "}\n";
 			}
-			for (const [variant, values] of Object.entries(variants)) {
-				output.push(variant === "." ? "@theme {" : `@variant ${variant} {`);
-				for (const value of values) output.push(`  ${value}`);
-				output.push("}", "");
+			let finalOutput = "";
+			if (options.template) {
+				const templateUrl = new URL(options.template, cwd);
+				const templateContent = await fs.readFile(fileURLToPath(templateUrl), "utf8");
+				finalOutput += applyTemplate(templateContent, generatedTheme);
+			} else {
+				finalOutput += "@import \"tailwindcss\";\n\n";
+				finalOutput += generatedTheme;
 			}
-			outputFile(filename, output.join("\n"));
+			outputFile(filename, [
+				buildFileHeader(options.template),
+				"",
+				finalOutput
+			].join("\n"));
 		}
 	};
 }
+/** Convert modes to inputs */
+function isLegacyModes(input) {
+	return Object.keys(input).length === 0 && "tzMode" in input;
+}
+/** Build query for both resolvers and legacy modes */
+function getTokenQuery(input) {
+	return isLegacyModes(input) ? { mode: input.tzMode ?? "." } : { input };
+}
 
 //#endregion
-export { FORMAT_ID, pluginTailwind as default, flattenThemeObj };
+export { FILE_HEADER, FORMAT_ID, PLUGIN_NAME, TERRAZZO_SLOT, applyTemplate, buildFileHeader, pluginTailwind as default, flattenThemeObj };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["FORMAT_CSS"],"sources":["../src/lib.ts","../src/index.ts"],"sourcesContent":["export interface TailwindPluginOptions {\n  /**\n   * Filename to output.\n   * @default \"tailwind-theme.css\"\n   */\n  filename?: string;\n  /** @see https://tailwindcss.com/docs/theme */\n  theme: Record<string, any>;\n  /** Array of mapping variants to DTCG modes. */\n  modeVariants?: { variant: string; mode: string }[];\n}\n\n/** Flatten an arbitrarily-nested object */\nexport function flattenThemeObj(themeObj: Record<string, unknown>): { path: string[]; value: string | string[] }[] {\n  const result: { path: string[]; value: string | string[] }[] = [];\n\n  function traverse(obj: Record<string, unknown>, path: string[]) {\n    for (const [key, value] of Object.entries(obj)) {\n      const newPath = [...path, key];\n      if (typeof value === 'string' || Array.isArray(value)) {\n        if (Array.isArray(value) && (value.length === 0 || value.some((v) => typeof v !== 'string'))) {\n          throw new Error(\n            `Invalid value at path \"${newPath.join('.')}\": expected a string or an array of strings, but got ${JSON.stringify(value)}`,\n          );\n        }\n        result.push({ path: newPath, value });\n      } else if (typeof value === 'object' && value !== null) {\n        traverse(value as Record<string, unknown>, newPath);\n      }\n    }\n  }\n\n  traverse(themeObj, []);\n  return result;\n}\n","import type { Plugin } from '@terrazzo/parser';\nimport { FORMAT_ID as FORMAT_CSS } from '@terrazzo/plugin-css';\nimport { makeCSSVar } from '@terrazzo/token-tools/css';\nimport { flattenThemeObj, type TailwindPluginOptions } from './lib.js';\n\nexport const FORMAT_ID = 'tailwind';\n\nexport * from './lib.js';\n\nexport default function pluginTailwind(options: TailwindPluginOptions): Plugin {\n  const filename = options?.filename ?? (options as any)?.fileName ?? 'tailwind-theme.css';\n\n  return {\n    name: '@terrazzo/plugin-tailwind',\n    enforce: 'post', // ensure this comes after @terrazzo/plugin-css\n    config(config) {\n      if (!config.plugins.some((p) => p.name === '@terrazzo/plugin-css')) {\n        throw new Error(\n          '@terrazzo/plugin-css missing! Please install and add to the plugins array to use the Tailwind plugin.',\n        );\n      }\n\n      if (!options || !options.theme) {\n        throw new Error('Missing Tailwind `theme` option.');\n      }\n    },\n    async transform({ getTransforms, setTransform }) {\n      const variants = [{ variant: '.', mode: '.' }, ...(options?.modeVariants ?? [])];\n      for (const { variant, mode } of variants) {\n        const flatTheme = flattenThemeObj(options.theme);\n        for (const { path, value } of flatTheme) {\n          const tokens = getTransforms({\n            format: FORMAT_CSS,\n            id: value,\n            mode,\n          });\n          for (const token of tokens) {\n            let relName = token.id.split('.').at(-1)!;\n            for (const subgroup of [...(Array.isArray(value) ? value : [value])]) {\n              const match = subgroup.replace(/\\*.*/, '');\n              relName = token.id.replace(match, '');\n            }\n            setTransform(token.id, {\n              format: FORMAT_ID,\n              localID: makeCSSVar(`${path.join('-')}-${relName.replace(/\\./g, '-')}`),\n              value: typeof token.value === 'object' ? token.value['.']! : token.value,\n              mode: variant, // ! <- not the original mode!\n            });\n          }\n        }\n      }\n    },\n    async build({ getTransforms, outputFile }) {\n      const output = ['@import \"tailwindcss\";', ''];\n\n      const variants: Record<string, string[]> = { '.': [] };\n      for (const token of getTransforms({ format: FORMAT_ID, mode: '*' })) {\n        const { localID, value, mode } = token;\n        if (!variants[mode]) {\n          variants[mode] = [];\n        }\n        variants[mode].push(`${localID}: ${value};`);\n      }\n      for (const [variant, values] of Object.entries(variants)) {\n        output.push(variant === '.' ? '@theme {' : `@variant ${variant} {`);\n        for (const value of values) {\n          output.push(`  ${value}`);\n        }\n        output.push('}', '');\n      }\n\n      outputFile(filename, output.join('\\n'));\n    },\n  };\n}\n"],"mappings":";;;;;AAaA,SAAgB,gBAAgB,UAAmF;CACjH,MAAM,SAAyD,EAAE;CAEjE,SAAS,SAAS,KAA8B,MAAgB;AAC9D,OAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,IAAI,EAAE;GAC9C,MAAM,UAAU,CAAC,GAAG,MAAM,IAAI;AAC9B,OAAI,OAAO,UAAU,YAAY,MAAM,QAAQ,MAAM,EAAE;AACrD,QAAI,MAAM,QAAQ,MAAM,KAAK,MAAM,WAAW,KAAK,MAAM,MAAM,MAAM,OAAO,MAAM,SAAS,EACzF,OAAM,IAAI,MACR,0BAA0B,QAAQ,KAAK,IAAI,CAAC,uDAAuD,KAAK,UAAU,MAAM,GACzH;AAEH,WAAO,KAAK;KAAE,MAAM;KAAS;KAAO,CAAC;cAC5B,OAAO,UAAU,YAAY,UAAU,KAChD,UAAS,OAAkC,QAAQ;;;AAKzD,UAAS,UAAU,EAAE,CAAC;AACtB,QAAO;;;;;AC5BT,MAAa,YAAY;AAIzB,SAAwB,eAAe,SAAwC;CAC7E,MAAM,WAAW,SAAS,YAAa,SAAiB,YAAY;AAEpE,QAAO;EACL,MAAM;EACN,SAAS;EACT,OAAO,QAAQ;AACb,OAAI,CAAC,OAAO,QAAQ,MAAM,MAAM,EAAE,SAAS,uBAAuB,CAChE,OAAM,IAAI,MACR,wGACD;AAGH,OAAI,CAAC,WAAW,CAAC,QAAQ,MACvB,OAAM,IAAI,MAAM,mCAAmC;;EAGvD,MAAM,UAAU,EAAE,eAAe,gBAAgB;GAC/C,MAAM,WAAW,CAAC;IAAE,SAAS;IAAK,MAAM;IAAK,EAAE,GAAI,SAAS,gBAAgB,EAAE,CAAE;AAChF,QAAK,MAAM,EAAE,SAAS,UAAU,UAAU;IACxC,MAAM,YAAY,gBAAgB,QAAQ,MAAM;AAChD,SAAK,MAAM,EAAE,MAAM,WAAW,WAAW;KACvC,MAAM,SAAS,cAAc;MAC3B,QAAQA;MACR,IAAI;MACJ;MACD,CAAC;AACF,UAAK,MAAM,SAAS,QAAQ;MAC1B,IAAI,UAAU,MAAM,GAAG,MAAM,IAAI,CAAC,GAAG,GAAG;AACxC,WAAK,MAAM,YAAY,CAAC,GAAI,MAAM,QAAQ,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAE,EAAE;OACpE,MAAM,QAAQ,SAAS,QAAQ,QAAQ,GAAG;AAC1C,iBAAU,MAAM,GAAG,QAAQ,OAAO,GAAG;;AAEvC,mBAAa,MAAM,IAAI;OACrB,QAAQ;OACR,SAAS,WAAW,GAAG,KAAK,KAAK,IAAI,CAAC,GAAG,QAAQ,QAAQ,OAAO,IAAI,GAAG;OACvE,OAAO,OAAO,MAAM,UAAU,WAAW,MAAM,MAAM,OAAQ,MAAM;OACnE,MAAM;OACP,CAAC;;;;;EAKV,MAAM,MAAM,EAAE,eAAe,cAAc;GACzC,MAAM,SAAS,CAAC,4BAA0B,GAAG;GAE7C,MAAM,WAAqC,EAAE,KAAK,EAAE,EAAE;AACtD,QAAK,MAAM,SAAS,cAAc;IAAE,QAAQ;IAAW,MAAM;IAAK,CAAC,EAAE;IACnE,MAAM,EAAE,SAAS,OAAO,SAAS;AACjC,QAAI,CAAC,SAAS,MACZ,UAAS,QAAQ,EAAE;AAErB,aAAS,MAAM,KAAK,GAAG,QAAQ,IAAI,MAAM,GAAG;;AAE9C,QAAK,MAAM,CAAC,SAAS,WAAW,OAAO,QAAQ,SAAS,EAAE;AACxD,WAAO,KAAK,YAAY,MAAM,aAAa,YAAY,QAAQ,IAAI;AACnE,SAAK,MAAM,SAAS,OAClB,QAAO,KAAK,KAAK,QAAQ;AAE3B,WAAO,KAAK,KAAK,GAAG;;AAGtB,cAAW,UAAU,OAAO,KAAK,KAAK,CAAC;;EAE1C"}
+{"version":3,"file":"index.js","names":["FORMAT_CSS","FORMAT_TAILWIND"],"sources":["../src/lib.ts","../src/index.ts"],"sourcesContent":["export const FORMAT_ID = 'tailwind';\nexport const PLUGIN_NAME = '@terrazzo/plugin-tailwind';\n\nexport type ResolverInput = Record<string, string>;\n\nexport interface TailwindPluginOptions {\n  /**\n   * Filename to output.\n   * @default \"tailwind-theme.css\"\n   */\n  filename?: string;\n  /**\n   * Path to a template file. The template should contain `@terrazzo-slot;`\n   * which will be replaced with the generated theme.\n   */\n  template?: string;\n  /** @see https://tailwindcss.com/docs/theme */\n  theme: Record<string, unknown>;\n  /** Default permutation */\n  defaultTheme?: ResolverInput;\n  /**\n   * Associate Tailwind custom variants with Resolver permutations\n   * @see https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually\n   */\n  customVariants?: {\n    [name: string]: {\n      /** The CSS selector to apply to this variant */\n      selector: string;\n      /** The resolver input to load for this custom variant */\n      input: ResolverInput;\n    };\n  };\n}\n\n/** Flatten an arbitrarily-nested object */\nexport function flattenThemeObj(themeObj: Record<string, unknown>): { path: string[]; value: string | string[] }[] {\n  const result: { path: string[]; value: string | string[] }[] = [];\n\n  function traverse(obj: Record<string, unknown>, path: string[]) {\n    for (const [key, value] of Object.entries(obj)) {\n      const newPath = [...path, key];\n      if (typeof value === 'string' || Array.isArray(value)) {\n        if (Array.isArray(value) && (value.length === 0 || value.some((v) => typeof v !== 'string'))) {\n          throw new Error(\n            `Invalid value at path \"${newPath.join('.')}\": expected a string or an array of strings, but got ${JSON.stringify(value)}`,\n          );\n        }\n        result.push({ path: newPath, value });\n      } else if (typeof value === 'object' && value !== null) {\n        traverse(value as Record<string, unknown>, newPath);\n      }\n    }\n  }\n\n  traverse(themeObj, []);\n  return result;\n}\n\nexport const FILE_HEADER = `/* -------------------------------------------\n *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * ------------------------------------------- */`;\n\nexport function buildFileHeader(templatePath?: string): string {\n  if (templatePath) {\n    return `/* -------------------------------------------\n *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n *  template: ${templatePath}\n * ------------------------------------------- */`;\n  }\n  return FILE_HEADER;\n}\n\nexport const TERRAZZO_SLOT = '@terrazzo-slot;';\n\nexport function applyTemplate(template: string, generatedTheme: string): string {\n  if (!template.includes(TERRAZZO_SLOT)) {\n    throw new Error(`Template must contain \"${TERRAZZO_SLOT}\" directive`);\n  }\n  // Replace slot and any following newlines (CRLF or LF) with theme + single newline\n  return template.replace(/@terrazzo-slot;(\\r?\\n)+/, `${generatedTheme.trimEnd()}\\n\\n`);\n}\n","import fsSync from 'node:fs';\nimport fs from 'node:fs/promises';\nimport { fileURLToPath } from 'node:url';\nimport type { Plugin } from '@terrazzo/parser';\nimport { FORMAT_ID as FORMAT_CSS } from '@terrazzo/plugin-css';\nimport { makeCSSVar } from '@terrazzo/token-tools/css';\nimport {\n  applyTemplate,\n  buildFileHeader,\n  FORMAT_ID as FORMAT_TAILWIND,\n  flattenThemeObj,\n  PLUGIN_NAME,\n  type TailwindPluginOptions,\n} from './lib.js';\n\nexport * from './lib.js';\n\nconst DEFAULT_THEME = '.';\n\nexport default function pluginTailwind(options: TailwindPluginOptions): Plugin {\n  const filename = options?.filename ?? 'tailwind-theme.css';\n  const variations = {\n    [DEFAULT_THEME]: { selector: '', input: options.defaultTheme ?? { tzMode: '.' } },\n    ...options?.customVariants,\n  };\n  let cwd: URL;\n  const msg = { group: 'plugin' as const, label: PLUGIN_NAME };\n\n  return {\n    name: PLUGIN_NAME,\n    enforce: 'post', // ensure this comes after @terrazzo/plugin-css\n    config(config, { logger }) {\n      if (!config.plugins.some((p) => p.name === '@terrazzo/plugin-css')) {\n        logger.error({\n          ...msg,\n          message:\n            '@terrazzo/plugin-css missing! Please install and add to the plugins array to use the Tailwind plugin.',\n        });\n      }\n\n      if (!options || !options.theme) {\n        logger.error({ ...msg, message: 'Missing Tailwind `theme` option.' });\n      }\n\n      if (options && 'modeVariants' in options) {\n        logger.error({ ...msg, message: 'Migrate \"modeVariants\" to \"variants\" in config (see docs)' });\n      }\n\n      // store cwd for template resolution (parent of outDir)\n      cwd = new URL('./', config.outDir);\n      if (options?.template && !fsSync.existsSync(new URL(options.template, cwd))) {\n        logger.error({\n          ...msg,\n          message: `Could not locate template ${fileURLToPath(new URL(options.template, cwd))}. Does the file exist?`,\n        });\n      }\n    },\n    async transform({ getTransforms, setTransform, context: { logger } }) {\n      const flatTheme = flattenThemeObj(options.theme);\n\n      for (const { input } of Object.values(variations)) {\n        const query = getTokenQuery(input);\n        // Note: it’s important to remember that under-the-hood, getting/setting modes is NOT the same as having an { tzMode: value } input.\n        // The former allows glob searching across all modes, the latter does not. Especially in the Tailwind plugin, confusing the two\n        // will result in many dropped tokens.\n        for (const { path, value } of flatTheme) {\n          const variantTokens = getTransforms({ ...query, format: FORMAT_CSS, id: value });\n          // Warn the user if they are trying to generate an empty Tailwind variant\n          if (!variantTokens.length) {\n            logger.warn({ ...msg, message: `${value} matched 0 tokens` });\n          }\n\n          for (const token of variantTokens) {\n            let relName = token.id.split('.').at(-1)!;\n            for (const subgroup of [...(Array.isArray(value) ? value : [value])]) {\n              const match = subgroup.replace(/\\*.*/, '');\n              relName = token.id.replace(match, '');\n            }\n            setTransform(token.id, {\n              ...query,\n              format: FORMAT_TAILWIND,\n              localID: makeCSSVar(`${path.join('-')}-${relName.replace(/\\./g, '-')}`),\n              value: typeof token.value === 'object' ? token.value['.']! : token.value,\n            });\n          }\n        }\n      }\n    },\n    async build({ getTransforms, outputFile }) {\n      let generatedTheme = '';\n      for (const [variant, { input, selector }] of Object.entries(variations)) {\n        if (generatedTheme) {\n          generatedTheme += '\\n'; // add extra line break if continuing\n        }\n        generatedTheme += `${variant === DEFAULT_THEME ? '@theme' : `@custom-variant ${variant} (${selector})`} {\\n`;\n        for (const token of getTransforms({ ...getTokenQuery(input), format: FORMAT_TAILWIND })) {\n          generatedTheme += `  ${token.localID}: ${token.value};\\n`;\n        }\n        generatedTheme += '}\\n';\n      }\n\n      // build the output combining theme and template\n      let finalOutput = '';\n      if (options.template) {\n        const templateUrl = new URL(options.template, cwd);\n        const templateContent = await fs.readFile(fileURLToPath(templateUrl), 'utf8');\n        finalOutput += applyTemplate(templateContent, generatedTheme);\n      } else {\n        finalOutput += '@import \"tailwindcss\";\\n\\n';\n        finalOutput += generatedTheme;\n      }\n\n      const header = buildFileHeader(options.template);\n      outputFile(filename, [header, '', finalOutput].join('\\n'));\n    },\n  };\n}\n\n/** Convert modes to inputs */\nfunction isLegacyModes(input: Record<string, string>): boolean {\n  return Object.keys(input).length === 0 && 'tzMode' in input;\n}\n\n/** Build query for both resolvers and legacy modes */\nfunction getTokenQuery(input: Record<string, string>) {\n  return isLegacyModes(input) ? { mode: input.tzMode ?? '.' } : { input };\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terrazzo/plugin-tailwind",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.5",
   "description": "Generate Tailwind v4 theme using DTCG design tokens.",
   "license": "MIT",
   "type": "module",
@@ -28,19 +28,20 @@
   },
   "peerDependencies": {
     "tailwindcss": "^4.0.0",
-    "@terrazzo/cli": "^2.0.0-beta.3",
-    "@terrazzo/parser": "^2.0.0-beta.3",
-    "@terrazzo/plugin-css": "^2.0.0-beta.3",
-    "@terrazzo/token-tools": "^2.0.0-beta.3"
+    "@terrazzo/cli": "^2.0.0-beta.5",
+    "@terrazzo/parser": "^2.0.0-beta.5",
+    "@terrazzo/plugin-css": "^2.0.0-beta.5",
+    "@terrazzo/token-tools": "^2.0.0-beta.5"
   },
   "dependencies": {
-    "@terrazzo/token-tools": "^2.0.0-beta.3"
+    "@terrazzo/token-tools": "^2.0.0-beta.5"
   },
   "devDependencies": {
-    "tailwindcss": "^4.1.18",
-    "@terrazzo/cli": "^2.0.0-beta.3",
-    "@terrazzo/parser": "^2.0.0-beta.3",
-    "@terrazzo/plugin-css": "^2.0.0-beta.3"
+    "dtcg-examples": "^1.0.3",
+    "tailwindcss": "^4.2.0",
+    "@terrazzo/cli": "^2.0.0-beta.5",
+    "@terrazzo/parser": "^2.0.0-beta.5",
+    "@terrazzo/plugin-css": "^2.0.0-beta.5"
   },
   "scripts": {
     "build": "rolldown -c && attw --profile esm-only --pack .",