@udixio/tailwind 0.5.2 → 1.0.0

package/.eslintrc.mjs

@@ -0,0 +1,22 @@
+import baseConfig from '../../eslint.config.mjs';
+
+export default [
+  ...baseConfig,
+  {
+    files: ['**/*.json'],
+    rules: {
+      '@nx/dependency-checks': [
+        'error',
+        {
+          ignoredFiles: [
+            '{projectRoot}/eslint.config.{js,cjs,mjs,ts,cts,mts}',
+            '{projectRoot}/vite.config.{js,ts,mjs,mts}',
+          ],
+        },
+      ],
+    },
+    languageOptions: {
+      parser: await import('jsonc-eslint-parser'),
+    },
+  },
+];

package/CHANGELOG.md

@@ -1,3 +1,64 @@
+# 1.0.0 (2025-08-04)
+
+### 🚀 Features
+
+- **tailwind:** readapts tailwind plugin ([5639159](https://github.com/Udixio/UI/commit/5639159))
+- **theme:** add vite adapter ([0857e3e](https://github.com/Udixio/UI/commit/0857e3e))
+- ⚠️  **theme:** replace `ConfigService` with abstract adapter-based architecture ([bf01991](https://github.com/Udixio/UI/commit/bf01991))
+- **theme:** introduce `VitePlugin` and enhance plugin system ([8989e95](https://github.com/Udixio/UI/commit/8989e95))
+- **theme:** migrate build system from Rollup to Vite for improved performance and configuration ([3f33657](https://github.com/Udixio/UI/commit/3f33657))
+- **tailwind:** migrate build system to Vite for improved developer experience ([ae0fe46](https://github.com/Udixio/UI/commit/ae0fe46))
+- **package:** add `publishConfig` to package.json for public npm publishing ([40307c0](https://github.com/Udixio/UI/commit/40307c0))
+- **package:** add `repository` field to package.json files ([a05ca80](https://github.com/Udixio/UI/commit/a05ca80))
+- **tailwind:** restructure packages and update dependencies ([0f62e58](https://github.com/Udixio/UI/commit/0f62e58))
+- **tailwind:** refactor package structure and dependencies ([81b4640](https://github.com/Udixio/UI/commit/81b4640))
+- **tailwind:** refactor plugin and integrate theme dependencies ([34501e3](https://github.com/Udixio/UI/commit/34501e3))
+- **tailwind:** remove Tailwind library and update dependencies ([bd84038](https://github.com/Udixio/UI/commit/bd84038))
+- **tailwind:** add initial Tailwind library setup ([8fd43f0](https://github.com/Udixio/UI/commit/8fd43f0))
+
+### 🩹 Fixes
+
+- error lint ([33670ea](https://github.com/Udixio/UI/commit/33670ea))
+- **dependencies:** update `pnpm-lock.yaml` for lockfile version and dependency adjustments ([22bb1a8](https://github.com/Udixio/UI/commit/22bb1a8))
+- add `types` field to package exports and correct file extensions ([6b8ce9c](https://github.com/Udixio/UI/commit/6b8ce9c))
+- **theme:** make config loading asynchronous to improve initialization flow ([d5de04f](https://github.com/Udixio/UI/commit/d5de04f))
+- **dependencies:** update `pnpm-lock.yaml` for consistency and compatibility ([e6dfc9d](https://github.com/Udixio/UI/commit/e6dfc9d))
+- **tailwind:** enable SSR in Vite build configuration ([d85e3a9](https://github.com/Udixio/UI/commit/d85e3a9))
+- **theme:** switch to ES module exports and adjust package type ([7314ded](https://github.com/Udixio/UI/commit/7314ded))
+- **tailwind:** update `main` field in package.json and clean up index export ([14f3b7a](https://github.com/Udixio/UI/commit/14f3b7a))
+
+### ⚠️  Breaking Changes
+
+- ⚠️  **theme:** replace `ConfigService` with abstract adapter-based architecture ([bf01991](https://github.com/Udixio/UI/commit/bf01991))
+
+### 🧱 Updated Dependencies
+
+- Updated @udixio/theme to 1.0.0
+
+### ❤️ Thank You
+
+- Joël VIGREUX
+
+## 0.5.3 (2025-07-25)
+
+### 🩹 Fixes
+
+- add `types` field to package exports and correct file extensions ([6b8ce9c](https://github.com/Udixio/UI/commit/6b8ce9c))
+
+### 🧱 Updated Dependencies
+
+- Updated theme to 0.5.3
+
+### ❤️ Thank You
+
+- Joël VIGREUX
+
+## 0.5.2 (2025-07-25)
+
+### 🧱 Updated Dependencies
+
+- Updated theme to 0.5.2
+
 ## 0.5.1 (2025-07-25)
 
 ### 🩹 Fixes

package/dist/file.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file.d.ts","sourceRoot":"","sources":["../src/file.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,GAAI,UAAU,MAAM,EAAE,SAAS,MAAM,KAAG,IAmBtE,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,UAAU,MAAM,EAChB,gBAAgB,MAAM,GAAG,MAAM,KAC9B,MAAM,GAAG,KAAK,GAAG,IA4CnB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,UAAU,MAAM,EAChB,eAAe,MAAM,GAAG,MAAM,EAC9B,aAAa,MAAM,KAClB,IAkBF,CAAC;AACF,eAAO,MAAM,mBAAmB,GAC9B,UAAU,MAAM,EAChB,eAAe,MAAM,KACpB,MAAM,GAAG,IAyBX,CAAC"}

package/{index.cjs → dist/index.cjs}

@@ -1,10 +1,13 @@
 "use strict";
+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);
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const theme = require("@udixio/theme");
 const plugin = require("tailwindcss/plugin");
 const fs = require("fs");
 const path = require("path");
 const replaceInFile = require("replace-in-file");
+const theme = require("@udixio/theme");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -23,6 +26,138 @@ function _interopNamespaceDefault(e) {
 }
 const fs__namespace = /* @__PURE__ */ _interopNamespaceDefault(fs);
 const path__namespace = /* @__PURE__ */ _interopNamespaceDefault(path);
+const defaultConfig = {
+  statePrefix: "state",
+  disabledStyles: {
+    textOpacity: 0.38,
+    backgroundOpacity: 0.12
+  },
+  transition: {
+    duration: 150
+  }
+};
+const state = plugin.withOptions(({ colorKeys }) => {
+  const resolved = {
+    ...defaultConfig,
+    disabledStyles: {
+      ...defaultConfig.disabledStyles,
+      ...{}
+    },
+    transition: {
+      ...defaultConfig.transition,
+      ...{}
+    }
+  };
+  return ({ addComponents }) => {
+    const newComponents = {};
+    for (const isGroup of [false, true]) {
+      const group = isGroup ? "group-" : "";
+      for (const colorName of colorKeys) {
+        const className = `.${group}${resolved.statePrefix}-${colorName}`;
+        newComponents[className] = {
+          [`@apply ${group}hover:bg-${colorName}/[0.08]`]: {},
+          [`@apply ${group}active:bg-${colorName}/[0.12]`]: {},
+          [`@apply ${group}focus-visible:bg-${colorName}/[0.12]`]: {},
+          [`@apply transition-colors`]: {},
+          [`@apply duration-${resolved.transition.duration}`]: {},
+          [`@apply ${group}disabled:text-on-surface/[${resolved.disabledStyles.textOpacity}]`]: {},
+          [`@apply ${group}disabled:bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]: {}
+        };
+      }
+    }
+    for (const colorName of colorKeys) {
+      for (const stateName of ["hover", "active", "focus", "disabled"]) {
+        const className = `.${stateName}-${resolved.statePrefix}-${colorName}`;
+        if (stateName === "disabled") {
+          newComponents[className] = {
+            [`@apply text-on-surface/[${resolved.disabledStyles.textOpacity}]`]: {},
+            [`@apply bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]: {}
+          };
+        } else {
+          const opacity = stateName === "hover" ? 0.08 : 0.12;
+          newComponents[className] = {
+            [`@apply bg-${colorName}/[${opacity}]`]: {}
+          };
+        }
+      }
+    }
+    addComponents(newComponents);
+  };
+});
+const font = plugin.withOptions((options) => {
+  return ({
+    addUtilities,
+    theme: theme2
+  }) => {
+    const { fontStyles, responsiveBreakPoints } = options;
+    const pixelUnit = "rem";
+    const newUtilities = {};
+    const baseTextStyle = (sizeValue) => ({
+      fontSize: sizeValue.fontSize + pixelUnit,
+      fontWeight: sizeValue.fontWeight,
+      lineHeight: sizeValue.lineHeight + pixelUnit,
+      letterSpacing: sizeValue.letterSpacing ? sizeValue.letterSpacing + pixelUnit : null,
+      fontFamily: theme2("fontFamily." + sizeValue.fontFamily)
+    });
+    const responsiveTextStyle = (sizeValue, breakPointName, breakPointRatio) => ({
+      [`@media (min-width: ${theme2("screens." + breakPointName, {})})`]: {
+        fontSize: sizeValue.fontSize * breakPointRatio + pixelUnit,
+        lineHeight: sizeValue.lineHeight * breakPointRatio + pixelUnit
+      }
+    });
+    for (const [roleName, roleValue] of Object.entries(fontStyles)) {
+      for (const [sizeName, sizeValue] of Object.entries(roleValue)) {
+        newUtilities[`.text-${roleName}-${sizeName}`] = {
+          ...baseTextStyle(sizeValue),
+          ...Object.entries(responsiveBreakPoints).reduce(
+            (acc, [breakPointName, breakPointRatio]) => ({
+              ...acc,
+              ...responsiveTextStyle(
+                sizeValue,
+                breakPointName,
+                breakPointRatio
+              )
+            }),
+            {}
+          )
+        };
+      }
+    }
+    addUtilities(newUtilities);
+  };
+});
+const main = plugin.withOptions((args) => {
+  const configCss = args;
+  const fontStyles = {};
+  configCss.fontStyles.forEach((line) => {
+    const [styleToken, ...properties] = line.split(" ");
+    const [roleToken, sizeToken] = styleToken.split("-");
+    fontStyles[roleToken] ?? (fontStyles[roleToken] = {});
+    properties.forEach((properties2) => {
+      var _a;
+      (_a = fontStyles[roleToken])[sizeToken] ?? (_a[sizeToken] = {});
+      const [key, value] = properties2.slice(0, -1).split("[");
+      fontStyles[roleToken][sizeToken][key] = value;
+    });
+  });
+  let breakPointsCss = configCss.responsiveBreakPoints;
+  if (!Array.isArray(breakPointsCss)) {
+    breakPointsCss = [breakPointsCss];
+  }
+  const responsiveBreakPoints = {};
+  breakPointsCss.forEach(([key, value]) => {
+    responsiveBreakPoints[key] = value;
+  });
+  const options = {
+    colorKeys: configCss.colorKeys,
+    fontStyles,
+    responsiveBreakPoints
+  };
+  return (api) => {
+    font(options).handler(api);
+    state(options).handler(api);
+  };
+});
 const createOrUpdateFile = (filePath, content) => {
   try {
     if (!fs__namespace.existsSync(filePath)) {
@@ -112,122 +247,12 @@ const findTailwindCssFile = (startDir, searchPattern) => {
   }
   return null;
 };
-const state = (colorKeys) => plugin((pluginArgs) => {
-  addAllNewComponents(
-    pluginArgs,
-    {
-      statePrefix: "state",
-      disabledStyles: {
-        textOpacity: 0.38,
-        backgroundOpacity: 0.12
-      },
-      transition: {
-        duration: 150
-      }
-    },
-    colorKeys
-  );
-}, {});
-const addAllNewComponents = ({ addComponents }, { statePrefix, disabledStyles, transition }, colorKeys) => {
-  const newComponents = {};
-  for (const isGroup of [false, true]) {
-    const group = isGroup ? "group-" : "";
-    for (const colorName of colorKeys) {
-      const className = `.${group}${statePrefix}-${colorName}`;
-      newComponents[className] = {
-        [`@apply ${group}hover:bg-${colorName}/[0.08]`]: {},
-        [`@apply ${group}active:bg-${colorName}/[0.12]`]: {},
-        [`@apply ${group}focus-visible:bg-${colorName}/[0.12]`]: {}
-      };
-      if (transition) {
-        newComponents[className][`@apply transition-colors`] = {};
-        newComponents[className][`@apply duration-${transition.duration}`] = {};
-      }
-      if (disabledStyles) {
-        newComponents[className][`@apply ${group}disabled:text-on-surface/[${disabledStyles.textOpacity}]`] = {};
-        newComponents[className][`@apply ${group}disabled:bg-on-surface/[${disabledStyles.backgroundOpacity}]`] = {};
-      }
-    }
-  }
-  for (const colorName of colorKeys) {
-    for (const stateName of ["hover", "active", "focus", "disabled"]) {
-      const className = `.${stateName}-${statePrefix}-${colorName}`;
-      if (stateName === "active" || stateName === "focus") {
-        newComponents[className] = {
-          [`@apply bg-${colorName}/[0.12]`]: {}
-        };
-      } else if (stateName === "hover") {
-        newComponents[className] = {
-          [`@apply bg-${colorName}/[0.08]`]: {}
-        };
-      } else if (stateName === "disabled") {
-        newComponents[className] = {
-          [`@apply text-on-surface/[${disabledStyles.textOpacity}]`]: {}
-        };
-        newComponents[className] = {
-          [`@apply bg-on-surface/[${disabledStyles.backgroundOpacity}]`]: {}
-        };
-      }
-    }
-  }
-  addComponents(newComponents);
-};
-const font = (fontStyles, responsiveBreakPoints) => {
-  const createUtilities = ({ theme: theme2 }) => {
-    const pixelUnit = "rem";
-    const newUtilities = {};
-    const baseTextStyle = (sizeValue) => ({
-      fontSize: sizeValue.fontSize + pixelUnit,
-      fontWeight: sizeValue.fontWeight,
-      lineHeight: sizeValue.lineHeight + pixelUnit,
-      letterSpacing: sizeValue.letterSpacing ? sizeValue.letterSpacing + pixelUnit : null,
-      fontFamily: theme2("fontFamily." + sizeValue.fontFamily)
-    });
-    const responsiveTextStyle = (sizeValue, breakPointName, breakPointRatio) => ({
-      [`@media (min-width: ${theme2("screens." + breakPointName, {})})`]: {
-        fontSize: sizeValue.fontSize * breakPointRatio + pixelUnit,
-        lineHeight: sizeValue.lineHeight * breakPointRatio + pixelUnit
-      }
-    });
-    for (const [roleName, roleValue] of Object.entries(fontStyles)) {
-      for (const [sizeName, sizeValue] of Object.entries(roleValue)) {
-        newUtilities[".text-" + roleName + "-" + sizeName] = {
-          ...baseTextStyle(sizeValue),
-          ...Object.entries(responsiveBreakPoints).reduce(
-            (acc, [breakPointName, breakPointRatio]) => {
-              acc = {
-                ...acc,
-                ...responsiveTextStyle(
-                  sizeValue,
-                  breakPointName,
-                  breakPointRatio
-                )
-              };
-              return acc;
-            },
-            {}
-          )
-        };
-      }
-    }
-    return newUtilities;
-  };
-  return plugin(
-    ({
-      addUtilities,
-      theme: theme2
-    }) => {
-      const newUtilities = createUtilities({ theme: theme2 });
-      addUtilities(newUtilities);
-    }
-  );
-};
 class TailwindPlugin extends theme.PluginAbstract {
   constructor() {
     super(...arguments);
-    this.dependencies = [theme.FontPlugin];
-    this.name = "tailwind";
-    this.pluginClass = TailwindImplPlugin;
+    __publicField(this, "dependencies", [theme.FontPlugin]);
+    __publicField(this, "name", "tailwind");
+    __publicField(this, "pluginClass", TailwindImplPlugin);
   }
 }
 class TailwindImplPlugin extends theme.PluginImplAbstract {
@@ -237,13 +262,11 @@ class TailwindImplPlugin extends theme.PluginImplAbstract {
       lg: 1.125
     });
   }
-  load() {
-    const searchKeyword = '@plugin "@udixio/tailwind"';
+  onLoad() {
+    const searchKeyword = "@import 'tailwindcss';";
     const tailwindCssPath = this.options.styleFilePath ?? findTailwindCssFile(process.cwd(), searchKeyword);
     if (!tailwindCssPath) {
-      throw new Error(
-        'The style file containing the Udixio plugin was not found.\n Please use it first. (@plugin "@udixio/tailwind")'
-      );
+      throw new Error("The style file containing tailwind was not found.");
     }
     const searchPattern = /@import ["']tailwindcss["'];/;
     const replacement = `@import 'tailwindcss';
@@ -262,12 +285,28 @@ class TailwindImplPlugin extends theme.PluginImplAbstract {
       }
     }
     const { fontStyles, fontFamily } = this.api.plugins.getPlugin(theme.FontPlugin).getInstance().getFonts();
+    const configCss = {
+      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(" ")}`
+        ).join(", ")
+      ).join(", "),
+      responsiveBreakPoints: Object.entries(
+        this.options.responsiveBreakPoints ?? {}
+      ).map(([key, value]) => `${key} ${value}`).join(", ")
+    };
     createOrUpdateFile(
       path.join(cssFilePath, "udixio.css"),
       `
+@plugin "@udixio/tailwind" {
+  colorKeys: ${configCss.colorKeys};
+  fontStyles: ${configCss.fontStyles};
+  responsiveBreakPoints: ${configCss.responsiveBreakPoints};
+}
 @custom-variant dark (&:where(.dark, .dark *));
 @theme {
-    --color-*: initial;
+  --color-*: initial;
   ${Object.entries(colors).map(([key, value]) => `--color-${key}: ${value.light};`).join("\n  ")}
 }
 @layer theme {
@@ -275,39 +314,16 @@ class TailwindImplPlugin extends theme.PluginImplAbstract {
   ${Object.entries(colors).map(([key, value]) => `--color-${key}: ${value.dark};`).join("\n  ")}
   }
 }
+@theme {
+  ${Object.entries(fontFamily).map(
+        ([key, values]) => `--font-${key}: ${values.map((value) => `"${value}"`).join(", ")};`
+      ).join("\n  ")}
+}
 `
     );
-    const plugins = [
-      state(Object.keys(colors)),
-      font(fontStyles, this.options.responsiveBreakPoints)
-    ];
-    return plugin.withOptions(
-      // 1) factory(options) → la fonction “handler” du plugin
-      (options = {}) => {
-        return async function(api) {
-          plugins.forEach((plugin2) => {
-            plugin2.handler(api);
-          });
-        };
-      },
-      // 2) config(options) → objet à merger dans tailwind.config
-      (options = {}) => {
-        return {
-          theme: {
-            fontFamily
-          }
-        };
-      }
-    );
   }
 }
-const createTheme = async () => {
-  const app = await theme.bootstrapFromConfig();
-  const plugin2 = app.plugins.getPlugin(TailwindPlugin).getInstance();
-  return plugin2.load();
-};
 exports.TailwindPlugin = TailwindPlugin;
-exports.createTheme = createTheme;
-exports.default = createTheme;
+exports.default = main;
 exports.font = font;
 exports.state = state;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { main } from './main';
+export * from './plugins-tailwind';
+export * from './tailwind.plugin';
+export default main;
+//# 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,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,eAAe,IAAI,CAAC"}