@udixio/tailwind 2.4.10 → 2.4.11

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 2.4.11 (2026-01-26)
+
+### 🩹 Fixes
+
+- **tailwind:** improve `fontFamily` support with improved processing for CSS compatibility ([5538980](https://github.com/Udixio/UI/commit/5538980))
+
+### ❤️ Thank You
+
+- Joël VIGREUX
+
 ## 2.4.10 (2026-01-26)
 
 ### 🩹 Fixes

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-CwaBY8Mt.cjs");
+const tailwind_plugin = require("./tailwind.plugin-DCCnMjHz.cjs");
 exports.TailwindImplPluginBrowser = tailwind_plugin.TailwindImplPluginBrowser;
 exports.TailwindPlugin = tailwind_plugin.TailwindPlugin;
 exports.animation = tailwind_plugin.animation;

package/dist/browser.js

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

package/dist/main.d.ts

@@ -5,6 +5,7 @@ export type ConfigCss = {
     colorKeys: string[];
     fontStyles: string[];
     responsiveBreakPoints: string[];
+    fontFamily: string[];
 };
 export declare const main: import('node_modules/tailwindcss/dist/types-CJYAW1ql.mjs').c<ConfigJs>;
 //# sourceMappingURL=main.d.ts.map

package/dist/main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG/D,MAAM,MAAM,QAAQ,GAAG,iBAAiB,GAAG,YAAY,CAAC;AACxD,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,qBAAqB,EAAE,MAAM,EAAE,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,IAAI,wEAwCf,CAAC"}
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG/D,MAAM,MAAM,QAAQ,GAAG,iBAAiB,GAAG,YAAY,CAAC;AACxD,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,qBAAqB,EAAE,MAAM,EAAE,CAAC;IAChC,UAAU,EAAE,MAAM,EAAE,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,IAAI,wEAoDf,CAAC"}

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,EACL,yBAAyB,EACzB,qBAAqB,IAAI,4BAA4B,EACtD,MAAM,4BAA4B,CAAC;AAIpC,MAAM,MAAM,qBAAqB,GAAG,4BAA4B,CAAC;AAEjE,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;CAmFtB"}
+{"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,IAAI,4BAA4B,EACtD,MAAM,4BAA4B,CAAC;AAIpC,MAAM,MAAM,qBAAqB,GAAG,4BAA4B,CAAC;AAEjE,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;CAuFtB"}

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-CwaBY8Mt.cjs");
+const tailwind_plugin = require("./tailwind.plugin-DCCnMjHz.cjs");
 const theme = require("@udixio/theme");
 const fs = require("fs");
 const console = require("node:console");
@@ -100,18 +100,20 @@ class TailwindImplPlugin extends tailwind_plugin.TailwindImplPluginBrowser {
       ).join(", "),
       responsiveBreakPoints: Object.entries(
         this.options.responsiveBreakPoints ?? {}
-      ).map(([key, value]) => `${key} ${value}`).join(", ")
+      ).map(([key, value]) => `${key} ${value}`).join(", "),
+      fontFamily: Object.entries(fontFamily).map(([key, values]) => `${key} ${values.join("|")}`).join(", ")
     };
     this.outputCss += `@plugin "@udixio/tailwind" {
   colorKeys: ${configCss.colorKeys};
   fontStyles: ${configCss.fontStyles};
   responsiveBreakPoints: ${configCss.responsiveBreakPoints};
+  fontFamily: ${configCss.fontFamily};
 }`;
     this.loadColor({ isDynamic: false });
     this.outputCss += `
 @theme {
   ${Object.entries(fontFamily).map(
-      ([key, values]) => `--font-${key}: ${values.map((value) => `"${value}"`).join(", ")};`
+      ([key, values]) => `--font-${key}: ${values.map((value) => value.trim().startsWith("var(") ? value : `"${value}"`).join(", ")};`
     ).join("\n  ")}
 }`;
     await createOrUpdateFile2(udixioCssPath, this.outputCss);

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-CJB7VyGG.js";
-import { a, f, s } from "./tailwind.plugin-CJB7VyGG.js";
+import { T as TailwindImplPluginBrowser, m as main } from "./tailwind.plugin-DONDY0v2.js";
+import { a, f, s } from "./tailwind.plugin-DONDY0v2.js";
 import { PluginAbstract, FontPlugin } from "@udixio/theme";
 import * as fs from "fs";
 import * as console from "node:console";
@@ -60,18 +60,20 @@ class TailwindImplPlugin extends TailwindImplPluginBrowser {
       ).join(", "),
       responsiveBreakPoints: Object.entries(
         this.options.responsiveBreakPoints ?? {}
-      ).map(([key, value]) => `${key} ${value}`).join(", ")
+      ).map(([key, value]) => `${key} ${value}`).join(", "),
+      fontFamily: Object.entries(fontFamily).map(([key, values]) => `${key} ${values.join("|")}`).join(", ")
     };
     this.outputCss += `@plugin "@udixio/tailwind" {
   colorKeys: ${configCss.colorKeys};
   fontStyles: ${configCss.fontStyles};
   responsiveBreakPoints: ${configCss.responsiveBreakPoints};
+  fontFamily: ${configCss.fontFamily};
 }`;
     this.loadColor({ isDynamic: false });
     this.outputCss += `
 @theme {
   ${Object.entries(fontFamily).map(
-      ([key, values]) => `--font-${key}: ${values.map((value) => `"${value}"`).join(", ")};`
+      ([key, values]) => `--font-${key}: ${values.map((value) => value.trim().startsWith("var(") ? value : `"${value}"`).join(", ")};`
     ).join("\n  ")}
 }`;
     await createOrUpdateFile2(udixioCssPath, this.outputCss);

package/dist/plugins-tailwind/font.d.ts

@@ -2,6 +2,10 @@ import { FontRole, FontSize, FontStyle } from '@udixio/theme';
 export interface FontPluginOptions {
     fontStyles: Record<FontRole, Record<FontSize, FontStyle>>;
     responsiveBreakPoints: Record<string, number>;
+    fontFamily: {
+        expressive: string[];
+        neutral: string[];
+    };
 }
 export declare const font: import('node_modules/tailwindcss/dist/types-CJYAW1ql.mjs').c<FontPluginOptions>;
 //# sourceMappingURL=font.d.ts.map

package/dist/plugins-tailwind/font.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"font.d.ts","sourceRoot":"","sources":["../../src/plugins-tailwind/font.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG9D,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC;IAC1D,qBAAqB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,IAAI,iFAyDf,CAAC"}
+{"version":3,"file":"font.d.ts","sourceRoot":"","sources":["../../src/plugins-tailwind/font.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG9D,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC;IAC1D,qBAAqB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9C,UAAU,EAAE;QACV,UAAU,EAAE,MAAM,EAAE,CAAC;QACrB,OAAO,EAAE,MAAM,EAAE,CAAC;KACnB,CAAC;CACH;AAED,eAAO,MAAM,IAAI,iFA6Df,CAAC"}

package/dist/{tailwind.plugin-CwaBY8Mt.cjs → tailwind.plugin-DCCnMjHz.cjs}

@@ -454,17 +454,18 @@ const font = plugin.withOptions((options) => {
     addUtilities,
     theme: theme2
   }) => {
-    const { fontStyles, responsiveBreakPoints } = options;
+    const { fontStyles, responsiveBreakPoints, fontFamily } = options;
     const pixelUnit = "rem";
     const newUtilities = {};
     const baseTextStyle = (sizeValue) => {
-      const fontFamilyValue = theme2("fontFamily." + sizeValue.fontFamily);
+      const fontFamilyArray = fontFamily[sizeValue.fontFamily];
+      const processedFontFamily = fontFamilyArray.map((font2) => font2.trim().startsWith("var(") ? font2 : `"${font2}"`).join(", ");
       return {
         fontSize: sizeValue.fontSize + pixelUnit,
         fontWeight: sizeValue.fontWeight,
         lineHeight: sizeValue.lineHeight + pixelUnit,
         letterSpacing: sizeValue.letterSpacing ? sizeValue.letterSpacing + pixelUnit : null,
-        fontFamily: Array.isArray(fontFamilyValue) ? fontFamilyValue.join(", ") : fontFamilyValue
+        fontFamily: processedFontFamily
       };
     };
     const responsiveTextStyle = (sizeValue, breakPointName, breakPointRatio) => ({
@@ -634,10 +635,20 @@ const main = plugin.withOptions((args) => {
     const [key, value] = line.split(" ");
     responsiveBreakPoints[key] = value;
   });
+  let fontFamilyCss = configCss.fontFamily;
+  if (!Array.isArray(fontFamilyCss)) {
+    fontFamilyCss = [fontFamilyCss];
+  }
+  const fontFamily = {};
+  fontFamilyCss.forEach((line) => {
+    const [key, ...values] = line.split(" ");
+    fontFamily[key] = values.join(" ").split("|");
+  });
   const options = {
     colorKeys: configCss.colorKeys,
     fontStyles,
-    responsiveBreakPoints
+    responsiveBreakPoints,
+    fontFamily
   };
   return (api) => {
     font(options).handler(api);

package/dist/{tailwind.plugin-CJB7VyGG.js → tailwind.plugin-DONDY0v2.js}

@@ -453,17 +453,18 @@ const font = plugin.withOptions((options) => {
     addUtilities,
     theme
   }) => {
-    const { fontStyles, responsiveBreakPoints } = options;
+    const { fontStyles, responsiveBreakPoints, fontFamily } = options;
     const pixelUnit = "rem";
     const newUtilities = {};
     const baseTextStyle = (sizeValue) => {
-      const fontFamilyValue = theme("fontFamily." + sizeValue.fontFamily);
+      const fontFamilyArray = fontFamily[sizeValue.fontFamily];
+      const processedFontFamily = fontFamilyArray.map((font2) => font2.trim().startsWith("var(") ? font2 : `"${font2}"`).join(", ");
       return {
         fontSize: sizeValue.fontSize + pixelUnit,
         fontWeight: sizeValue.fontWeight,
         lineHeight: sizeValue.lineHeight + pixelUnit,
         letterSpacing: sizeValue.letterSpacing ? sizeValue.letterSpacing + pixelUnit : null,
-        fontFamily: Array.isArray(fontFamilyValue) ? fontFamilyValue.join(", ") : fontFamilyValue
+        fontFamily: processedFontFamily
       };
     };
     const responsiveTextStyle = (sizeValue, breakPointName, breakPointRatio) => ({
@@ -633,10 +634,20 @@ const main = plugin.withOptions((args) => {
     const [key, value] = line.split(" ");
     responsiveBreakPoints[key] = value;
   });
+  let fontFamilyCss = configCss.fontFamily;
+  if (!Array.isArray(fontFamilyCss)) {
+    fontFamilyCss = [fontFamilyCss];
+  }
+  const fontFamily = {};
+  fontFamilyCss.forEach((line) => {
+    const [key, ...values] = line.split(" ");
+    fontFamily[key] = values.join(" ").split("|");
+  });
   const options = {
     colorKeys: configCss.colorKeys,
     fontStyles,
-    responsiveBreakPoints
+    responsiveBreakPoints,
+    fontFamily
   };
   return (api) => {
     font(options).handler(api);

package/package.json

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

package/src/main.ts

@@ -9,6 +9,7 @@ export type ConfigCss = {
   colorKeys: string[];
   fontStyles: string[];
   responsiveBreakPoints: string[];
+  fontFamily: string[];
 };
 
 export const main = plugin.withOptions<ConfigJs>((args) => {
@@ -39,10 +40,22 @@ export const main = plugin.withOptions<ConfigJs>((args) => {
     responsiveBreakPoints[key] = value;
   });
 
+  let fontFamilyCss = configCss.fontFamily;
+  if (!Array.isArray(fontFamilyCss)) {
+    fontFamilyCss = [fontFamilyCss];
+  }
+
+  const fontFamily: any = {};
+  fontFamilyCss.forEach((line) => {
+    const [key, ...values] = line.split(' ');
+    fontFamily[key] = values.join(' ').split('|');
+  });
+
   const options: ConfigJs = {
     colorKeys: configCss.colorKeys,
     fontStyles: fontStyles,
     responsiveBreakPoints,
+    fontFamily,
   };
 
   return (api: PluginAPI) => {

package/src/node/tailwind.plugin.ts

@@ -90,12 +90,16 @@ class TailwindImplPlugin extends TailwindImplPluginBrowser {
       )
         .map(([key, value]) => `${key} ${value}`)
         .join(', ') as any,
+      fontFamily: Object.entries(fontFamily)
+        .map(([key, values]) => `${key} ${values.join('|')}`)
+        .join(', ') as any,
     };
 
     this.outputCss += `@plugin "@udixio/tailwind" {
   colorKeys: ${configCss.colorKeys};
   fontStyles: ${configCss.fontStyles};
   responsiveBreakPoints: ${configCss.responsiveBreakPoints};
+  fontFamily: ${configCss.fontFamily};
 }`;
     this.loadColor({ isDynamic: false });
     this.outputCss += `
@@ -103,7 +107,7 @@ class TailwindImplPlugin extends TailwindImplPluginBrowser {
   ${Object.entries(fontFamily)
     .map(
       ([key, values]) =>
-        `--font-${key}: ${values.map((value) => `"${value}"`).join(', ')};`,
+        `--font-${key}: ${values.map((value) => value.trim().startsWith('var(') ? value : `"${value}"`).join(', ')};`,
     )
     .join('\n  ')}
 }`;

package/src/plugins-tailwind/font.ts

@@ -4,6 +4,10 @@ import plugin, { PluginAPI } from 'tailwindcss/plugin';
 export interface FontPluginOptions {
   fontStyles: Record<FontRole, Record<FontSize, FontStyle>>;
   responsiveBreakPoints: Record<string, number>;
+  fontFamily: {
+    expressive: string[];
+    neutral: string[];
+  };
 }
 
 export const font = plugin.withOptions((options: FontPluginOptions) => {
@@ -11,13 +15,19 @@ export const font = plugin.withOptions((options: FontPluginOptions) => {
     addUtilities,
     theme,
   }: Pick<PluginAPI, 'addUtilities' | 'theme'>) => {
-    const { fontStyles, responsiveBreakPoints } = options;
+    const { fontStyles, responsiveBreakPoints, fontFamily } = options;
 
     const pixelUnit = 'rem';
     const newUtilities: Record<string, any> = {};
 
     const baseTextStyle = (sizeValue: FontStyle) => {
-      const fontFamilyValue = theme('fontFamily.' + sizeValue.fontFamily);
+      const fontFamilyArray = fontFamily[sizeValue.fontFamily as keyof typeof fontFamily];
+
+      // Process font family: keep var() without quotes, add quotes to others
+      const processedFontFamily = fontFamilyArray
+        .map((font) => (font.trim().startsWith('var(') ? font : `"${font}"`))
+        .join(', ');
+
       return {
         fontSize: sizeValue.fontSize + pixelUnit,
         fontWeight: sizeValue.fontWeight as unknown as any,
@@ -25,9 +35,7 @@ export const font = plugin.withOptions((options: FontPluginOptions) => {
         letterSpacing: sizeValue.letterSpacing
           ? sizeValue.letterSpacing + pixelUnit
           : null,
-        fontFamily: Array.isArray(fontFamilyValue)
-          ? fontFamilyValue.join(', ')
-          : fontFamilyValue,
+        fontFamily: processedFontFamily,
       };
     };