@udixio/tailwind 0.5.3 → 1.1.0

package/index.js

@@ -1,296 +0,0 @@
-import { PluginAbstract, FontPlugin, PluginImplAbstract, bootstrapFromConfig } from "@udixio/theme";
-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";
-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) => {
-  const files = fs.readdirSync(startDir);
-  for (const file of files) {
-    const filePath = path.join(startDir, file);
-    const stats = fs.statSync(filePath);
-    if (stats.isDirectory()) {
-      const result = findTailwindCssFile(filePath, searchPattern);
-      if (result) return result;
-    } else if (file.endsWith(".css") || file.endsWith(".scss") || file.endsWith(".sass")) {
-      const content = fs.readFileSync(filePath, "utf8");
-      if (content.includes(searchPattern)) {
-        console.log("File found:\n", filePath);
-        return filePath;
-      }
-    }
-  }
-  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 }) => {
-    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 = {
-                ...acc,
-                ...responsiveTextStyle(
-                  sizeValue,
-                  breakPointName,
-                  breakPointRatio
-                )
-              };
-              return acc;
-            },
-            {}
-          )
-        };
-      }
-    }
-    return newUtilities;
-  };
-  return plugin(
-    ({
-      addUtilities,
-      theme
-    }) => {
-      const newUtilities = createUtilities({ theme });
-      addUtilities(newUtilities);
-    }
-  );
-};
-class TailwindPlugin extends PluginAbstract {
-  constructor() {
-    super(...arguments);
-    this.dependencies = [FontPlugin];
-    this.name = "tailwind";
-    this.pluginClass = TailwindImplPlugin;
-  }
-}
-class TailwindImplPlugin extends PluginImplAbstract {
-  onInit() {
-    var _a;
-    (_a = this.options).responsiveBreakPoints ?? (_a.responsiveBreakPoints = {
-      lg: 1.125
-    });
-  }
-  load() {
-    const searchKeyword = '@plugin "@udixio/tailwind"';
-    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")'
-      );
-    }
-    const searchPattern = /@import ["']tailwindcss["'];/;
-    const replacement = `@import 'tailwindcss';
-@import "./udixio.css";`;
-    if (!getFileContent(tailwindCssPath, /@import\s+"\.\/udixio\.css";/)) {
-      replaceFileContent(tailwindCssPath, searchPattern, replacement);
-    }
-    const cssFilePath = path__default.dirname(tailwindCssPath);
-    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();
-    createOrUpdateFile(
-      path__default.join(cssFilePath, "udixio.css"),
-      `
-@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  ")}
-  }
-}
-`
-    );
-    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 bootstrapFromConfig();
-  const plugin2 = app.plugins.getPlugin(TailwindPlugin).getInstance();
-  return plugin2.load();
-};
-export {
-  TailwindPlugin,
-  createTheme,
-  createTheme as default,
-  font,
-  state
-};

package/src/file.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"file.d.ts","sourceRoot":"","sources":["../../../../packages/tailwind/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/src/index.d.ts

@@ -1,6 +0,0 @@
-import { createTheme } from './main';
-export * from './main';
-export * from './plugins-tailwind';
-export * from './tailwind.plugin';
-export default createTheme;
-//# sourceMappingURL=index.d.ts.map

package/src/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../packages/tailwind/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAErC,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,eAAe,WAAW,CAAC"}

package/src/main.d.ts

@@ -1,3 +0,0 @@
-import { default as plugin } from 'tailwindcss/plugin';
-export declare const createTheme: () => Promise<ReturnType<typeof plugin.withOptions>>;
-//# sourceMappingURL=main.d.ts.map

package/src/main.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../../packages/tailwind/src/main.ts"],"names":[],"mappings":"AAEA,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAExC,eAAO,MAAM,WAAW,EAAE,MAAM,OAAO,CACrC,UAAU,CAAC,OAAO,MAAM,CAAC,WAAW,CAAC,CAKtC,CAAC"}

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

@@ -1,4 +0,0 @@
-import { FontRole, FontSize, FontStyle } from '@udixio/theme';
-import { default as plugin } from 'tailwindcss/plugin';
-export declare const font: (fontStyles: Record<FontRole, Record<FontSize, FontStyle>>, responsiveBreakPoints: Record<string, number>) => ReturnType<typeof plugin>;
-//# sourceMappingURL=font.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"font.d.ts","sourceRoot":"","sources":["../../../../../packages/tailwind/src/plugins-tailwind/font.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,MAAqB,MAAM,oBAAoB,CAAC;AAEvD,eAAO,MAAM,IAAI,EAAE,CACjB,UAAU,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,EACzD,qBAAqB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAC1C,UAAU,CAAC,OAAO,MAAM,CA2D5B,CAAC"}

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

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

package/src/plugins-tailwind/state.d.ts

@@ -1,3 +0,0 @@
-import { default as plugin } from 'tailwindcss/plugin';
-export declare const state: (colorKeys: string[]) => ReturnType<typeof plugin>;
-//# sourceMappingURL=state.d.ts.map

package/src/plugins-tailwind/state.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../../../../packages/tailwind/src/plugins-tailwind/state.ts"],"names":[],"mappings":"AACA,OAAO,MAAqB,MAAM,oBAAoB,CAAC;AAevD,eAAO,MAAM,KAAK,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,UAAU,CAAC,OAAO,MAAM,CAkB7D,CAAC"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"tailwind.plugin.d.ts","sourceRoot":"","sources":["../../../../packages/tailwind/src/tailwind.plugin.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAUxC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAE/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,IAAI,IAAI,UAAU,CAAC,OAAO,MAAM,CAAC,WAAW,CAAC;CAwF9C"}