@udixio/tailwind 0.5.3 → 1.1.0

package/dist/index.js

@@ -0,0 +1,342 @@
+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 plugin from "tailwindcss/plugin";
+import * as fs from "fs";
+import * as path from "path";
+import path__default from "path";
+import { replaceInFileSync } from "replace-in-file";
+import * as console from "node:console";
+import { PluginAbstract, FontPlugin, PluginImplAbstract } from "@udixio/theme";
+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
+  }) => {
+    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: theme("fontFamily." + sizeValue.fontFamily)
+    });
+    const responsiveTextStyle = (sizeValue, breakPointName, breakPointRatio) => ({
+      [`@media (min-width: ${theme("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.existsSync(filePath)) {
+      const dirPath = path.dirname(filePath);
+      if (!fs.existsSync(dirPath)) {
+        fs.mkdirSync(dirPath, { recursive: true });
+      }
+      fs.writeFileSync(filePath, content);
+      console.log(`✅ File successfully created: ${filePath}`);
+    } else {
+      console.log(`⚠️ File already exists: ${filePath}`);
+      replaceFileContent(filePath, /[\s\S]*/, content);
+    }
+  } catch (error) {
+    console.error("❌ Error while creating the file:", error);
+  }
+};
+const getFileContent = (filePath, searchPattern) => {
+  try {
+    if (!fs.existsSync(filePath)) {
+      console.error(`❌ The specified file does not exist: ${filePath}`);
+      return null;
+    }
+    const fileContent = fs.readFileSync(filePath, "utf8");
+    if (searchPattern) {
+      if (typeof searchPattern === "string") {
+        const found = fileContent.includes(searchPattern) ? searchPattern : false;
+        console.log(
+          found ? `✅ The file contains the specified string: "${searchPattern}"` : `⚠️ The file does NOT contain the specified string: "${searchPattern}"`
+        );
+        return found;
+      } else {
+        const match = fileContent.match(searchPattern);
+        if (match) {
+          console.log(`✅ Found match: "${match[0]}"`);
+          return match[0];
+        } else {
+          console.log(
+            `⚠️ No match found for the pattern: "${searchPattern.toString()}"`
+          );
+          return false;
+        }
+      }
+    }
+    console.log(`✅ File content successfully retrieved.`);
+    return fileContent;
+  } catch (error) {
+    console.error("❌ An error occurred while processing the file:", error);
+    return null;
+  }
+};
+const replaceFileContent = (filePath, searchPattern, replacement) => {
+  try {
+    const results = replaceInFileSync({
+      files: filePath,
+      from: searchPattern,
+      to: replacement
+    });
+    if (results.length > 0 && results[0].hasChanged) {
+      console.log(`✅ Content successfully replaced in the file: ${filePath}`);
+    } else {
+      console.log(
+        `⚠️ No replacement made. Here are some possible reasons:
+- The pattern ${searchPattern} was not found.
+- The file might already contain the expected content.`
+      );
+    }
+  } catch (error) {
+    console.error("❌ Error while replacing the file content:", error);
+  }
+};
+const findTailwindCssFile = (startDir, searchPattern) => {
+  console.log("Recherche du fichier contenant le motif...", startDir);
+  const stack = [startDir];
+  while (stack.length > 0) {
+    const currentDir = stack.pop();
+    const files = fs.readdirSync(currentDir);
+    for (const file of files) {
+      const filePath = path.join(currentDir, file);
+      let stats;
+      try {
+        stats = fs.statSync(filePath);
+      } catch (error) {
+        console.error(`Erreur lors de l'accès à ${filePath}:`, error);
+        continue;
+      }
+      if (stats.isDirectory()) {
+        if (file !== "node_modules") stack.push(filePath);
+      } else if (stats.isFile() && (file.endsWith(".css") || file.endsWith(".scss") || file.endsWith(".sass"))) {
+        try {
+          console.log(`Analyse du fichier : ${filePath}`);
+          const content = fs.readFileSync(filePath, "utf8");
+          if (content.match(searchPattern)) {
+            console.log("Fichier trouvé :", filePath);
+            return filePath;
+          }
+        } catch (readError) {
+          console.error(`Erreur lors de la lecture de ${filePath}:`, readError);
+        }
+      }
+    }
+  }
+  throw new Error(
+    `Impossible de trouver un fichier contenant "${searchPattern}" dans "${startDir}".`
+  );
+};
+function findProjectRoot(startPath) {
+  let currentPath = startPath;
+  while (!fs.existsSync(path.join(currentPath, "package.json"))) {
+    const parentPath = path.dirname(currentPath);
+    if (currentPath === parentPath) {
+      throw new Error("Impossible de localiser la racine du projet.");
+    }
+    currentPath = parentPath;
+  }
+  return currentPath;
+}
+class TailwindPlugin extends PluginAbstract {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "dependencies", [FontPlugin]);
+    __publicField(this, "name", "tailwind");
+    __publicField(this, "pluginClass", TailwindImplPlugin);
+  }
+}
+class TailwindImplPlugin extends PluginImplAbstract {
+  onInit() {
+    var _a;
+    (_a = this.options).responsiveBreakPoints ?? (_a.responsiveBreakPoints = {
+      lg: 1.125
+    });
+  }
+  onLoad() {
+    let udixioCssPath = this.options.styleFilePath;
+    const projectRoot = findProjectRoot(path__default.resolve());
+    if (!udixioCssPath) {
+      const searchPattern = /@import ["']tailwindcss["'];/;
+      const replacement = `@import 'tailwindcss';
+@import "./udixio.css";`;
+      const tailwindCssPath = findTailwindCssFile(projectRoot, searchPattern);
+      udixioCssPath = path__default.join(tailwindCssPath, "../udixio.css");
+      console.log("rrgfgt", tailwindCssPath, udixioCssPath);
+      if (!getFileContent(tailwindCssPath, /@import\s+"\.\/udixio\.css";/)) {
+        replaceFileContent(tailwindCssPath, searchPattern, replacement);
+      }
+    }
+    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();
+        colors[newKey] ?? (colors[newKey] = { light: "", dark: "" });
+        colors[newKey][isDark ? "dark" : "light"] = value.getHex();
+      }
+    }
+    const { fontStyles, fontFamily } = this.api.plugins.getPlugin(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(
+      udixioCssPath,
+      `
+@plugin "@udixio/tailwind" {
+  colorKeys: ${configCss.colorKeys};
+  fontStyles: ${configCss.fontStyles};
+  responsiveBreakPoints: ${configCss.responsiveBreakPoints};
+}
+@custom-variant dark (&:where(.dark, .dark *));
+@theme {
+  --color-*: initial;
+  ${Object.entries(colors).map(([key, value]) => `--color-${key}: ${value.light};`).join("\n  ")}
+}
+@layer theme {
+  .dark {
+  ${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  ")}
+}
+`
+    );
+  }
+}
+export {
+  TailwindPlugin,
+  main as default,
+  font,
+  state
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/plugins-tailwind/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC"}

package/{src → dist}/tailwind.plugin.d.ts

@@ -1,4 +1,3 @@
-import { default as plugin } from 'tailwindcss/plugin';
 import { FontPlugin, PluginAbstract, PluginImplAbstract } from '@udixio/theme';
 interface TailwindPluginOptions {
     responsiveBreakPoints?: Record<string, number>;
@@ -11,7 +10,7 @@ export declare class TailwindPlugin extends PluginAbstract<TailwindImplPlugin, T
 }
 declare class TailwindImplPlugin extends PluginImplAbstract<TailwindPluginOptions> {
     onInit(): void;
-    load(): ReturnType<typeof plugin.withOptions>;
+    onLoad(): void;
 }
 export {};
 //# sourceMappingURL=tailwind.plugin.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind.plugin.d.ts","sourceRoot":"","sources":["../src/tailwind.plugin.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAI/E,UAAU,qBAAqB;IAE7B,qBAAqB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;CAExB;AAED,qBAAa,cAAe,SAAQ,cAAc,CAChD,kBAAkB,EAClB,qBAAqB,CACtB;IACQ,YAAY,wBAAgB;IAC5B,IAAI,SAAc;IACzB,WAAW,4BAAsB;CAClC;AAED,cAAM,kBAAmB,SAAQ,kBAAkB,CAAC,qBAAqB,CAAC;IACxE,MAAM;IAMN,MAAM;CAiGP"}

package/package.json

@@ -1,19 +1,23 @@
 {
   "name": "@udixio/tailwind",
-  "version": "0.5.3",
+  "version": "1.1.0",
   "type": "module",
-  "main": "./src/index.ts",
-  "types": "./src/index.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
+    "./package.json": "./package.json",
     ".": {
-      "import": "./index.js",
-      "require": "./index.cjs",
-      "types": "./src/index.ts"
+      "development": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
     }
   },
   "dependencies": {
     "tslib": "^2.3.0",
-    "@udixio/theme": "0.5.3"
+    "@udixio/theme": "1.0.0"
   },
   "repository": {
     "type": "git",

package/src/file.ts

@@ -0,0 +1,163 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { replaceInFileSync } from 'replace-in-file';
+import * as console from 'node:console';
+
+export const createOrUpdateFile = (filePath: string, content: string): void => {
+  try {
+    if (!fs.existsSync(filePath)) {
+      // Create the folder if necessary.
+      const dirPath = path.dirname(filePath);
+      if (!fs.existsSync(dirPath)) {
+        fs.mkdirSync(dirPath, { recursive: true });
+      }
+
+      // Create the file with the provided content.
+      fs.writeFileSync(filePath, content);
+      console.log(`✅ File successfully created: ${filePath}`);
+    } else {
+      console.log(`⚠️ File already exists: ${filePath}`);
+      replaceFileContent(filePath, /[\s\S]*/, content);
+    }
+  } catch (error) {
+    console.error('❌ Error while creating the file:', error);
+  }
+};
+
+export const getFileContent = (
+  filePath: string,
+  searchPattern?: RegExp | string,
+): string | false | null => {
+  try {
+    // Vérifier si le fichier existe
+    if (!fs.existsSync(filePath)) {
+      console.error(`❌ The specified file does not exist: ${filePath}`);
+      return null;
+    }
+
+    // Lire le contenu du fichier entier
+    const fileContent = fs.readFileSync(filePath, 'utf8');
+
+    // Si un motif est fourni, chercher le texte correspondant
+    if (searchPattern) {
+      if (typeof searchPattern === 'string') {
+        const found = fileContent.includes(searchPattern)
+          ? searchPattern
+          : false;
+        console.log(
+          found
+            ? `✅ The file contains the specified string: "${searchPattern}"`
+            : `⚠️ The file does NOT contain the specified string: "${searchPattern}"`,
+        );
+        return found;
+      } else {
+        const match = fileContent.match(searchPattern);
+        if (match) {
+          console.log(`✅ Found match: "${match[0]}"`);
+          return match[0]; // Retourner le texte trouvé
+        } else {
+          console.log(
+            `⚠️ No match found for the pattern: "${searchPattern.toString()}"`,
+          );
+          return false; // Aucune correspondance trouvée
+        }
+      }
+    }
+
+    // Si aucun motif n'est fourni, retourner tout le contenu
+    console.log(`✅ File content successfully retrieved.`);
+    return fileContent;
+  } catch (error) {
+    console.error('❌ An error occurred while processing the file:', error);
+    return null;
+  }
+};
+
+export const replaceFileContent = (
+  filePath: string,
+  searchPattern: RegExp | string,
+  replacement: string,
+): void => {
+  try {
+    const results = replaceInFileSync({
+      files: filePath,
+      from: searchPattern,
+      to: replacement,
+    });
+
+    if (results.length > 0 && results[0].hasChanged) {
+      console.log(`✅ Content successfully replaced in the file: ${filePath}`);
+    } else {
+      console.log(
+        `⚠️ No replacement made. Here are some possible reasons:\n- The pattern ${searchPattern} was not found.\n- The file might already contain the expected content.`,
+      );
+    }
+  } catch (error) {
+    console.error('❌ Error while replacing the file content:', error);
+  }
+};
+export const findTailwindCssFile = (
+  startDir: string,
+  searchPattern: RegExp | string,
+): string | never => {
+  console.log('Recherche du fichier contenant le motif...', startDir);
+
+  const stack = [startDir]; // Pile pour éviter une récursion implicite.
+
+  while (stack.length > 0) {
+    const currentDir = stack.pop()!; // Récupérer un répertoire de la pile.
+    const files = fs.readdirSync(currentDir);
+
+    for (const file of files) {
+      const filePath = path.join(currentDir, file);
+
+      let stats: fs.Stats;
+      try {
+        stats = fs.statSync(filePath);
+      } catch (error) {
+        console.error(`Erreur lors de l'accès à ${filePath}:`, error);
+        continue; // Ignorer toute erreur d'accès.
+      }
+
+      // Ignorer le dossier `node_modules` et autres fichiers inutiles.
+      if (stats.isDirectory()) {
+        if (file !== 'node_modules') stack.push(filePath); // Empiler seulement les dossiers valides.
+      } else if (
+        stats.isFile() &&
+        (file.endsWith('.css') ||
+          file.endsWith('.scss') ||
+          file.endsWith('.sass'))
+      ) {
+        try {
+          console.log(`Analyse du fichier : ${filePath}`);
+          const content = fs.readFileSync(filePath, 'utf8');
+          if (content.match(searchPattern)) {
+            console.log('Fichier trouvé :', filePath);
+            return filePath; // Retour dès qu'un fichier valide est identifié.
+          }
+        } catch (readError) {
+          console.error(`Erreur lors de la lecture de ${filePath}:`, readError);
+        }
+      }
+    }
+  }
+
+  throw new Error(
+    `Impossible de trouver un fichier contenant "${searchPattern}" dans "${startDir}".`,
+  );
+};
+
+export function findProjectRoot(startPath) {
+  let currentPath = startPath;
+
+  // Boucle jusqu'à trouver un package.json ou jusqu'à arriver à la racine du système
+  while (!fs.existsSync(path.join(currentPath, 'package.json'))) {
+    const parentPath = path.dirname(currentPath);
+    if (currentPath === parentPath) {
+      throw new Error('Impossible de localiser la racine du projet.');
+    }
+    currentPath = parentPath;
+  }
+
+  return currentPath;
+}

package/src/index.test.ts

@@ -0,0 +1,5 @@
+import { it } from 'vitest';
+
+it.skip('this test is skipped', () => {
+  // Skipped test
+});

package/src/index.ts

@@ -0,0 +1,5 @@
+import { main } from './main';
+
+export * from './plugins-tailwind';
+export * from './tailwind.plugin';
+export default main;

package/src/main.ts

@@ -0,0 +1,52 @@
+import plugin, { PluginAPI } from 'tailwindcss/plugin';
+import {
+  font,
+  FontPluginOptions,
+  state,
+  StateOptions,
+} from './plugins-tailwind';
+
+export type ConfigJs = FontPluginOptions & StateOptions;
+export type ConfigCss = {
+  colorKeys: string[];
+  fontStyles: string[];
+  responsiveBreakPoints: string[];
+};
+
+export const main = plugin.withOptions<ConfigJs>((args) => {
+  const configCss = args as unknown as ConfigCss;
+
+  const fontStyles: any = {};
+
+  configCss.fontStyles.forEach((line) => {
+    const [styleToken, ...properties] = line.split(' ');
+    const [roleToken, sizeToken] = styleToken.split('-');
+
+    fontStyles[roleToken] ??= {};
+    properties.forEach((properties) => {
+      fontStyles[roleToken][sizeToken] ??= {};
+      const [key, value] = properties.slice(0, -1).split('[');
+      fontStyles[roleToken][sizeToken][key] = value;
+    });
+  });
+
+  let breakPointsCss = configCss.responsiveBreakPoints;
+  if (!Array.isArray(breakPointsCss)) {
+    breakPointsCss = [breakPointsCss];
+  }
+  const responsiveBreakPoints: any = {};
+  breakPointsCss.forEach(([key, value]) => {
+    responsiveBreakPoints[key] = value;
+  });
+
+  const options: ConfigJs = {
+    colorKeys: configCss.colorKeys,
+    fontStyles: fontStyles,
+    responsiveBreakPoints,
+  };
+
+  return (api: PluginAPI) => {
+    font(options).handler(api);
+    state(options).handler(api);
+  };
+});

package/src/plugins-tailwind/font.ts

@@ -0,0 +1,61 @@
+import { FontRole, FontSize, FontStyle } from '@udixio/theme';
+import plugin, { PluginAPI } from 'tailwindcss/plugin';
+
+export interface FontPluginOptions {
+  fontStyles: Record<FontRole, Record<FontSize, FontStyle>>;
+  responsiveBreakPoints: Record<string, number>;
+}
+
+export const font = plugin.withOptions((options: FontPluginOptions) => {
+  return ({
+    addUtilities,
+    theme,
+  }: Pick<PluginAPI, 'addUtilities' | 'theme'>) => {
+    const { fontStyles, responsiveBreakPoints } = options;
+
+    const pixelUnit = 'rem';
+    const newUtilities: Record<string, any> = {};
+
+    const baseTextStyle = (sizeValue: FontStyle) => ({
+      fontSize: sizeValue.fontSize + pixelUnit,
+      fontWeight: sizeValue.fontWeight as unknown as any,
+      lineHeight: sizeValue.lineHeight + pixelUnit,
+      letterSpacing: sizeValue.letterSpacing
+        ? sizeValue.letterSpacing + pixelUnit
+        : null,
+      fontFamily: theme('fontFamily.' + sizeValue.fontFamily),
+    });
+
+    const responsiveTextStyle = (
+      sizeValue: FontStyle,
+      breakPointName: string,
+      breakPointRatio: number,
+    ) => ({
+      [`@media (min-width: ${theme('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);
+  };
+});

package/src/plugins-tailwind/index.ts

@@ -0,0 +1,2 @@
+export * from './state';
+export * from './font';