@udixio/tailwind 1.6.0 → 1.7.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 1.7.0 (2025-08-31)
+
+### 🚀 Features
+
+- **tailwind:** enhance dynamic theming with flexible CSS selectors ([64bef44](https://github.com/Udixio/UI/commit/64bef44))
+
+### 🩹 Fixes
+
+- **tailwind:** correct indentation in dynamic CSS generation and adjust imports ([701599f](https://github.com/Udixio/UI/commit/701599f))
+
+### ❤️ Thank You
+
+- Joël VIGREUX
+
 ## 1.6.0 (2025-08-29)
 
 ### 🚀 Features

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

@@ -1,7 +1,11 @@
 import { FontPlugin, PluginAbstract, PluginImplAbstract } from '@udixio/theme';
 export interface TailwindPluginOptions {
+    darkMode?: 'class' | 'media';
+    dynamicSelector?: string;
+    darkSelector?: string;
     responsiveBreakPoints?: Record<string, number>;
     styleFilePath?: string;
+    subThemes?: Record<string, string>;
 }
 export declare class TailwindPlugin extends PluginAbstract<TailwindImplPluginBrowser, TailwindPluginOptions> {
     dependencies: (typeof FontPlugin)[];
@@ -10,12 +14,14 @@ export declare class TailwindPlugin extends PluginAbstract<TailwindImplPluginBro
 }
 export declare class TailwindImplPluginBrowser extends PluginImplAbstract<TailwindPluginOptions> {
     outputCss: string;
-    protected colors: Record<string, {
+    onInit(): void;
+    loadColor({ isDynamic }: {
+        isDynamic: boolean;
+    }): void;
+    getColors(): Record<string, {
         light: string;
         dark: string;
     }>;
-    onInit(): void;
-    loadColor(): void;
     onLoad(): Promise<void>;
 }
 //# sourceMappingURL=tailwind.plugin.d.ts.map

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;IAqBH,MAAM;CAsBb"}
+{"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;IACpC,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACpC;AAgFD,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;IAEtB,MAAM;IAeN,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE;QAAE,SAAS,EAAE,OAAO,CAAA;KAAE;IAsE/C,SAAS;eAII,MAAM;cACP,MAAM;;IAiBZ,MAAM;CAUb"}

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-DYs0pbWt.cjs");
+const tailwind_plugin = require("./tailwind.plugin-CUI_jxzw.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-DJ3FRnT8.js";
-import { T, a, f, s } from "./tailwind.plugin-DJ3FRnT8.js";
+import { m as main } from "./tailwind.plugin-q0sIRBpo.js";
+import { T, a, f, s } from "./tailwind.plugin-q0sIRBpo.js";
 export {
   T as TailwindImplPluginBrowser,
   a as TailwindPlugin,

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

@@ -7,7 +7,6 @@ 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;IAQP,SAAS;IAuBH,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,EACL,yBAAyB,EACzB,qBAAqB,EACtB,MAAM,4BAA4B,CAAC;AAIpC,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;CAkFtB"}

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-DYs0pbWt.cjs");
+const tailwind_plugin = require("./tailwind.plugin-CUI_jxzw.cjs");
 const theme = require("@udixio/theme");
 const fs = require("fs");
 const console = require("node:console");
@@ -60,26 +60,7 @@ 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()) {
       await super.onLoad();
       return;
@@ -92,15 +73,7 @@ class TailwindImplPlugin extends tailwind_plugin.TailwindImplPluginBrowser {
       getFileContent: getFileContent2,
       replaceFileContent: replaceFileContent2
     } = await Promise.resolve().then(() => file);
-    this.colors = {};
-    for (const isDark of [false, true]) {
-      this.api.themes.update({ isDark });
-      for (const [key, value] of this.api.colors.getColors().entries()) {
-        const newKey = key.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
-        (_a = this.colors)[newKey] ?? (_a[newKey] = { light: "", dark: "" });
-        this.colors[newKey][isDark ? "dark" : "light"] = value.getHex();
-      }
-    }
+    const colors = this.getColors();
     let udixioCssPath = this.options.styleFilePath;
     const projectRoot = await findProjectRoot2(resolve());
     if (!udixioCssPath) {
@@ -118,7 +91,7 @@ class TailwindImplPlugin extends tailwind_plugin.TailwindImplPluginBrowser {
     }
     const { fontStyles, fontFamily } = this.api.plugins.getPlugin(theme.FontPlugin).getInstance().getFonts();
     const configCss = {
-      colorKeys: Object.keys(this.colors).join(", "),
+      colorKeys: Object.keys(colors).join(", "),
       fontStyles: Object.entries(fontStyles).map(
         ([fontRole, fontStyle]) => Object.entries(fontStyle).map(
           ([fontSize, fontStyle2]) => `${fontRole}-${fontSize} ${Object.entries(fontStyle2).map(([name, value]) => `${name}[${value}]`).join(" ")}`
@@ -133,7 +106,7 @@ class TailwindImplPlugin extends tailwind_plugin.TailwindImplPluginBrowser {
   fontStyles: ${configCss.fontStyles};
   responsiveBreakPoints: ${configCss.responsiveBreakPoints};
 }`;
-    this.loadColor();
+    this.loadColor({ isDynamic: false });
     this.outputCss += `
 @theme {
   ${Object.entries(fontFamily).map(

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-DJ3FRnT8.js";
-import { f, s } from "./tailwind.plugin-DJ3FRnT8.js";
+import { T as TailwindImplPluginBrowser, m as main } from "./tailwind.plugin-q0sIRBpo.js";
+import { f, s } from "./tailwind.plugin-q0sIRBpo.js";
 import { PluginAbstract, FontPlugin } from "@udixio/theme";
 import * as fs from "fs";
 import * as console from "node:console";
@@ -20,26 +20,7 @@ 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()) {
       await super.onLoad();
       return;
@@ -52,15 +33,7 @@ class TailwindImplPlugin extends TailwindImplPluginBrowser {
       getFileContent: getFileContent2,
       replaceFileContent: replaceFileContent2
     } = await Promise.resolve().then(() => file);
-    this.colors = {};
-    for (const isDark of [false, true]) {
-      this.api.themes.update({ isDark });
-      for (const [key, value] of this.api.colors.getColors().entries()) {
-        const newKey = key.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
-        (_a = this.colors)[newKey] ?? (_a[newKey] = { light: "", dark: "" });
-        this.colors[newKey][isDark ? "dark" : "light"] = value.getHex();
-      }
-    }
+    const colors = this.getColors();
     let udixioCssPath = this.options.styleFilePath;
     const projectRoot = await findProjectRoot2(resolve2());
     if (!udixioCssPath) {
@@ -78,7 +51,7 @@ class TailwindImplPlugin extends TailwindImplPluginBrowser {
     }
     const { fontStyles, fontFamily } = this.api.plugins.getPlugin(FontPlugin).getInstance().getFonts();
     const configCss = {
-      colorKeys: Object.keys(this.colors).join(", "),
+      colorKeys: Object.keys(colors).join(", "),
       fontStyles: Object.entries(fontStyles).map(
         ([fontRole, fontStyle]) => Object.entries(fontStyle).map(
           ([fontSize, fontStyle2]) => `${fontRole}-${fontSize} ${Object.entries(fontStyle2).map(([name, value]) => `${name}[${value}]`).join(" ")}`
@@ -93,7 +66,7 @@ class TailwindImplPlugin extends TailwindImplPluginBrowser {
   fontStyles: ${configCss.fontStyles};
   responsiveBreakPoints: ${configCss.responsiveBreakPoints};
 }`;
-    this.loadColor();
+    this.loadColor({ isDynamic: false });
     this.outputCss += `
 @theme {
   ${Object.entries(fontFamily).map(

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

@@ -162,6 +162,63 @@ const main = plugin.withOptions((args) => {
     shadow.handler(api);
   };
 });
+function createFlexibleSelector(...classes) {
+  classes = classes.filter((classeName) => !!classeName);
+  if (classes.length === 0) return "";
+  if (classes.length === 1 && classes[0]) return classes[0];
+  const selectors = [];
+  selectors.push(classes.join(""));
+  for (let i = 0; i < classes.length; i++) {
+    const ancestor = classes[i];
+    const descendants = classes.filter(
+      (className, index) => index !== i && !!className
+    );
+    if (descendants.length === 1) {
+      selectors.push(`${ancestor} ${descendants[0]}`);
+    } else if (descendants.length > 1) {
+      selectors.push(`${ancestor} ${descendants.join("")}`);
+      for (const desc of descendants) {
+        selectors.push(`${ancestor} ${desc}`);
+      }
+    }
+  }
+  for (let i = 0; i < classes.length; i++) {
+    for (let j = i + 1; j < classes.length; j++) {
+      selectors.push(`${classes[i]} ${classes[j]}`);
+      selectors.push(`${classes[j]} ${classes[i]}`);
+    }
+  }
+  const uniqueSelectors = [...new Set(selectors)];
+  return `:is(${uniqueSelectors.join(", ")})`;
+}
+function darkStyle({
+  selectors,
+  mode,
+  darkSelector,
+  styles
+}) {
+  selectors = selectors.filter((classeName) => !!classeName);
+  if (mode === "media") {
+    if (selectors.length !== 0) {
+      return `@media (prefers-color-scheme: dark) {
+    ${createFlexibleSelector(...selectors)} {
+      ${styles}
+    }
+  }
+`;
+    } else {
+      return `@media (prefers-color-scheme: dark) {
+    ${styles}
+  }
+`;
+    }
+  } else {
+    return `${createFlexibleSelector(...selectors, darkSelector)} {
+    ${styles}
+  }
+`;
+  }
+}
 class TailwindPlugin extends theme.PluginAbstract {
   constructor() {
     super(...arguments);
@@ -174,47 +231,95 @@ class TailwindImplPluginBrowser extends theme.PluginImplAbstract {
   constructor() {
     super(...arguments);
     __publicField(this, "outputCss", "");
-    __publicField(this, "colors", {});
   }
   onInit() {
     var _a;
     (_a = this.options).responsiveBreakPoints ?? (_a.responsiveBreakPoints = {
       lg: 1.125
     });
+    this.options = {
+      responsiveBreakPoints: {
+        lg: 1.125
+      },
+      darkMode: "class",
+      darkSelector: ".dark",
+      dynamicSelector: ".dynamic",
+      ...this.options
+    };
   }
-  loadColor() {
-    this.outputCss += `
-@variant dynamic-default (&:where(.dynamic, .dynamic *));
-@variant dynamic-dark (&:where(.dynamic:where(.dark, .dark *), .dark:where(.dynamic, .dynamic *)));
+  loadColor({ isDynamic }) {
+    let { dynamicSelector, darkSelector } = this.options;
+    if (!isDynamic) {
+      dynamicSelector = void 0;
+    }
+    const darkMode = this.options.darkMode ?? "class";
+    if (darkMode == "media") {
+      darkSelector = void 0;
+    }
+    const colors = this.getColors();
+    if (isDynamic) {
+      this.outputCss += `
 @layer theme {
   .dynamic {
-    ${Object.entries(this.colors).map(([key, value]) => `--color-${key}: ${value.light};`).join("\n  ")}
+    ${Object.entries(colors).map(([key, value]) => `--color-${key}: ${value.light};`).join("\n  ")}
   }
-}
+}`;
+    } else {
+      this.outputCss += `
+@theme {
+  --color-*: initial;
+  ${Object.entries(colors).map(([key, value]) => `--color-${key}: ${value.light};`).join("\n  ")}
+}`;
+    }
+    this.outputCss += `
 @layer theme {
-  :is(.dynamic.dark, .dynamic .dark, .dark .dynamic) {
-    ${Object.entries(this.colors).map(([key, value]) => `--color-${key}: ${value.dark};`).join("\n  ")}
+  ${darkStyle({
+      selectors: [dynamicSelector],
+      mode: darkMode,
+      darkSelector: darkSelector ?? "",
+      styles: Object.entries(colors).map(([key, value]) => `--color-${key}: ${value.dark};`).join("\n    ")
+    })} 
+}`;
+    for (const [key, value] of Object.entries(this.options.subThemes ?? {})) {
+      this.api.themes.update({ sourceColorHex: value });
+      const colors2 = this.getColors();
+      this.outputCss += `
+@layer theme {
+  ${createFlexibleSelector(dynamicSelector, ".theme-" + key)} {
+    ${Object.entries(colors2).map(([key2, value2]) => `--color-${key2}: ${value2.dark};`).join("\n    ")}
     }
 }
 `;
+      this.outputCss += `
+@layer theme {
+  ${darkStyle({
+        selectors: [dynamicSelector, ".theme-" + key],
+        mode: darkMode,
+        darkSelector: darkSelector ?? "",
+        styles: Object.entries(colors2).map(([key2, value2]) => `--color-${key2}: ${value2.dark};`).join("\n    ")
+      })} 
+}`;
+    }
   }
-  async onLoad() {
-    var _a;
-    console.log("onLoad");
-    this.colors = {};
+  getColors() {
+    const colors = {};
     for (const isDark of [false, true]) {
       this.api.themes.update({ isDark });
       for (const [key, value] of this.api.colors.getColors().entries()) {
         const newKey = key.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
-        (_a = this.colors)[newKey] ?? (_a[newKey] = { light: "", dark: "" });
-        this.colors[newKey][isDark ? "dark" : "light"] = value.getHex();
+        colors[newKey] ?? (colors[newKey] = { light: "", dark: "" });
+        colors[newKey][isDark ? "dark" : "light"] = value.getHex();
       }
     }
+    return colors;
+  }
+  async onLoad() {
+    this.getColors();
     if (typeof window !== "undefined") {
       const { tailwindBrowserInit } = await Promise.resolve().then(() => require("./tailwind-browser-COFzjMN4.cjs"));
       this.outputCss = await tailwindBrowserInit(this.outputCss);
     }
-    this.loadColor();
+    this.loadColor({ isDynamic: true });
   }
 }
 exports.TailwindImplPluginBrowser = TailwindImplPluginBrowser;

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

@@ -161,6 +161,63 @@ const main = plugin.withOptions((args) => {
     shadow.handler(api);
   };
 });
+function createFlexibleSelector(...classes) {
+  classes = classes.filter((classeName) => !!classeName);
+  if (classes.length === 0) return "";
+  if (classes.length === 1 && classes[0]) return classes[0];
+  const selectors = [];
+  selectors.push(classes.join(""));
+  for (let i = 0; i < classes.length; i++) {
+    const ancestor = classes[i];
+    const descendants = classes.filter(
+      (className, index) => index !== i && !!className
+    );
+    if (descendants.length === 1) {
+      selectors.push(`${ancestor} ${descendants[0]}`);
+    } else if (descendants.length > 1) {
+      selectors.push(`${ancestor} ${descendants.join("")}`);
+      for (const desc of descendants) {
+        selectors.push(`${ancestor} ${desc}`);
+      }
+    }
+  }
+  for (let i = 0; i < classes.length; i++) {
+    for (let j = i + 1; j < classes.length; j++) {
+      selectors.push(`${classes[i]} ${classes[j]}`);
+      selectors.push(`${classes[j]} ${classes[i]}`);
+    }
+  }
+  const uniqueSelectors = [...new Set(selectors)];
+  return `:is(${uniqueSelectors.join(", ")})`;
+}
+function darkStyle({
+  selectors,
+  mode,
+  darkSelector,
+  styles
+}) {
+  selectors = selectors.filter((classeName) => !!classeName);
+  if (mode === "media") {
+    if (selectors.length !== 0) {
+      return `@media (prefers-color-scheme: dark) {
+    ${createFlexibleSelector(...selectors)} {
+      ${styles}
+    }
+  }
+`;
+    } else {
+      return `@media (prefers-color-scheme: dark) {
+    ${styles}
+  }
+`;
+    }
+  } else {
+    return `${createFlexibleSelector(...selectors, darkSelector)} {
+    ${styles}
+  }
+`;
+  }
+}
 class TailwindPlugin extends PluginAbstract {
   constructor() {
     super(...arguments);
@@ -173,47 +230,95 @@ class TailwindImplPluginBrowser extends PluginImplAbstract {
   constructor() {
     super(...arguments);
     __publicField(this, "outputCss", "");
-    __publicField(this, "colors", {});
   }
   onInit() {
     var _a;
     (_a = this.options).responsiveBreakPoints ?? (_a.responsiveBreakPoints = {
       lg: 1.125
     });
+    this.options = {
+      responsiveBreakPoints: {
+        lg: 1.125
+      },
+      darkMode: "class",
+      darkSelector: ".dark",
+      dynamicSelector: ".dynamic",
+      ...this.options
+    };
   }
-  loadColor() {
-    this.outputCss += `
-@variant dynamic-default (&:where(.dynamic, .dynamic *));
-@variant dynamic-dark (&:where(.dynamic:where(.dark, .dark *), .dark:where(.dynamic, .dynamic *)));
+  loadColor({ isDynamic }) {
+    let { dynamicSelector, darkSelector } = this.options;
+    if (!isDynamic) {
+      dynamicSelector = void 0;
+    }
+    const darkMode = this.options.darkMode ?? "class";
+    if (darkMode == "media") {
+      darkSelector = void 0;
+    }
+    const colors = this.getColors();
+    if (isDynamic) {
+      this.outputCss += `
 @layer theme {
   .dynamic {
-    ${Object.entries(this.colors).map(([key, value]) => `--color-${key}: ${value.light};`).join("\n  ")}
+    ${Object.entries(colors).map(([key, value]) => `--color-${key}: ${value.light};`).join("\n  ")}
   }
-}
+}`;
+    } else {
+      this.outputCss += `
+@theme {
+  --color-*: initial;
+  ${Object.entries(colors).map(([key, value]) => `--color-${key}: ${value.light};`).join("\n  ")}
+}`;
+    }
+    this.outputCss += `
 @layer theme {
-  :is(.dynamic.dark, .dynamic .dark, .dark .dynamic) {
-    ${Object.entries(this.colors).map(([key, value]) => `--color-${key}: ${value.dark};`).join("\n  ")}
+  ${darkStyle({
+      selectors: [dynamicSelector],
+      mode: darkMode,
+      darkSelector: darkSelector ?? "",
+      styles: Object.entries(colors).map(([key, value]) => `--color-${key}: ${value.dark};`).join("\n    ")
+    })} 
+}`;
+    for (const [key, value] of Object.entries(this.options.subThemes ?? {})) {
+      this.api.themes.update({ sourceColorHex: value });
+      const colors2 = this.getColors();
+      this.outputCss += `
+@layer theme {
+  ${createFlexibleSelector(dynamicSelector, ".theme-" + key)} {
+    ${Object.entries(colors2).map(([key2, value2]) => `--color-${key2}: ${value2.dark};`).join("\n    ")}
     }
 }
 `;
+      this.outputCss += `
+@layer theme {
+  ${darkStyle({
+        selectors: [dynamicSelector, ".theme-" + key],
+        mode: darkMode,
+        darkSelector: darkSelector ?? "",
+        styles: Object.entries(colors2).map(([key2, value2]) => `--color-${key2}: ${value2.dark};`).join("\n    ")
+      })} 
+}`;
+    }
   }
-  async onLoad() {
-    var _a;
-    console.log("onLoad");
-    this.colors = {};
+  getColors() {
+    const colors = {};
     for (const isDark of [false, true]) {
       this.api.themes.update({ isDark });
       for (const [key, value] of this.api.colors.getColors().entries()) {
         const newKey = key.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
-        (_a = this.colors)[newKey] ?? (_a[newKey] = { light: "", dark: "" });
-        this.colors[newKey][isDark ? "dark" : "light"] = value.getHex();
+        colors[newKey] ?? (colors[newKey] = { light: "", dark: "" });
+        colors[newKey][isDark ? "dark" : "light"] = value.getHex();
       }
     }
+    return colors;
+  }
+  async onLoad() {
+    this.getColors();
     if (typeof window !== "undefined") {
       const { tailwindBrowserInit } = await import("./tailwind-browser-CTGKNrKy.js");
       this.outputCss = await tailwindBrowserInit(this.outputCss);
     }
-    this.loadColor();
+    this.loadColor({ isDynamic: true });
   }
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/tailwind",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "type": "module",
   "main": "./dist/node.js",
   "module": "./dist/node.js",

package/src/browser/tailwind.plugin.ts

@@ -1,10 +1,90 @@
 import { FontPlugin, PluginAbstract, PluginImplAbstract } from '@udixio/theme';
 
 export interface TailwindPluginOptions {
-  // darkMode?: 'class' | 'media';
+  darkMode?: 'class' | 'media';
+  dynamicSelector?: string;
+  darkSelector?: string;
   responsiveBreakPoints?: Record<string, number>;
   styleFilePath?: string;
-  // subThemes?: Record<string, string>;
+  subThemes?: Record<string, string>;
+}
+
+function createFlexibleSelector(...classes: (string | undefined)[]): string {
+  classes = classes.filter((classeName) => !!classeName);
+  if (classes.length === 0) return '';
+  if (classes.length === 1 && classes[0]) return classes[0];
+
+  // Approche plus simple : générer les cas les plus courants
+  const selectors: string[] = [];
+
+  // 1. Toutes les classes sur le même élément
+  selectors.push(classes.join(''));
+
+  // 2. Chaque classe comme ancêtre des autres
+  for (let i = 0; i < classes.length; i++) {
+    const ancestor = classes[i];
+    const descendants = classes.filter(
+      (className, index) => index !== i && !!className,
+    );
+
+    if (descendants.length === 1) {
+      selectors.push(`${ancestor} ${descendants[0]}`);
+    } else if (descendants.length > 1) {
+      selectors.push(`${ancestor} ${descendants.join('')}`);
+      // Aussi les descendants séparés
+      for (const desc of descendants) {
+        selectors.push(`${ancestor} ${desc}`);
+      }
+    }
+  }
+
+  // 3. Permutations adjacentes (A B, B A)
+  for (let i = 0; i < classes.length; i++) {
+    for (let j = i + 1; j < classes.length; j++) {
+      selectors.push(`${classes[i]} ${classes[j]}`);
+      selectors.push(`${classes[j]} ${classes[i]}`);
+    }
+  }
+
+  // Supprimer les doublons
+  const uniqueSelectors = [...new Set(selectors)];
+
+  return `:is(${uniqueSelectors.join(', ')})`;
+}
+
+function darkStyle({
+  selectors,
+  mode,
+  darkSelector,
+  styles,
+}: {
+  selectors: (string | undefined)[];
+  darkSelector: string;
+  styles: string;
+  mode: 'class' | 'media';
+}): string {
+  selectors = selectors.filter((classeName) => !!classeName);
+
+  if (mode === 'media') {
+    if (selectors.length !== 0) {
+      return `@media (prefers-color-scheme: dark) {
+    ${createFlexibleSelector(...selectors)} {
+      ${styles}
+    }
+  }
+`;
+    } else {
+      return `@media (prefers-color-scheme: dark) {
+    ${styles}
+  }
+`;
+    }
+  } else {
+    return `${createFlexibleSelector(...selectors, darkSelector)} {
+    ${styles}
+  }
+`;
+  }
 }
 
 export class TailwindPlugin extends PluginAbstract<
@@ -18,61 +98,122 @@ export class TailwindPlugin extends PluginAbstract<
 
 export class TailwindImplPluginBrowser extends PluginImplAbstract<TailwindPluginOptions> {
   public outputCss = '';
-  protected colors: Record<
-    string,
-    {
-      light: string;
-      dark: string;
-    }
-  > = {};
 
   onInit() {
     this.options.responsiveBreakPoints ??= {
       lg: 1.125,
     };
+    this.options = {
+      responsiveBreakPoints: {
+        lg: 1.125,
+      },
+      darkMode: 'class',
+      darkSelector: '.dark',
+      dynamicSelector: '.dynamic',
+      ...this.options,
+    };
   }
 
-  loadColor() {
-    this.outputCss += `
-@variant dynamic-default (&:where(.dynamic, .dynamic *));
-@variant dynamic-dark (&:where(.dynamic:where(.dark, .dark *), .dark:where(.dynamic, .dynamic *)));
+  loadColor({ isDynamic }: { isDynamic: boolean }) {
+    let { dynamicSelector, darkSelector } = this.options;
+    if (!isDynamic) {
+      dynamicSelector = undefined;
+    }
+    const darkMode = this.options.darkMode ?? 'class';
+    if (darkMode == 'media') {
+      darkSelector = undefined;
+    }
+
+    const colors = this.getColors();
+
+    if (isDynamic) {
+      this.outputCss += `
 @layer theme {
   .dynamic {
-    ${Object.entries(this.colors)
+    ${Object.entries(colors)
       .map(([key, value]) => `--color-${key}: ${value.light};`)
       .join('\n  ')}
   }
-}
+}`;
+    } else {
+      this.outputCss += `
+@theme {
+  --color-*: initial;
+  ${Object.entries(colors)
+    .map(([key, value]) => `--color-${key}: ${value.light};`)
+    .join('\n  ')}
+}`;
+    }
+
+    this.outputCss += `
 @layer theme {
-  :is(.dynamic.dark, .dynamic .dark, .dark .dynamic) {
-    ${Object.entries(this.colors)
+  ${darkStyle({
+    selectors: [dynamicSelector],
+    mode: darkMode,
+    darkSelector: darkSelector ?? '',
+    styles: Object.entries(colors)
       .map(([key, value]) => `--color-${key}: ${value.dark};`)
-      .join('\n  ')}
+      .join('\n    '),
+  })} 
+}`;
+
+    for (const [key, value] of Object.entries(this.options.subThemes ?? {})) {
+      this.api.themes.update({ sourceColorHex: value });
+      const colors = this.getColors();
+      this.outputCss += `
+@layer theme {
+  ${createFlexibleSelector(dynamicSelector, '.theme-' + key)} {
+    ${Object.entries(colors)
+      .map(([key, value]) => `--color-${key}: ${value.dark};`)
+      .join('\n    ')}
     }
 }
 `;
+
+      this.outputCss += `
+@layer theme {
+  ${darkStyle({
+    selectors: [dynamicSelector, '.theme-' + key],
+    mode: darkMode,
+    darkSelector: darkSelector ?? '',
+    styles: Object.entries(colors)
+      .map(([key, value]) => `--color-${key}: ${value.dark};`)
+      .join('\n    '),
+  })} 
+}`;
+    }
   }
 
-  async onLoad() {
-    console.log('onLoad');
-    this.colors = {};
+  getColors() {
+    const colors: Record<
+      string,
+      {
+        light: string;
+        dark: string;
+      }
+    > = {};
     for (const isDark of [false, true]) {
       this.api.themes.update({ isDark: isDark });
       for (const [key, value] of this.api.colors.getColors().entries()) {
         const newKey = key
           .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2')
           .toLowerCase();
-        this.colors[newKey] ??= { light: '', dark: '' };
-        this.colors[newKey][isDark ? 'dark' : 'light'] = value.getHex();
+        colors[newKey] ??= { light: '', dark: '' };
+        colors[newKey][isDark ? 'dark' : 'light'] = value.getHex();
       }
     }
 
+    return colors;
+  }
+
+  async onLoad() {
+    this.getColors();
+
     if (typeof window !== 'undefined') {
       const { tailwindBrowserInit } = await import('./tailwind-browser');
 
       this.outputCss = await tailwindBrowserInit(this.outputCss);
     }
-
-    this.loadColor();
+    this.loadColor({ isDynamic: true });
   }
 }

package/src/node/tailwind.plugin.ts

@@ -1,6 +1,9 @@
 import { FontPlugin, PluginAbstract } from '@udixio/theme';
 
-import { TailwindImplPluginBrowser, TailwindPluginOptions } from '../browser/tailwind.plugin';
+import {
+  TailwindImplPluginBrowser,
+  TailwindPluginOptions,
+} from '../browser/tailwind.plugin';
 
 import { ConfigCss } from '../main';
 
@@ -22,29 +25,6 @@ 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();
@@ -59,17 +39,8 @@ class TailwindImplPlugin extends TailwindImplPluginBrowser {
       getFileContent,
       replaceFileContent,
     } = await import('./file');
-    this.colors = {};
-    for (const isDark of [false, true]) {
-      this.api.themes.update({ isDark: isDark });
-      for (const [key, value] of this.api.colors.getColors().entries()) {
-        const newKey = key
-          .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2')
-          .toLowerCase();
-        this.colors[newKey] ??= { light: '', dark: '' };
-        this.colors[newKey][isDark ? 'dark' : 'light'] = value.getHex();
-      }
-    }
+
+    const colors = this.getColors();
 
     let udixioCssPath = this.options.styleFilePath;
 
@@ -98,7 +69,7 @@ class TailwindImplPlugin extends TailwindImplPluginBrowser {
       .getFonts();
 
     const configCss: ConfigCss = {
-      colorKeys: Object.keys(this.colors).join(', ') as any,
+      colorKeys: Object.keys(colors).join(', ') as any,
       fontStyles: Object.entries(fontStyles)
         .map(([fontRole, fontStyle]) =>
           Object.entries(fontStyle)
@@ -123,7 +94,7 @@ class TailwindImplPlugin extends TailwindImplPluginBrowser {
   fontStyles: ${configCss.fontStyles};
   responsiveBreakPoints: ${configCss.responsiveBreakPoints};
 }`;
-    this.loadColor();
+    this.loadColor({ isDynamic: false });
     this.outputCss += `
 @theme {
   ${Object.entries(fontFamily)