@udixio/tailwind 0.5.3 → 1.1.0

package/src/plugins-tailwind/state.ts

@@ -0,0 +1,75 @@
+import plugin, { PluginAPI } from 'tailwindcss/plugin';
+
+export type StateOptions = {
+  colorKeys: string[];
+};
+
+type Components = Record<string, Record<string, object>>;
+
+const defaultConfig = {
+  statePrefix: 'state',
+  disabledStyles: {
+    textOpacity: 0.38,
+    backgroundOpacity: 0.12,
+  },
+  transition: {
+    duration: 150,
+  },
+};
+
+export const state = plugin.withOptions(({ colorKeys }: StateOptions) => {
+  const resolved = {
+    ...defaultConfig,
+    disabledStyles: {
+      ...defaultConfig.disabledStyles,
+      ...{},
+    },
+    transition: {
+      ...defaultConfig.transition,
+      ...{},
+    },
+  };
+
+  return ({ addComponents }: PluginAPI) => {
+    const newComponents: Components = {};
+
+    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);
+  };
+});

package/src/tailwind.plugin.ts

@@ -0,0 +1,133 @@
+import {
+  createOrUpdateFile,
+  findProjectRoot,
+  findTailwindCssFile,
+  getFileContent,
+  replaceFileContent,
+} from './file';
+import path from 'path';
+import { FontPlugin, PluginAbstract, PluginImplAbstract } from '@udixio/theme';
+import { ConfigCss } from './main';
+import * as console from 'node:console';
+
+interface TailwindPluginOptions {
+  // darkMode?: 'class' | 'media';
+  responsiveBreakPoints?: Record<string, number>;
+  styleFilePath?: string;
+  // subThemes?: Record<string, string>;
+}
+
+export class TailwindPlugin extends PluginAbstract<
+  TailwindImplPlugin,
+  TailwindPluginOptions
+> {
+  public dependencies = [FontPlugin];
+  public name = 'tailwind';
+  pluginClass = TailwindImplPlugin;
+}
+
+class TailwindImplPlugin extends PluginImplAbstract<TailwindPluginOptions> {
+  onInit() {
+    this.options.responsiveBreakPoints ??= {
+      lg: 1.125,
+    };
+  }
+
+  onLoad() {
+    let udixioCssPath = this.options.styleFilePath;
+
+    const projectRoot = findProjectRoot(path.resolve());
+
+    if (!udixioCssPath) {
+      const searchPattern = /@import ["']tailwindcss["'];/;
+      const replacement = `@import 'tailwindcss';\n@import "./udixio.css";`;
+
+      const tailwindCssPath = findTailwindCssFile(projectRoot, searchPattern);
+      udixioCssPath = path.join(tailwindCssPath, '../udixio.css');
+
+      console.log('rrgfgt', tailwindCssPath, udixioCssPath);
+
+      if (!getFileContent(tailwindCssPath, /@import\s+"\.\/udixio\.css";/)) {
+        replaceFileContent(tailwindCssPath, searchPattern, replacement);
+      }
+    }
+
+    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();
+        colors[newKey] ??= { light: '', dark: '' };
+        colors[newKey][isDark ? 'dark' : 'light'] = value.getHex();
+      }
+    }
+
+    const { fontStyles, fontFamily } = this.api.plugins
+      .getPlugin(FontPlugin)
+      .getInstance()
+      .getFonts();
+
+    const configCss: ConfigCss = {
+      colorKeys: Object.keys(colors).join(', '),
+      fontStyles: Object.entries(fontStyles)
+        .map(([fontRole, fontStyle]) =>
+          Object.entries(fontStyle)
+            .map(
+              ([fontSize, fontStyle]) =>
+                `${fontRole}-${fontSize} ${Object.entries(fontStyle)
+                  .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  ')}
+}
+`,
+    );
+  }
+}

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "../theme"
+    },
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

package/tsconfig.lib.json

@@ -0,0 +1,37 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": "src",
+    "outDir": "dist",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo",
+    "emitDeclarationOnly": true,
+    "forceConsistentCasingInFileNames": true,
+    "types": [
+      "node",
+      "vite/client"
+    ]
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "references": [
+    {
+      "path": "../theme/tsconfig.lib.json"
+    }
+  ],
+  "exclude": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx"
+  ]
+}

package/tsconfig.spec.json

@@ -0,0 +1,36 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/vitest",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ],
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,54 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/packages/tailwind',
+  plugins: [
+    dts({
+      entryRoot: 'src',
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
+    }),
+  ],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: './dist',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    ssr: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: '@udixio/tailwind',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es' as const, 'cjs' as const],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['tailwindcss', '@udixio/theme'],
+    },
+  },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'node',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: './test-output/vitest/coverage',
+      provider: 'v8' as const,
+    },
+  },
+}));

package/index.cjs

@@ -1,313 +0,0 @@
-"use strict";
-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");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const fs__namespace = /* @__PURE__ */ _interopNamespaceDefault(fs);
-const path__namespace = /* @__PURE__ */ _interopNamespaceDefault(path);
-const createOrUpdateFile = (filePath, content) => {
-  try {
-    if (!fs__namespace.existsSync(filePath)) {
-      const dirPath = path__namespace.dirname(filePath);
-      if (!fs__namespace.existsSync(dirPath)) {
-        fs__namespace.mkdirSync(dirPath, { recursive: true });
-      }
-      fs__namespace.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__namespace.existsSync(filePath)) {
-      console.error(`❌ The specified file does not exist: ${filePath}`);
-      return null;
-    }
-    const fileContent = fs__namespace.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 = replaceInFile.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__namespace.readdirSync(startDir);
-  for (const file of files) {
-    const filePath = path__namespace.join(startDir, file);
-    const stats = fs__namespace.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__namespace.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: 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;
-  }
-}
-class TailwindImplPlugin extends theme.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.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(theme.FontPlugin).getInstance().getFonts();
-    createOrUpdateFile(
-      path.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 theme.bootstrapFromConfig();
-  const plugin2 = app.plugins.getPlugin(TailwindPlugin).getInstance();
-  return plugin2.load();
-};
-exports.TailwindPlugin = TailwindPlugin;
-exports.createTheme = createTheme;
-exports.default = createTheme;
-exports.font = font;
-exports.state = state;