tailwind-to-style 2.8.6 → 2.8.8

package/dist/index.browser.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.8.6
+ * tailwind-to-style v2.8.8
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion

package/dist/index.cjs

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.8.6
+ * tailwind-to-style v2.8.8
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.8.6
+ * tailwind-to-style v2.8.8
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion

package/lib/twsx-cli.js

@@ -24,6 +24,7 @@ async function buildTwsx(inputDir, outputDir, preserveStructure = false) {
     const generatedCssFiles = [];
 
     // Generate CSS from JS files
+    let cssWrittenCount = 0;
     for (const filePath of twsxFiles) {
       try {
         const styleModule = await import(
@@ -32,7 +33,7 @@ async function buildTwsx(inputDir, outputDir, preserveStructure = false) {
         const styleObj = styleModule.default || styleModule;
         const css = twsx(styleObj, { inject: false });
         const fileName = path.basename(filePath).replace(/\.js$/, ".css");
-        
+
         let cssFilePath;
         if (preserveStructure) {
           // Generate CSS in the same directory as the JS file
@@ -41,10 +42,10 @@ async function buildTwsx(inputDir, outputDir, preserveStructure = false) {
           // Generate CSS in the output directory
           cssFilePath = path.join(outputDir, fileName);
         }
-        
+
         fs.writeFileSync(cssFilePath, css);
         generatedCssFiles.push(preserveStructure ? cssFilePath : fileName);
-        console.log(`[twsx-cli] CSS written to ${cssFilePath}`);
+        cssWrittenCount++;
       } catch (err) {
         console.error(
           `[twsx-cli] Error importing or processing ${filePath}:`,
@@ -52,6 +53,16 @@ async function buildTwsx(inputDir, outputDir, preserveStructure = false) {
         );
       }
     }
+    if (cssWrittenCount > 0) {
+      const green = "\x1b[32m";
+      const reset = "\x1b[0m";
+      const check = green + "✔" + reset;
+      const now = new Date();
+      const time = now.toLocaleTimeString();
+      console.log(
+        `[twsx-cli] ${check} CSS updated in ${cssWrittenCount} file(s) at ${time}`
+      );
+    }
 
     // Clean up orphaned CSS files
     if (!preserveStructure && fs.existsSync(outputDir)) {
@@ -69,12 +80,14 @@ async function buildTwsx(inputDir, outputDir, preserveStructure = false) {
     } else if (preserveStructure) {
       // Clean up orphaned CSS files in preserve structure mode
       const twsxFiles = findTwsxFiles(inputDir);
-      const expectedCssFiles = twsxFiles.map(file => file.replace(/\.js$/, ".css"));
-      
+      const expectedCssFiles = twsxFiles.map((file) =>
+        file.replace(/\.js$/, ".css")
+      );
+
       // Find and remove orphaned CSS files
       function cleanupOrphanedCss(dir) {
         if (!fs.existsSync(dir)) return;
-        
+
         const items = fs.readdirSync(dir);
         for (const item of items) {
           const fullPath = path.join(dir, item);
@@ -89,7 +102,7 @@ async function buildTwsx(inputDir, outputDir, preserveStructure = false) {
           }
         }
       }
-      
+
       cleanupOrphanedCss(inputDir);
     }
   } catch (err) {
@@ -101,8 +114,11 @@ const inputDir =
   process.env.TWSX_INPUT_DIR || path.resolve(process.cwd(), "src");
 const outputDir =
   process.env.TWSX_OUTPUT_DIR || path.resolve(process.cwd(), "src/styles");
-const watchMode = process.argv.includes("--watch") || process.env.TWSX_WATCH === "true";
-const preserveStructure = process.argv.includes("--preserve-structure") || process.env.TWSX_PRESERVE_STRUCTURE === "true";
+const watchMode =
+  process.argv.includes("--watch") || process.env.TWSX_WATCH === "true";
+const preserveStructure =
+  process.argv.includes("--preserve-structure") ||
+  process.env.TWSX_PRESERVE_STRUCTURE === "true";
 
 if (!preserveStructure && !fs.existsSync(outputDir)) {
   fs.mkdirSync(outputDir, { recursive: true });
@@ -116,24 +132,41 @@ if (!preserveStructure && !fs.existsSync(outputDir)) {
 
     if (watchMode) {
       console.log(`[twsx-cli] Watching for changes in ${inputDir}...`);
-      
+
       const watcher = chokidar.watch(`${inputDir}/**/twsx.*.js`, {
         ignored: /node_modules/,
         persistent: true,
       });
 
-      watcher
-        .on("change", async (filePath) => {
-          console.log(`[twsx-cli] File changed: ${filePath}`);
+      let changeTimeout = null;
+      let pendingChange = false;
+      function triggerBatchBuild() {
+        if (changeTimeout) clearTimeout(changeTimeout);
+        changeTimeout = setTimeout(async () => {
+          pendingChange = false;
+          const green = "\x1b[32m";
+          const reset = "\x1b[0m";
+          const check = green + "✔" + reset;
+          const now = new Date();
+          const time = now.toLocaleTimeString();
+          console.log(
+            `[twsx-cli] ${check} Detected changes, updating CSS at ${time}`
+          );
           await buildTwsx(inputDir, outputDir, preserveStructure);
+        }, 100);
+      }
+      watcher
+        .on("change", () => {
+          pendingChange = true;
+          triggerBatchBuild();
         })
-        .on("add", async (filePath) => {
-          console.log(`[twsx-cli] File added: ${filePath}`);
-          await buildTwsx(inputDir, outputDir, preserveStructure);
+        .on("add", () => {
+          pendingChange = true;
+          triggerBatchBuild();
         })
-        .on("unlink", async (filePath) => {
-          console.log(`[twsx-cli] File removed: ${filePath}`);
-          await buildTwsx(inputDir, outputDir, preserveStructure);
+        .on("unlink", () => {
+          pendingChange = true;
+          triggerBatchBuild();
         });
 
       // Keep the process alive

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-to-style",
-  "version": "2.8.6",
+  "version": "2.8.8",
   "description": "Convert tailwind classes to inline style",
   "type": "module",
   "main": "dist/index.cjs",

package/plugins/vite-twsx.js

@@ -23,6 +23,7 @@ async function buildTwsx(inputDir, outputDir, preserveStructure = false) {
     const generatedCssFiles = [];
 
     // Generate CSS from JS files
+    let cssWrittenCount = 0;
     for (const filePath of twsxFiles) {
       try {
         const styleModule = await import(
@@ -31,7 +32,7 @@ async function buildTwsx(inputDir, outputDir, preserveStructure = false) {
         const styleObj = styleModule.default || styleModule;
         const css = twsx(styleObj, { inject: false });
         const fileName = path.basename(filePath).replace(/\.js$/, ".css");
-        
+
         let cssFilePath;
         if (preserveStructure) {
           // Generate CSS file next to the JS file
@@ -40,15 +41,16 @@ async function buildTwsx(inputDir, outputDir, preserveStructure = false) {
           // Generate CSS file in the output directory
           cssFilePath = path.join(outputDir, fileName);
         }
-        
+
         // Ensure the directory exists
         const cssDir = path.dirname(cssFilePath);
         if (!fs.existsSync(cssDir)) {
           fs.mkdirSync(cssDir, { recursive: true });
         }
-        
+
         fs.writeFileSync(cssFilePath, css);
-        generatedCssFiles.push(preserveStructure ? cssFilePath : fileName);
+        generatedCssFiles.push(cssFilePath);
+        cssWrittenCount++;
       } catch (err) {
         console.error(
           `[vite-twsx] Error importing or processing ${filePath}:`,
@@ -56,6 +58,16 @@ async function buildTwsx(inputDir, outputDir, preserveStructure = false) {
         );
       }
     }
+    if (cssWrittenCount > 0) {
+      const green = "\x1b[32m";
+      const reset = "\x1b[0m";
+      const check = green + "✔" + reset;
+      const now = new Date();
+      const time = now.toLocaleTimeString();
+      console.log(
+        `[vite-twsx] ${check} CSS updated in ${cssWrittenCount} file(s) at ${time}`
+      );
+    }
 
     // Clean up orphaned CSS files
     if (preserveStructure) {
@@ -75,17 +87,19 @@ async function buildTwsx(inputDir, outputDir, preserveStructure = false) {
           .filter((file) => file.startsWith("twsx.") && file.endsWith(".css"));
 
         for (const cssFile of existingCssFiles) {
-          if (!generatedCssFiles.includes(cssFile)) {
-            const cssFilePath = path.join(outputDir, cssFile);
+          const cssFilePath = path.join(outputDir, cssFile);
+          if (!generatedCssFiles.includes(cssFilePath)) {
             fs.unlinkSync(cssFilePath);
           }
         }
       }
     }
+
+    return { generatedCssFiles };
   } catch (err) {
     console.error("[vite-twsx] Error scanning for twsx files:", err);
+    return { generatedCssFiles: [] };
   }
-  return null;
 }
 
 export default function twsxPlugin(options = {}) {
@@ -94,6 +108,9 @@ export default function twsxPlugin(options = {}) {
     options.outputDir || path.resolve(process.cwd(), "src/styles");
   const preserveStructure = options.preserveStructure || false;
 
+  // Keep track of generated files to avoid triggering on our own changes
+  const generatedFiles = new Set();
+
   if (!preserveStructure && !fs.existsSync(outputDir)) {
     fs.mkdirSync(outputDir, { recursive: true });
   }
@@ -102,16 +119,42 @@ export default function twsxPlugin(options = {}) {
     name: "vite-twsx",
     async buildStart() {
       try {
-        await buildTwsx(inputDir, outputDir, preserveStructure);
+        const result = await buildTwsx(inputDir, outputDir, preserveStructure);
+        // Track generated CSS files
+        if (result && result.generatedCssFiles) {
+          result.generatedCssFiles.forEach((file) => generatedFiles.add(file));
+        }
       } catch (err) {
         console.error("[vite-twsx] Error writing CSS:", err);
       }
     },
-    async handleHotUpdate() {
-      try {
-        await buildTwsx(inputDir, outputDir, preserveStructure);
-      } catch (err) {
-        console.error("[vite-twsx] Error updating CSS:", err);
+    async handleHotUpdate({ file, server }) {
+      // Skip if this is a CSS file we generated
+      if (generatedFiles.has(file)) {
+        return [];
+      }
+
+      // Only process .js files that start with "twsx."
+      if (file.endsWith(".js") && path.basename(file).startsWith("twsx.")) {
+        try {
+          const result = await buildTwsx(
+            inputDir,
+            outputDir,
+            preserveStructure
+          );
+
+          // Update our tracking of generated files
+          if (result && result.generatedCssFiles) {
+            generatedFiles.clear();
+            result.generatedCssFiles.forEach((f) => generatedFiles.add(f));
+          }
+
+          // Return empty array to prevent default HMR handling
+          return [];
+        } catch (err) {
+          console.error("[vite-twsx] Error updating CSS:", err);
+          return [];
+        }
       }
     },
   };

package/plugins/webpack-twsx.js

@@ -23,6 +23,7 @@ async function buildTwsx(inputDir, outputDir, preserveStructure = false) {
     const generatedCssFiles = [];
 
     // Generate CSS from JS files
+    let cssWrittenCount = 0;
     for (const filePath of twsxFiles) {
       try {
         const styleModule = await import(
@@ -31,7 +32,7 @@ async function buildTwsx(inputDir, outputDir, preserveStructure = false) {
         const styleObj = styleModule.default || styleModule;
         const css = twsx(styleObj, { inject: false });
         const fileName = path.basename(filePath).replace(/\.js$/, ".css");
-        
+
         let cssFilePath;
         if (preserveStructure) {
           // Generate CSS file next to the JS file
@@ -40,15 +41,16 @@ async function buildTwsx(inputDir, outputDir, preserveStructure = false) {
           // Generate CSS file in the output directory
           cssFilePath = path.join(outputDir, fileName);
         }
-        
+
         // Ensure the directory exists
         const cssDir = path.dirname(cssFilePath);
         if (!fs.existsSync(cssDir)) {
           fs.mkdirSync(cssDir, { recursive: true });
         }
-        
+
         fs.writeFileSync(cssFilePath, css);
         generatedCssFiles.push(preserveStructure ? cssFilePath : fileName);
+        cssWrittenCount++;
       } catch (err) {
         console.error(
           `[webpack-twsx] Error importing or processing ${filePath}:`,
@@ -56,6 +58,16 @@ async function buildTwsx(inputDir, outputDir, preserveStructure = false) {
         );
       }
     }
+    if (cssWrittenCount > 0) {
+      const green = "\x1b[32m";
+      const reset = "\x1b[0m";
+      const check = green + "✔" + reset;
+      const now = new Date();
+      const time = now.toLocaleTimeString();
+      console.log(
+        `[webpack-twsx] ${check} CSS updated in ${cssWrittenCount} file(s) at ${time}`
+      );
+    }
 
     // Clean up orphaned CSS files
     if (preserveStructure) {
@@ -74,7 +86,10 @@ async function buildTwsx(inputDir, outputDir, preserveStructure = false) {
           return file.startsWith("twsx.") && file.endsWith(".css");
         });
 
-        if (Array.isArray(existingCssFiles) && Array.isArray(generatedCssFiles)) {
+        if (
+          Array.isArray(existingCssFiles) &&
+          Array.isArray(generatedCssFiles)
+        ) {
           for (const cssFile of existingCssFiles) {
             if (!generatedCssFiles.includes(cssFile)) {
               const cssFilePath = path.join(outputDir, cssFile);
@@ -95,7 +110,7 @@ class TwsxPlugin {
     this.outputDir =
       options.outputDir || path.resolve(process.cwd(), "src/styles");
     this.preserveStructure = options.preserveStructure || false;
-    
+
     if (!this.preserveStructure && !fs.existsSync(this.outputDir)) {
       fs.mkdirSync(this.outputDir, { recursive: true });
     }