@udixio/tailwind 1.5.0 → 1.6.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## 1.6.0 (2025-08-29)
+
+### 🚀 Features
+
+- **tailwind:** add dynamic variant support and improve dark mode handling ([f5ea520](https://github.com/Udixio/UI/commit/f5ea520))
+
+### 🩹 Fixes
+
+- **tailwind:** correct export paths in package.json for node builds ([1e5e6d3](https://github.com/Udixio/UI/commit/1e5e6d3))
+- **tailwind:** refine color handling and improve theme initialization ([dbb2254](https://github.com/Udixio/UI/commit/dbb2254))
+
+### ❤️ Thank You
+
+- Joël VIGREUX
+
 ## 1.5.0 (2025-08-28)
 
 ### 🚀 Features

package/dist/browser/tailwind.plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind.plugin.d.ts","sourceRoot":"","sources":["../../src/browser/tailwind.plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAE/E,MAAM,WAAW,qBAAqB;IAEpC,qBAAqB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;CAExB;AAED,qBAAa,cAAe,SAAQ,cAAc,CAChD,yBAAyB,EACzB,qBAAqB,CACtB;IACQ,YAAY,wBAAgB;IAC5B,IAAI,SAAc;IACzB,WAAW,mCAA6B;CACzC;AAED,qBAAa,yBAA0B,SAAQ,kBAAkB,CAAC,qBAAqB,CAAC;IAC/E,SAAS,SAAM;IACtB,SAAS,CAAC,MAAM,EAAE,MAAM,CACtB,MAAM,EACN;QACE,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;KACd,CACF,CAAM;IAEP,MAAM;IAMN,SAAS;IAmBH,MAAM;CAoBb"}
+{"version":3,"file":"tailwind.plugin.d.ts","sourceRoot":"","sources":["../../src/browser/tailwind.plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAE/E,MAAM,WAAW,qBAAqB;IAEpC,qBAAqB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;CAExB;AAED,qBAAa,cAAe,SAAQ,cAAc,CAChD,yBAAyB,EACzB,qBAAqB,CACtB;IACQ,YAAY,wBAAgB;IAC5B,IAAI,SAAc;IACzB,WAAW,mCAA6B;CACzC;AAED,qBAAa,yBAA0B,SAAQ,kBAAkB,CAAC,qBAAqB,CAAC;IAC/E,SAAS,SAAM;IACtB,SAAS,CAAC,MAAM,EAAE,MAAM,CACtB,MAAM,EACN;QACE,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;KACd,CACF,CAAM;IAEP,MAAM;IAMN,SAAS;IAqBH,MAAM;CAsBb"}

package/dist/browser.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const tailwind_plugin = require("./tailwind.plugin-JU5cwZvP.cjs");
+const tailwind_plugin = require("./tailwind.plugin-DYs0pbWt.cjs");
 exports.TailwindImplPluginBrowser = tailwind_plugin.TailwindImplPluginBrowser;
 exports.TailwindPlugin = tailwind_plugin.TailwindPlugin;
 exports.default = tailwind_plugin.main;

package/dist/browser.js

@@ -1,5 +1,5 @@
-import { m as main } from "./tailwind.plugin-Ce1R9Jc0.js";
-import { T, a, f, s } from "./tailwind.plugin-Ce1R9Jc0.js";
+import { m as main } from "./tailwind.plugin-DJ3FRnT8.js";
+import { T, a, f, s } from "./tailwind.plugin-DJ3FRnT8.js";
 export {
   T as TailwindImplPluginBrowser,
   a as TailwindPlugin,

package/dist/node/tailwind.plugin.d.ts

@@ -7,6 +7,7 @@ export declare class TailwindPlugin extends PluginAbstract<TailwindImplPlugin, T
 }
 declare class TailwindImplPlugin extends TailwindImplPluginBrowser {
     private isNodeJs;
+    loadColor(): void;
     onLoad(): Promise<void>;
 }
 export {};

package/dist/node/tailwind.plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind.plugin.d.ts","sourceRoot":"","sources":["../../src/node/tailwind.plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE3D,OAAO,EAAE,yBAAyB,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAI9F,qBAAa,cAAe,SAAQ,cAAc,CAChD,kBAAkB,EAClB,qBAAqB,CACtB;IACQ,YAAY,wBAAgB;IAC5B,IAAI,SAAc;IACzB,WAAW,4BAAsB;CAClC;AAED,cAAM,kBAAmB,SAAQ,yBAAyB;IACxD,OAAO,CAAC,QAAQ;IAQD,MAAM;CA2FtB"}
+{"version":3,"file":"tailwind.plugin.d.ts","sourceRoot":"","sources":["../../src/node/tailwind.plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE3D,OAAO,EAAE,yBAAyB,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAI9F,qBAAa,cAAe,SAAQ,cAAc,CAChD,kBAAkB,EAClB,qBAAqB,CACtB;IACQ,YAAY,wBAAgB;IAC5B,IAAI,SAAc;IACzB,WAAW,4BAAsB;CAClC;AAED,cAAM,kBAAmB,SAAQ,yBAAyB;IACxD,OAAO,CAAC,QAAQ;IAQP,SAAS;IAuBH,MAAM;CA2FtB"}

package/dist/node.cjs

@@ -24,7 +24,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const tailwind_plugin = require("./tailwind.plugin-JU5cwZvP.cjs");
+const tailwind_plugin = require("./tailwind.plugin-DYs0pbWt.cjs");
 const theme = require("@udixio/theme");
 const fs = require("fs");
 const console = require("node:console");
@@ -60,6 +60,24 @@ class TailwindImplPlugin extends tailwind_plugin.TailwindImplPluginBrowser {
   isNodeJs() {
     return typeof process !== "undefined" && process.versions != null && process.versions.node != null;
   }
+  loadColor() {
+    if (!this.isNodeJs()) {
+      super.loadColor();
+      return;
+    }
+    this.outputCss += `
+@custom-variant dark (&:where(.dark, .dark *));
+@theme {
+  --color-*: initial;
+  ${Object.entries(this.colors).map(([key, value]) => `--color-${key}: ${value.light};`).join("\n  ")}
+}
+@layer theme {
+  .dark {
+    ${Object.entries(this.colors).map(([key, value]) => `--color-${key}: ${value.dark};`).join("\n  ")}
+  }
+}
+`;
+  }
   async onLoad() {
     var _a;
     if (!this.isNodeJs()) {

package/dist/node.js

@@ -1,8 +1,8 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { T as TailwindImplPluginBrowser, m as main } from "./tailwind.plugin-Ce1R9Jc0.js";
-import { f, s } from "./tailwind.plugin-Ce1R9Jc0.js";
+import { T as TailwindImplPluginBrowser, m as main } from "./tailwind.plugin-DJ3FRnT8.js";
+import { f, s } from "./tailwind.plugin-DJ3FRnT8.js";
 import { PluginAbstract, FontPlugin } from "@udixio/theme";
 import * as fs from "fs";
 import * as console from "node:console";
@@ -20,6 +20,24 @@ class TailwindImplPlugin extends TailwindImplPluginBrowser {
   isNodeJs() {
     return typeof process !== "undefined" && process.versions != null && process.versions.node != null;
   }
+  loadColor() {
+    if (!this.isNodeJs()) {
+      super.loadColor();
+      return;
+    }
+    this.outputCss += `
+@custom-variant dark (&:where(.dark, .dark *));
+@theme {
+  --color-*: initial;
+  ${Object.entries(this.colors).map(([key, value]) => `--color-${key}: ${value.light};`).join("\n  ")}
+}
+@layer theme {
+  .dark {
+    ${Object.entries(this.colors).map(([key, value]) => `--color-${key}: ${value.dark};`).join("\n  ")}
+  }
+}
+`;
+  }
   async onLoad() {
     var _a;
     if (!this.isNodeJs()) {

package/dist/{tailwind.plugin-Ce1R9Jc0.js → tailwind.plugin-DJ3FRnT8.js}

@@ -183,20 +183,23 @@ class TailwindImplPluginBrowser extends PluginImplAbstract {
   }
   loadColor() {
     this.outputCss += `
-@custom-variant dark (&:where(.dark, .dark *));
-@theme {
-  --color-*: initial;
-  ${Object.entries(this.colors).map(([key, value]) => `--color-${key}: ${value.light};`).join("\n  ")}
-}
+@variant dynamic-default (&:where(.dynamic, .dynamic *));
+@variant dynamic-dark (&:where(.dynamic:where(.dark, .dark *), .dark:where(.dynamic, .dynamic *)));
 @layer theme {
-  .dark {
-  ${Object.entries(this.colors).map(([key, value]) => `--color-${key}: ${value.dark};`).join("\n  ")}
+  .dynamic {
+    ${Object.entries(this.colors).map(([key, value]) => `--color-${key}: ${value.light};`).join("\n  ")}
   }
 }
+@layer theme {
+  :is(.dynamic.dark, .dynamic .dark, .dark .dynamic) {
+    ${Object.entries(this.colors).map(([key, value]) => `--color-${key}: ${value.dark};`).join("\n  ")}
+    }
+}
 `;
   }
   async onLoad() {
     var _a;
+    console.log("onLoad");
     this.colors = {};
     for (const isDark of [false, true]) {
       this.api.themes.update({ isDark });

package/dist/{tailwind.plugin-JU5cwZvP.cjs → tailwind.plugin-DYs0pbWt.cjs}

@@ -184,20 +184,23 @@ class TailwindImplPluginBrowser extends theme.PluginImplAbstract {
   }
   loadColor() {
     this.outputCss += `
-@custom-variant dark (&:where(.dark, .dark *));
-@theme {
-  --color-*: initial;
-  ${Object.entries(this.colors).map(([key, value]) => `--color-${key}: ${value.light};`).join("\n  ")}
-}
+@variant dynamic-default (&:where(.dynamic, .dynamic *));
+@variant dynamic-dark (&:where(.dynamic:where(.dark, .dark *), .dark:where(.dynamic, .dynamic *)));
 @layer theme {
-  .dark {
-  ${Object.entries(this.colors).map(([key, value]) => `--color-${key}: ${value.dark};`).join("\n  ")}
+  .dynamic {
+    ${Object.entries(this.colors).map(([key, value]) => `--color-${key}: ${value.light};`).join("\n  ")}
   }
 }
+@layer theme {
+  :is(.dynamic.dark, .dynamic .dark, .dark .dynamic) {
+    ${Object.entries(this.colors).map(([key, value]) => `--color-${key}: ${value.dark};`).join("\n  ")}
+    }
+}
 `;
   }
   async onLoad() {
     var _a;
+    console.log("onLoad");
     this.colors = {};
     for (const isDark of [false, true]) {
       this.api.themes.update({ isDark });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/tailwind",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "type": "module",
   "main": "./dist/node.js",
   "module": "./dist/node.js",
@@ -20,9 +20,9 @@
         "require": "./dist/node.cjs",
         "default": "./dist/node.js"
       },
-      "import": "./dist/browser.js",
-      "require": "./dist/browser.cjs",
-      "default": "./dist/browser.js"
+      "import": "./dist/node.js",
+      "require": "./dist/node.cjs",
+      "default": "./dist/node.js"
     }
   },
   "dependencies": {

package/src/browser/tailwind.plugin.ts

@@ -34,24 +34,27 @@ export class TailwindImplPluginBrowser extends PluginImplAbstract<TailwindPlugin
 
   loadColor() {
     this.outputCss += `
-@custom-variant dark (&:where(.dark, .dark *));
-@theme {
-  --color-*: initial;
-  ${Object.entries(this.colors)
-    .map(([key, value]) => `--color-${key}: ${value.light};`)
-    .join('\n  ')}
-}
+@variant dynamic-default (&:where(.dynamic, .dynamic *));
+@variant dynamic-dark (&:where(.dynamic:where(.dark, .dark *), .dark:where(.dynamic, .dynamic *)));
 @layer theme {
-  .dark {
-  ${Object.entries(this.colors)
-    .map(([key, value]) => `--color-${key}: ${value.dark};`)
-    .join('\n  ')}
+  .dynamic {
+    ${Object.entries(this.colors)
+      .map(([key, value]) => `--color-${key}: ${value.light};`)
+      .join('\n  ')}
   }
 }
+@layer theme {
+  :is(.dynamic.dark, .dynamic .dark, .dark .dynamic) {
+    ${Object.entries(this.colors)
+      .map(([key, value]) => `--color-${key}: ${value.dark};`)
+      .join('\n  ')}
+    }
+}
 `;
   }
 
   async onLoad() {
+    console.log('onLoad');
     this.colors = {};
     for (const isDark of [false, true]) {
       this.api.themes.update({ isDark: isDark });
@@ -66,6 +69,7 @@ export class TailwindImplPluginBrowser extends PluginImplAbstract<TailwindPlugin
 
     if (typeof window !== 'undefined') {
       const { tailwindBrowserInit } = await import('./tailwind-browser');
+
       this.outputCss = await tailwindBrowserInit(this.outputCss);
     }
 

package/src/node/tailwind.plugin.ts

@@ -22,6 +22,29 @@ class TailwindImplPlugin extends TailwindImplPluginBrowser {
     );
   }
 
+  override loadColor() {
+    if (!this.isNodeJs()) {
+      super.loadColor();
+      return;
+    }
+    this.outputCss += `
+@custom-variant dark (&:where(.dark, .dark *));
+@theme {
+  --color-*: initial;
+  ${Object.entries(this.colors)
+    .map(([key, value]) => `--color-${key}: ${value.light};`)
+    .join('\n  ')}
+}
+@layer theme {
+  .dark {
+    ${Object.entries(this.colors)
+      .map(([key, value]) => `--color-${key}: ${value.dark};`)
+      .join('\n  ')}
+  }
+}
+`;
+  }
+
   override async onLoad() {
     if (!this.isNodeJs()) {
       await super.onLoad();