@terrazzo/plugin-tailwind 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# @terrazzo/plugin-tailwind
+
+## 0.0.1
+
+### Patch Changes
+
+- [#411](https://github.com/terrazzoapp/terrazzo/pull/411) [`2ad079c`](https://github.com/terrazzoapp/terrazzo/commit/2ad079c06dcdb3b0241e678b1625f202a4ec92b1) Thanks [@drwpow](https://github.com/drwpow)! - Fix bug in pnpm workspaces
+
+- Updated dependencies [[`7e3d513`](https://github.com/terrazzoapp/terrazzo/commit/7e3d513e5bcde5e613cde35d367d49c6a46293a1), [`2ad079c`](https://github.com/terrazzoapp/terrazzo/commit/2ad079c06dcdb3b0241e678b1625f202a4ec92b1)]:
+  - @terrazzo/plugin-css@0.3.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Drew Powers
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,66 @@
+# ⛋ @terrazzo/plugin-tailwind
+
+Generate a Tailwind v4 theme from DTCG tokens.
+
+## Setup
+
+Requires [Node.js 20 or later](https://nodejs.org). With that installed, run:
+
+```sh
+npm i -D @terrazzo/cli @terrazzo/plugin-css @terrazzo/plugin-tailwind
+```
+
+Add a `terrazzo.config.js` to the root of your project with:
+
+```ts
+import { defineConfig } from "@terrazzo/cli";
+import css from "@terrazzo/plugin-css";
+import tailwind from "@terrazzo/plugin-tailwind";
+
+export default defineConfig({
+  outDir: "./tokens/",
+  plugins: [
+    css({
+      filename: "tokens.css",
+    }),
+    tailwind({
+      filename: "tailwind.js",
+      theme: {
+        /** @see https://tailwindcss.com/docs/configuration#theme */
+        colors: {
+          blue: {
+            100: "color.blue.100",
+            200: "color.blue.200",
+            // …
+          },
+        },
+        fontFamily: {
+          sans: "typography.family.base",
+          // …
+        },
+        extend: {
+          spacing: {
+            1: "token.size.s.space",
+            2: "token.size.m.space",
+            // …
+          },
+          borderRadius: {
+            m: "token.size.m.borderRadius",
+            // …
+          },
+        },
+      },
+    }),
+  ],
+});
+```
+
+Lastly, run:
+
+```sh
+npx tz build
+```
+
+And you’ll see a `./tokens/tailwind-theme.css` file generated in your project.
+
+[Full Documentation](https://terrazzo.app/docs/integrations/taiwlind)

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import type { Plugin } from '@terrazzo/parser';
+import { type TailwindPluginOptions } from './lib.js';
+export declare const FORMAT_ID = "tailwind";
+export * from './lib.js';
+export default function pluginTailwind(options: TailwindPluginOptions): Plugin;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,KAAK,qBAAqB,EAAmB,MAAM,UAAU,CAAC;AAEvE,eAAO,MAAM,SAAS,aAAa,CAAC;AAEpC,cAAc,UAAU,CAAC;AAEzB,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,OAAO,EAAE,qBAAqB,GAAG,MAAM,CAgE7E"}

package/dist/index.js

@@ -0,0 +1,88 @@
+/**
+ * @module @terrazzo/plugin-tailwind
+ * @license MIT License
+ * 
+ * Copyright (c) 2021 Drew Powers
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import { FORMAT_ID as FORMAT_CSS } from '@terrazzo/plugin-css';
+import { flattenThemeObj } from './lib.js';
+export const FORMAT_ID = 'tailwind';
+export * from './lib.js';
+export default function pluginTailwind(options) {
+    const filename = options?.filename ?? options?.fileName ?? 'tailwind-theme.css';
+    return {
+        name: '@terrazzo/plugin-tailwind',
+        enforce: 'post', // ensure this comes after @terrazzo/plugin-css
+        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.');
+            }
+        },
+        async transform({ getTransforms, setTransform }) {
+            const variants = [{ variant: '.', mode: '.' }, ...(options?.modeVariants ?? [])];
+            for (const { variant, mode } of variants) {
+                const flatTheme = flattenThemeObj(options.theme);
+                for (const { path, value } of flatTheme) {
+                    for (const token of getTransforms({
+                        format: FORMAT_CSS,
+                        id: value,
+                        mode,
+                    })) {
+                        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, {
+                            format: FORMAT_ID,
+                            localID: `--${path.join('-')}-${relName.replace(/\./g, '-')}`,
+                            value: typeof token.value === 'object' ? token.value['.'] : token.value,
+                            mode: variant, // ! <- not the original mode!
+                        });
+                    }
+                }
+            }
+        },
+        async build({ getTransforms, outputFile }) {
+            const output = ['@import "tailwind";', ''];
+            const variants = { '.': [] };
+            for (const token of getTransforms({ format: FORMAT_ID })) {
+                const { localID, value, mode } = token;
+                if (!variants[mode]) {
+                    variants[mode] = [];
+                }
+                variants[mode].push(`${localID}: ${value};`);
+            }
+            for (const [variant, values] of Object.entries(variants)) {
+                output.push(variant === '.' ? '@theme {' : `@variant ${variant} {`);
+                for (const value of values) {
+                    output.push(`  ${value}`);
+                }
+                output.push('}', '');
+            }
+            outputFile(filename, output.join('\n'));
+        },
+    };
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/lib.d.ts

@@ -0,0 +1,20 @@
+export interface TailwindPluginOptions {
+    /**
+     * Filename to output.
+     * @default "tailwind-theme.css"
+     */
+    filename?: string;
+    /** @see https://tailwindcss.com/docs/theme */
+    theme: Record<string, any>;
+    /** Array of mapping variants to DTCG modes. */
+    modeVariants?: {
+        variant: string;
+        mode: string;
+    }[];
+}
+/** Flatten an arbitrarily-nested object */
+export declare function flattenThemeObj(themeObj: Record<string, unknown>): {
+    path: string[];
+    value: string | string[];
+}[];
+//# sourceMappingURL=lib.d.ts.map

package/dist/lib.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lib.d.ts","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,+CAA+C;IAC/C,YAAY,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CACpD;AAED,2CAA2C;AAC3C,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG;IAAE,IAAI,EAAE,MAAM,EAAE,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;CAAE,EAAE,CAqBjH"}

package/dist/lib.js

@@ -0,0 +1,21 @@
+/** Flatten an arbitrarily-nested object */
+export function flattenThemeObj(themeObj) {
+    const result = [];
+    function traverse(obj, path) {
+        for (const [key, value] of Object.entries(obj)) {
+            const newPath = [...path, key];
+            if (typeof value === 'string' || Array.isArray(value)) {
+                if (Array.isArray(value) && (value.length === 0 || value.some((v) => typeof v !== 'string'))) {
+                    throw new Error(`Invalid value at path "${newPath.join('.')}": expected a string or an array of strings, but got ${JSON.stringify(value)}`);
+                }
+                result.push({ path: newPath, value });
+            }
+            else if (typeof value === 'object' && value !== null) {
+                traverse(value, newPath);
+            }
+        }
+    }
+    traverse(themeObj, []);
+    return result;
+}
+//# sourceMappingURL=lib.js.map

package/dist/lib.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lib.js","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"AAYA,2CAA2C;AAC3C,MAAM,UAAU,eAAe,CAAC,QAAiC;IAC/D,MAAM,MAAM,GAAmD,EAAE,CAAC;IAElE,SAAS,QAAQ,CAAC,GAA4B,EAAE,IAAc;QAC5D,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;YAC/C,MAAM,OAAO,GAAG,CAAC,GAAG,IAAI,EAAE,GAAG,CAAC,CAAC;YAC/B,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;gBACtD,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,EAAE,CAAC;oBAC7F,MAAM,IAAI,KAAK,CACb,0BAA0B,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,wDAAwD,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAC3H,CAAC;gBACJ,CAAC;gBACD,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;YACxC,CAAC;iBAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;gBACvD,QAAQ,CAAC,KAAgC,EAAE,OAAO,CAAC,CAAC;YACtD,CAAC;QACH,CAAC;IACH,CAAC;IAED,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;IACvB,OAAO,MAAM,CAAC;AAChB,CAAC"}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@terrazzo/plugin-tailwind",
+  "version": "0.0.1",
+  "type": "module",
+  "author": {
+    "name": "Drew Powers",
+    "email": "drew@pow.rs"
+  },
+  "keywords": [
+    "design tokens",
+    "design system",
+    "dtcg",
+    "w3c",
+    "tailwind",
+    "css"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/terrazzoapp/terrazzo.git",
+    "directory": "packages/plugin-tailwind"
+  },
+  "main": "./dist/index.js",
+  "peerDependencies": {
+    "@terrazzo/cli": "^0.7.0",
+    "@terrazzo/plugin-css": "^0.7.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "dependencies": {
+    "@terrazzo/token-tools": "^0.7.1"
+  },
+  "devDependencies": {
+    "tailwindcss": "^4.1.5",
+    "@terrazzo/cli": "^0.7.1",
+    "@terrazzo/parser": "^0.7.1",
+    "@terrazzo/plugin-css": "^0.7.1"
+  },
+  "scripts": {
+    "build": "pnpm run build:ts && pnpm -w run inject-license @terrazzo/plugin-tailwind dist/index.js",
+    "build:ts": "tsc -p tsconfig.build.json",
+    "format": "biome check --fix --unsafe .",
+    "dev": "tsc -p tsconfig.build.json -w",
+    "lint": "pnpm --filter @terrazzo/plugin-tailwind run \"/^lint:.*/\"",
+    "lint:js": "biome check .",
+    "lint:ts": "tsc --noEmit",
+    "test": "vitest run"
+  }
+}