@udixio/tailwind 1.3.0 → 1.4.0

package/src/node/file.ts

@@ -0,0 +1,340 @@
+import * as fs from 'fs';
+
+import * as console from 'node:console';
+import { dirname, join, normalize, resolve } from 'pathe';
+import chalk from 'chalk';
+
+// Fonction utilitaire universelle de normalisation des chemins
+const normalizePath = async (filePath: string): Promise<string> => {
+  const { fileURLToPath } = await import('url');
+
+  try {
+    if (filePath.startsWith('file://')) {
+      return normalize(fileURLToPath(filePath));
+    }
+    return normalize(filePath);
+  } catch (error) {
+    console.warn(
+      chalk.yellow(
+        `⚠️  Could not process path ${filePath}, treating as regular path`,
+      ),
+    );
+    return normalize(filePath);
+  }
+};
+
+// Wrapper sécurisé pour fs.existsSync
+const safeExistsSync = async (filePath: string): Promise<boolean> => {
+  return fs.existsSync(await normalizePath(filePath));
+};
+
+// Wrapper sécurisé pour fs.readFileSync
+const safeReadFileSync = async (
+  filePath: string,
+  encoding: BufferEncoding = 'utf8',
+): Promise<string> => {
+  return fs.readFileSync(await normalizePath(filePath), encoding);
+};
+
+// Wrapper sécurisé pour fs.writeFileSync
+const safeWriteFileSync = async (
+  filePath: string,
+  data: string,
+): Promise<void> => {
+  const normalizedPath = await normalizePath(filePath);
+  const dirPath = dirname(normalizedPath);
+
+  if (!fs.existsSync(dirPath)) {
+    fs.mkdirSync(dirPath, { recursive: true });
+  }
+
+  fs.writeFileSync(normalizedPath, data);
+};
+
+export const createOrUpdateFile = async (
+  filePath: string,
+  content: string,
+): Promise<void> => {
+  try {
+    const normalizedPath = normalizePath(filePath);
+
+    if (!(await safeExistsSync(filePath))) {
+      await safeWriteFileSync(filePath, content);
+      console.log(
+        chalk.green(`📄 Created`) +
+          chalk.gray(` • `) +
+          chalk.cyan(normalizedPath),
+      );
+    } else {
+      console.log(
+        chalk.blue(`📝 Exists`) +
+          chalk.gray(` • `) +
+          chalk.cyan(normalizedPath),
+      );
+      await replaceFileContent(filePath, /[\s\S]*/, content);
+    }
+  } catch (error) {
+    console.error(
+      chalk.red(`🚨 Failed to create file`) +
+        chalk.gray(` • `) +
+        chalk.cyan(filePath),
+    );
+    console.error(
+      chalk.gray(`   `) +
+        chalk.red(error instanceof Error ? error.message : error),
+    );
+  }
+};
+
+export const getFileContent = async (
+  filePath: string,
+  searchPattern?: RegExp | string,
+): Promise<string | false | null> => {
+  try {
+    const normalizedPath = normalizePath(filePath);
+
+    // Vérifier si le fichier existe
+    if (!(await safeExistsSync(filePath))) {
+      console.error(
+        chalk.red(`❌ File not found`) +
+          chalk.gray(` • `) +
+          chalk.cyan(normalizedPath),
+      );
+      return null;
+    }
+
+    // Lire le contenu du fichier entier
+    const fileContent = await safeReadFileSync(filePath);
+
+    // Si un motif est fourni, chercher le texte correspondant
+    if (searchPattern) {
+      if (typeof searchPattern === 'string') {
+        const found = fileContent.includes(searchPattern)
+          ? searchPattern
+          : false;
+        if (found) {
+          console.log(
+            chalk.green(`🔍 Found`) +
+              chalk.gray(` • `) +
+              chalk.yellow(`"${searchPattern}"`),
+          );
+        } else {
+          console.log(
+            chalk.yellow(`🔍 Missing`) +
+              chalk.gray(` • `) +
+              chalk.yellow(`"${searchPattern}"`),
+          );
+        }
+        return found;
+      } else {
+        const match = fileContent.match(searchPattern);
+        if (match) {
+          console.log(
+            chalk.green(`🎯 Match`) +
+              chalk.gray(` • `) +
+              chalk.yellow(`"${match[0]}"`),
+          );
+          return match[0];
+        } else {
+          console.log(
+            chalk.yellow(`🎯 No match`) +
+              chalk.gray(` • `) +
+              chalk.magenta(searchPattern.toString()),
+          );
+          return false;
+        }
+      }
+    }
+
+    console.log(
+      chalk.blue(`📖 Read`) + chalk.gray(` • `) + chalk.cyan(normalizedPath),
+    );
+    return fileContent;
+  } catch (error) {
+    console.error(
+      chalk.red(`🚨 Read failed`) + chalk.gray(` • `) + chalk.cyan(filePath),
+    );
+    console.error(
+      chalk.gray(`   `) +
+        chalk.red(error instanceof Error ? error.message : error),
+    );
+    return null;
+  }
+};
+
+export const replaceFileContent = async (
+  filePath: string,
+  searchPattern: RegExp | string,
+  replacement: string,
+): Promise<void> => {
+  try {
+    const { replaceInFileSync } = await import('replace-in-file');
+
+    const normalizedPath = await normalizePath(filePath);
+
+    const results = replaceInFileSync({
+      files: normalizedPath,
+      from: searchPattern,
+      to: replacement,
+    });
+
+    if (results.length > 0 && results[0].hasChanged) {
+      console.log(
+        chalk.green(`✏️  Updated`) +
+          chalk.gray(` • `) +
+          chalk.cyan(normalizedPath),
+      );
+    } else {
+      console.log(
+        chalk.yellow(`⏭️  Skipped`) +
+          chalk.gray(` • `) +
+          chalk.cyan(normalizedPath) +
+          chalk.gray(` (no changes needed)`),
+      );
+    }
+  } catch (error) {
+    console.error(
+      chalk.red(`🚨 Update failed`) + chalk.gray(` • `) + chalk.cyan(filePath),
+    );
+    console.error(
+      chalk.gray(`   `) +
+        chalk.red(error instanceof Error ? error.message : error),
+    );
+  }
+};
+
+export const findTailwindCssFile = async (
+  startDir: string,
+  searchPattern: RegExp | string,
+): Promise<string | never> => {
+  const normalizedStartDir = await normalizePath(startDir);
+  console.log(chalk.blue(`🔎 Searching for CSS file...`));
+  console.log(
+    chalk.gray(`   Starting from: `) + chalk.cyan(normalizedStartDir),
+  );
+
+  const stack = [normalizedStartDir];
+  let filesScanned = 0;
+
+  while (stack.length > 0) {
+    const currentDir = stack.pop()!;
+
+    let files: string[];
+    try {
+      files = fs.readdirSync(currentDir);
+    } catch (error) {
+      console.error(
+        chalk.gray(`   `) +
+          chalk.red(`❌ Cannot read directory: `) +
+          chalk.cyan(currentDir),
+      );
+      continue;
+    }
+
+    for (const file of files) {
+      const filePath = join(currentDir, file);
+
+      let stats: fs.Stats;
+      try {
+        stats = fs.statSync(filePath);
+      } catch (error) {
+        console.error(
+          chalk.gray(`   `) +
+            chalk.red(`❌ Cannot access: `) +
+            chalk.cyan(filePath),
+        );
+        continue;
+      }
+
+      if (stats.isDirectory()) {
+        if (file !== 'node_modules' && !file.startsWith('.')) {
+          stack.push(filePath);
+        }
+      } else if (
+        stats.isFile() &&
+        (file.endsWith('.css') ||
+          file.endsWith('.scss') ||
+          file.endsWith('.sass'))
+      ) {
+        try {
+          filesScanned++;
+          process.stdout.write(
+            chalk.gray(`   📂 Scanning: `) + chalk.yellow(file) + `\r`,
+          );
+
+          const content = await safeReadFileSync(filePath);
+
+          const hasMatch =
+            typeof searchPattern === 'string'
+              ? content.includes(searchPattern)
+              : searchPattern.test(content);
+
+          if (hasMatch) {
+            console.log(chalk.green(`\n🎯 Found target file!`));
+            console.log(chalk.gray(`   📍 Location: `) + chalk.cyan(filePath));
+            return filePath;
+          }
+        } catch (readError) {
+          console.error(
+            chalk.gray(`\n   `) +
+              chalk.red(`❌ Cannot read: `) +
+              chalk.cyan(filePath),
+          );
+        }
+      }
+    }
+  }
+
+  console.log(
+    chalk.blue(`\n📊 Scanned `) +
+      chalk.white.bold(filesScanned.toString()) +
+      chalk.blue(` CSS files`),
+  );
+
+  const errorMsg =
+    chalk.red(`❌ No file found containing `) +
+    chalk.yellow(`"${searchPattern}"`) +
+    chalk.red(` in `) +
+    chalk.cyan(`"${normalizedStartDir}"`);
+
+  throw new Error(errorMsg);
+};
+
+export async function findProjectRoot(startPath: string): Promise<string> {
+  const normalizedStartPath = await normalizePath(startPath);
+  let currentPath = resolve(normalizedStartPath);
+  let levels = 0;
+
+  console.log(chalk.blue(`🏠 Finding project root...`));
+  console.log(
+    chalk.gray(`   Starting from: `) + chalk.cyan(normalizedStartPath),
+  );
+
+  while (!fs.existsSync(join(currentPath, 'package.json'))) {
+    const parentPath = dirname(currentPath);
+    if (currentPath === parentPath) {
+      console.error(
+        chalk.red(`❌ Project root not found after checking `) +
+          chalk.white.bold(levels.toString()) +
+          chalk.red(` levels`),
+      );
+      throw new Error(
+        chalk.red('Unable to locate project root (no package.json found)'),
+      );
+    }
+    currentPath = parentPath;
+    levels++;
+
+    if (levels > 10) {
+      console.error(
+        chalk.red(`❌ Stopped after `) +
+          chalk.white.bold(levels.toString()) +
+          chalk.red(` levels (too deep)`),
+      );
+      throw new Error(chalk.red('Project root search exceeded maximum depth'));
+    }
+  }
+
+  console.log(chalk.green(`📁 Project root: `) + chalk.cyan(currentPath));
+  return currentPath;
+}

package/src/node/index.ts

@@ -0,0 +1,2 @@
+export * from './tailwind.plugin';
+export * from './file';

package/src/{tailwind.plugin.ts → node/tailwind.plugin.ts}

@@ -1,20 +1,8 @@
-import {
-  createOrUpdateFile,
-  findProjectRoot,
-  findTailwindCssFile,
-  getFileContent,
-  replaceFileContent,
-} from './file';
-import path from 'path';
-import { FontPlugin, PluginAbstract, PluginImplAbstract } from '@udixio/theme';
-import { ConfigCss } from './main';
+import { FontPlugin, PluginAbstract } from '@udixio/theme';
 
-interface TailwindPluginOptions {
-  // darkMode?: 'class' | 'media';
-  responsiveBreakPoints?: Record<string, number>;
-  styleFilePath?: string;
-  // subThemes?: Record<string, string>;
-}
+import { TailwindImplPluginBrowser, TailwindPluginOptions } from '../browser/tailwind.plugin';
+
+import { ConfigCss } from '../main';
 
 export class TailwindPlugin extends PluginAbstract<
   TailwindImplPlugin,
@@ -25,46 +13,59 @@ export class TailwindPlugin extends PluginAbstract<
   pluginClass = TailwindImplPlugin;
 }
 
-class TailwindImplPlugin extends PluginImplAbstract<TailwindPluginOptions> {
-  onInit() {
-    this.options.responsiveBreakPoints ??= {
-      lg: 1.125,
-    };
+class TailwindImplPlugin extends TailwindImplPluginBrowser {
+  private isNodeJs(): boolean {
+    return (
+      typeof process !== 'undefined' &&
+      process.versions != null &&
+      process.versions.node != null
+    );
   }
 
-  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');
-
-      if (!getFileContent(tailwindCssPath, /@import\s+"\.\/udixio\.css";/)) {
-        replaceFileContent(tailwindCssPath, searchPattern, replacement);
-      }
+  override async onLoad() {
+    if (!this.isNodeJs()) {
+      await super.onLoad();
+      return;
     }
+    const { join, resolve } = await import('pathe');
 
-    const colors: Record<
-      string,
-      {
-        light: string;
-        dark: string;
-      }
-    > = {};
-
+    const {
+      createOrUpdateFile,
+      findProjectRoot,
+      findTailwindCssFile,
+      getFileContent,
+      replaceFileContent,
+    } = await import('./file');
+    this.colors = {};
     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();
+        this.colors[newKey] ??= { light: '', dark: '' };
+        this.colors[newKey][isDark ? 'dark' : 'light'] = value.getHex();
+      }
+    }
+
+    let udixioCssPath = this.options.styleFilePath;
+
+    const projectRoot = await findProjectRoot(resolve());
+
+    if (!udixioCssPath) {
+      const searchPattern = /@import ["']tailwindcss["'];/;
+      const replacement = `@import 'tailwindcss';\n@import "./udixio.css";`;
+
+      const tailwindCssPath = await findTailwindCssFile(
+        projectRoot,
+        searchPattern,
+      );
+      udixioCssPath = join(tailwindCssPath, '../udixio.css');
+
+      if (
+        !(await getFileContent(tailwindCssPath, /@import\s+"\.\/udixio\.css";/))
+      ) {
+        await replaceFileContent(tailwindCssPath, searchPattern, replacement);
       }
     }
 
@@ -74,7 +75,7 @@ class TailwindImplPlugin extends PluginImplAbstract<TailwindPluginOptions> {
       .getFonts();
 
     const configCss: ConfigCss = {
-      colorKeys: Object.keys(colors).join(', '),
+      colorKeys: Object.keys(this.colors).join(', ') as any,
       fontStyles: Object.entries(fontStyles)
         .map(([fontRole, fontStyle]) =>
           Object.entries(fontStyle)
@@ -86,36 +87,21 @@ class TailwindImplPlugin extends PluginImplAbstract<TailwindPluginOptions> {
             )
             .join(', '),
         )
-        .join(', '),
+        .join(', ') as any,
       responsiveBreakPoints: Object.entries(
         this.options.responsiveBreakPoints ?? {},
       )
         .map(([key, value]) => `${key} ${value}`)
-        .join(', '),
+        .join(', ') as any,
     };
 
-    createOrUpdateFile(
-      udixioCssPath,
-      `
-@plugin "@udixio/tailwind" {
+    this.outputCss += `@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  ')}
-  }
-}
+}`;
+    this.loadColor();
+    this.outputCss += `
 @theme {
   ${Object.entries(fontFamily)
     .map(
@@ -123,8 +109,8 @@ class TailwindImplPlugin extends PluginImplAbstract<TailwindPluginOptions> {
         `--font-${key}: ${values.map((value) => `"${value}"`).join(', ')};`,
     )
     .join('\n  ')}
-}
-`,
-    );
+}`;
+
+    await createOrUpdateFile(udixioCssPath, this.outputCss);
   }
 }

package/vite.config.ts

@@ -2,6 +2,7 @@
 import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 import * as path from 'path';
+import { visualizer } from 'rollup-plugin-visualizer';
 
 export default defineConfig(() => ({
   root: __dirname,
@@ -11,6 +12,12 @@ export default defineConfig(() => ({
       entryRoot: 'src',
       tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
     }),
+    visualizer({
+      filename: '../../stats/tailwind.html',
+      open: false,
+      gzipSize: true,
+      brotliSize: true,
+    }),
   ],
   // Uncomment this if you are using workers.
   // worker: {
@@ -19,25 +26,35 @@ export default defineConfig(() => ({
   // Configuration for building your library.
   // See: https://vitejs.dev/guide/build.html#library-mode
   build: {
+    ssr: true,
     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',
+      entry: {
+        node: 'src/index.node.ts',
+        browser: 'src/index.browser.ts',
+      },
       name: '@udixio/tailwind',
-      fileName: 'index',
+      fileName: (format, entryName) =>
+        `${entryName}.${format === 'es' ? 'js' : 'cjs'}`,
       // 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', 'pathe'],
+      external: [
+        'tailwindcss',
+        '@udixio/theme',
+        'pathe',
+        'replace-in-file',
+        'chalk',
+      ],
     },
   },
   test: {

package/dist/file.d.ts

@@ -1,6 +0,0 @@
-export declare const createOrUpdateFile: (filePath: string, content: string) => void;
-export declare const getFileContent: (filePath: string, searchPattern?: RegExp | string) => string | false | null;
-export declare const replaceFileContent: (filePath: string, searchPattern: RegExp | string, replacement: string) => void;
-export declare const findTailwindCssFile: (startDir: string, searchPattern: RegExp | string) => string | never;
-export declare function findProjectRoot(startPath: string): string;
-//# sourceMappingURL=file.d.ts.map

package/dist/file.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"file.d.ts","sourceRoot":"","sources":["../src/file.ts"],"names":[],"mappings":"AA8CA,eAAO,MAAM,kBAAkB,GAAI,UAAU,MAAM,EAAE,SAAS,MAAM,KAAG,IActE,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,UAAU,MAAM,EAChB,gBAAgB,MAAM,GAAG,MAAM,KAC9B,MAAM,GAAG,KAAK,GAAG,IA8CnB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,UAAU,MAAM,EAChB,eAAe,MAAM,GAAG,MAAM,EAC9B,aAAa,MAAM,KAClB,IAsBF,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,UAAU,MAAM,EAChB,eAAe,MAAM,GAAG,MAAM,KAC7B,MAAM,GAAG,KAkEX,CAAC;AAEF,wBAAgB,eAAe,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAczD"}