tailwind-to-style 2.8.5 → 2.8.8

package/README.md

@@ -506,18 +506,29 @@ export default {
   plugins: [
     twsxPlugin({
       inputDir: 'src',
-      outputDir: 'src/styles'
+      outputDir: 'src/styles',
+      preserveStructure: false  // Set to true to generate CSS next to JS files
     })
   ]
 };
 ```
 
-After build, individual CSS files will be created in `src/styles/` (e.g., `twsx.card.css`, `twsx.button.css`).
+**Configuration Options:**
+- `inputDir`: Directory to scan for `twsx.*.js` files (default: `'src'`)
+- `outputDir`: Directory where CSS files will be generated (default: `'src/styles'`)
+- `preserveStructure`: Whether to generate CSS files next to their JS counterparts (default: `false`)
+
+**Default mode:** CSS files created in `src/styles/` (e.g., `twsx.card.css`, `twsx.button.css`).
+**Preserve structure mode:** CSS files created next to JS files (e.g., `src/components/Card/twsx.card.css`).
+
 Import in your components:
 ```js
-// Import specific CSS files
+// Default mode
 import './styles/twsx.card.css';
 import './styles/twsx.button.css';
+
+// Preserve structure mode
+import './twsx.card.css';  // If in same directory
 ```
 
 #### Webpack Plugin Usage Example
@@ -530,18 +541,29 @@ module.exports = {
   plugins: [
     new TwsxPlugin({
       inputDir: 'src',
-      outputDir: 'src/styles'
+      outputDir: 'src/styles',
+      preserveStructure: false  // Set to true to generate CSS next to JS files
     })
   ]
 };
 ```
 
-After build, individual CSS files will be created in `src/styles/` (e.g., `twsx.card.css`, `twsx.button.css`).
+**Configuration Options:**
+- `inputDir`: Directory to scan for `twsx.*.js` files (default: `'src'`)
+- `outputDir`: Directory where CSS files will be generated (default: `'src/styles'`)
+- `preserveStructure`: Whether to generate CSS files next to their JS counterparts (default: `false`)
+
+**Default mode:** CSS files created in `src/styles/` (e.g., `twsx.card.css`, `twsx.button.css`).
+**Preserve structure mode:** CSS files created next to JS files (e.g., `src/components/Card/twsx.card.css`).
+
 Import in your components:
 ```js
-// Import specific CSS files
+// Default mode
 import './styles/twsx.card.css';
 import './styles/twsx.button.css';
+
+// Preserve structure mode
+import './twsx.card.css';  // If in same directory
 ```
 
 ## Build-Time CSS Generation via Script
@@ -568,25 +590,56 @@ node tailwind-to-style/lib/twsx-cli.js
 node tailwind-to-style/lib/twsx-cli.js --watch
 ```
 
+4. **Preserve Structure Mode (Generate CSS next to JS files):**
+```bash
+# One-time build with preserve structure
+node tailwind-to-style/lib/twsx-cli.js --preserve-structure
+
+# Watch mode with preserve structure
+node tailwind-to-style/lib/twsx-cli.js --watch --preserve-structure
+```
+
 You can configure input and output directories using environment variables:
 ```bash
 TWSX_INPUT_DIR=src TWSX_OUTPUT_DIR=dist/styles node tailwind-to-style/lib/twsx-cli.js --watch
 ```
 
-4. After running, individual CSS files will be available in the output directory (default: `src/styles/`):
+Or use environment variables for preserve structure:
+```bash
+TWSX_PRESERVE_STRUCTURE=true node tailwind-to-style/lib/twsx-cli.js --watch
+```
+
+5. **Output locations:**
 
+**Default mode:** CSS files will be in the output directory (default: `src/styles/`):
 ```
 src/styles/twsx.card.css
 src/styles/twsx.button.css
 ```
 
+**Preserve structure mode:** CSS files will be generated next to their JS counterparts:
+```
+src/components/Button/twsx.button.js  →  src/components/Button/twsx.button.css
+src/components/Card/twsx.card.js      →  src/components/Card/twsx.card.css
+```
+
 5. Import the generated CSS files in your components:
 
+**Default mode:**
 ```js
 import './styles/twsx.card.css';
 import './styles/twsx.button.css';
 ```
 
+**Preserve structure mode:**
+```js
+// In src/components/Button/Button.jsx
+import './twsx.button.css';
+
+// In src/components/Card/Card.jsx
+import './twsx.card.css';
+```
+
 #### Usage in Different Projects
 
 **React/Next.js/Vue/Any Project:**
@@ -602,6 +655,8 @@ npm install tailwind-to-style
   "scripts": {
     "twsx:build": "node node_modules/tailwind-to-style/lib/twsx-cli.js",
     "twsx:watch": "node node_modules/tailwind-to-style/lib/twsx-cli.js --watch",
+    "twsx:preserve": "node node_modules/tailwind-to-style/lib/twsx-cli.js --preserve-structure",
+    "twsx:dev": "node node_modules/tailwind-to-style/lib/twsx-cli.js --watch --preserve-structure",
     "dev": "npm run twsx:watch & next dev"
   }
 }

package/dist/index.browser.js

@@ -1,5 +1,5 @@
 /**
- * tailwind-to-style v2.8.5
+ * 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.5
+ * 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.5
+ * tailwind-to-style v2.8.8
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion

package/lib/twsx-cli.js

@@ -18,12 +18,13 @@ function findTwsxFiles(dir, files = []) {
   return files;
 }
 
-async function buildTwsx(inputDir, outputDir) {
+async function buildTwsx(inputDir, outputDir, preserveStructure = false) {
   try {
     const twsxFiles = findTwsxFiles(inputDir);
     const generatedCssFiles = [];
 
     // Generate CSS from JS files
+    let cssWrittenCount = 0;
     for (const filePath of twsxFiles) {
       try {
         const styleModule = await import(
@@ -32,10 +33,19 @@ async function buildTwsx(inputDir, outputDir) {
         const styleObj = styleModule.default || styleModule;
         const css = twsx(styleObj, { inject: false });
         const fileName = path.basename(filePath).replace(/\.js$/, ".css");
-        const cssFilePath = path.join(outputDir, fileName);
+
+        let cssFilePath;
+        if (preserveStructure) {
+          // Generate CSS in the same directory as the JS file
+          cssFilePath = filePath.replace(/\.js$/, ".css");
+        } else {
+          // Generate CSS in the output directory
+          cssFilePath = path.join(outputDir, fileName);
+        }
+
         fs.writeFileSync(cssFilePath, css);
-        generatedCssFiles.push(fileName);
-        console.log(`[twsx-cli] CSS written to ${cssFilePath}`);
+        generatedCssFiles.push(preserveStructure ? cssFilePath : fileName);
+        cssWrittenCount++;
       } catch (err) {
         console.error(
           `[twsx-cli] Error importing or processing ${filePath}:`,
@@ -43,9 +53,19 @@ async function buildTwsx(inputDir, outputDir) {
         );
       }
     }
+    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 (fs.existsSync(outputDir)) {
+    if (!preserveStructure && fs.existsSync(outputDir)) {
       const existingCssFiles = fs
         .readdirSync(outputDir)
         .filter((file) => file.startsWith("twsx.") && file.endsWith(".css"));
@@ -57,6 +77,33 @@ async function buildTwsx(inputDir, outputDir) {
           console.log(`[twsx-cli] Removed orphaned CSS: ${cssFilePath}`);
         }
       }
+    } 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")
+      );
+
+      // 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);
+          const stat = fs.statSync(fullPath);
+          if (stat.isDirectory()) {
+            cleanupOrphanedCss(fullPath);
+          } else if (item.startsWith("twsx.") && item.endsWith(".css")) {
+            if (!expectedCssFiles.includes(fullPath)) {
+              fs.unlinkSync(fullPath);
+              console.log(`[twsx-cli] Removed orphaned CSS: ${fullPath}`);
+            }
+          }
+        }
+      }
+
+      cleanupOrphanedCss(inputDir);
     }
   } catch (err) {
     console.error("[twsx-cli] Error scanning for twsx files:", err);
@@ -67,38 +114,59 @@ 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 watchMode =
+  process.argv.includes("--watch") || process.env.TWSX_WATCH === "true";
+const preserveStructure =
+  process.argv.includes("--preserve-structure") ||
+  process.env.TWSX_PRESERVE_STRUCTURE === "true";
 
-if (!fs.existsSync(outputDir)) {
+if (!preserveStructure && !fs.existsSync(outputDir)) {
   fs.mkdirSync(outputDir, { recursive: true });
 }
 
 // Initial build
 (async () => {
   try {
-    await buildTwsx(inputDir, outputDir);
+    await buildTwsx(inputDir, outputDir, preserveStructure);
     console.log(`[twsx-cli] Initial build completed`);
 
     if (watchMode) {
       console.log(`[twsx-cli] Watching for changes in ${inputDir}...`);
-      
+
       const watcher = chokidar.watch(`${inputDir}/**/twsx.*.js`, {
         ignored: /node_modules/,
         persistent: true,
       });
 
+      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", async (filePath) => {
-          console.log(`[twsx-cli] File changed: ${filePath}`);
-          await buildTwsx(inputDir, outputDir);
+        .on("change", () => {
+          pendingChange = true;
+          triggerBatchBuild();
         })
-        .on("add", async (filePath) => {
-          console.log(`[twsx-cli] File added: ${filePath}`);
-          await buildTwsx(inputDir, outputDir);
+        .on("add", () => {
+          pendingChange = true;
+          triggerBatchBuild();
         })
-        .on("unlink", async (filePath) => {
-          console.log(`[twsx-cli] File removed: ${filePath}`);
-          await buildTwsx(inputDir, outputDir);
+        .on("unlink", () => {
+          pendingChange = true;
+          triggerBatchBuild();
         });
 
       // Keep the process alive

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-to-style",
-  "version": "2.8.5",
+  "version": "2.8.8",
   "description": "Convert tailwind classes to inline style",
   "type": "module",
   "main": "dist/index.cjs",
@@ -12,8 +12,7 @@
     "README.md",
     "LICENSE",
     "plugins",
-    "lib",
-    "twsx.css"
+    "lib"
   ],
   "bin": {
     "twsx-cli": "./lib/twsx-cli.js"

package/plugins/vite-twsx.js

@@ -17,12 +17,13 @@ function findTwsxFiles(dir, files = []) {
   return files;
 }
 
-async function buildTwsx(inputDir, outputDir) {
+async function buildTwsx(inputDir, outputDir, preserveStructure = false) {
   try {
     const twsxFiles = findTwsxFiles(inputDir);
     const generatedCssFiles = [];
 
     // Generate CSS from JS files
+    let cssWrittenCount = 0;
     for (const filePath of twsxFiles) {
       try {
         const styleModule = await import(
@@ -31,9 +32,25 @@ async function buildTwsx(inputDir, outputDir) {
         const styleObj = styleModule.default || styleModule;
         const css = twsx(styleObj, { inject: false });
         const fileName = path.basename(filePath).replace(/\.js$/, ".css");
-        const cssFilePath = path.join(outputDir, fileName);
+
+        let cssFilePath;
+        if (preserveStructure) {
+          // Generate CSS file next to the JS file
+          cssFilePath = filePath.replace(/\.js$/, ".css");
+        } else {
+          // 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(fileName);
+        generatedCssFiles.push(cssFilePath);
+        cssWrittenCount++;
       } catch (err) {
         console.error(
           `[vite-twsx] Error importing or processing ${filePath}:`,
@@ -41,32 +58,60 @@ async function buildTwsx(inputDir, outputDir) {
         );
       }
     }
+    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 (fs.existsSync(outputDir)) {
-      const existingCssFiles = fs
-        .readdirSync(outputDir)
-        .filter((file) => file.startsWith("twsx.") && file.endsWith(".css"));
+    if (preserveStructure) {
+      // For preserve structure mode, clean up next to JS files
+      const allJsFiles = findTwsxFiles(inputDir);
+      for (const jsFile of allJsFiles) {
+        const cssFile = jsFile.replace(/\.js$/, ".css");
+        if (fs.existsSync(cssFile) && !generatedCssFiles.includes(cssFile)) {
+          fs.unlinkSync(cssFile);
+        }
+      }
+    } else {
+      // For normal mode, clean up in output directory
+      if (fs.existsSync(outputDir)) {
+        const existingCssFiles = fs
+          .readdirSync(outputDir)
+          .filter((file) => file.startsWith("twsx.") && file.endsWith(".css"));
 
-      for (const cssFile of existingCssFiles) {
-        if (!generatedCssFiles.includes(cssFile)) {
+        for (const cssFile of existingCssFiles) {
           const cssFilePath = path.join(outputDir, cssFile);
-          fs.unlinkSync(cssFilePath);
+          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 = {}) {
   const inputDir = options.inputDir || path.resolve(process.cwd(), "src");
   const outputDir =
     options.outputDir || path.resolve(process.cwd(), "src/styles");
+  const preserveStructure = options.preserveStructure || false;
 
-  if (!fs.existsSync(outputDir)) {
+  // 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 });
   }
 
@@ -74,16 +119,42 @@ export default function twsxPlugin(options = {}) {
     name: "vite-twsx",
     async buildStart() {
       try {
-        await buildTwsx(inputDir, outputDir);
+        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);
-      } 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

@@ -17,12 +17,13 @@ function findTwsxFiles(dir, files = []) {
   return files;
 }
 
-async function buildTwsx(inputDir, outputDir) {
+async function buildTwsx(inputDir, outputDir, preserveStructure = false) {
   try {
     const twsxFiles = findTwsxFiles(inputDir);
     const generatedCssFiles = [];
 
     // Generate CSS from JS files
+    let cssWrittenCount = 0;
     for (const filePath of twsxFiles) {
       try {
         const styleModule = await import(
@@ -31,9 +32,25 @@ async function buildTwsx(inputDir, outputDir) {
         const styleObj = styleModule.default || styleModule;
         const css = twsx(styleObj, { inject: false });
         const fileName = path.basename(filePath).replace(/\.js$/, ".css");
-        const cssFilePath = path.join(outputDir, fileName);
+
+        let cssFilePath;
+        if (preserveStructure) {
+          // Generate CSS file next to the JS file
+          cssFilePath = filePath.replace(/\.js$/, ".css");
+        } else {
+          // 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(fileName);
+        generatedCssFiles.push(preserveStructure ? cssFilePath : fileName);
+        cssWrittenCount++;
       } catch (err) {
         console.error(
           `[webpack-twsx] Error importing or processing ${filePath}:`,
@@ -41,18 +58,43 @@ async function buildTwsx(inputDir, outputDir) {
         );
       }
     }
+    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 (fs.existsSync(outputDir)) {
-      const existingCssFiles = fs.readdirSync(outputDir).filter((file) => {
-        return file.startsWith("twsx.") && file.endsWith(".css");
-      });
+    if (preserveStructure) {
+      // For preserve structure mode, clean up next to JS files
+      const allJsFiles = findTwsxFiles(inputDir);
+      for (const jsFile of allJsFiles) {
+        const cssFile = jsFile.replace(/\.js$/, ".css");
+        if (fs.existsSync(cssFile) && !generatedCssFiles.includes(cssFile)) {
+          fs.unlinkSync(cssFile);
+        }
+      }
+    } else {
+      // For normal mode, clean up in output directory
+      if (fs.existsSync(outputDir)) {
+        const existingCssFiles = fs.readdirSync(outputDir).filter((file) => {
+          return file.startsWith("twsx.") && file.endsWith(".css");
+        });
 
-      if (Array.isArray(existingCssFiles) && Array.isArray(generatedCssFiles)) {
-        for (const cssFile of existingCssFiles) {
-          if (!generatedCssFiles.includes(cssFile)) {
-            const cssFilePath = path.join(outputDir, cssFile);
-            fs.unlinkSync(cssFilePath);
+        if (
+          Array.isArray(existingCssFiles) &&
+          Array.isArray(generatedCssFiles)
+        ) {
+          for (const cssFile of existingCssFiles) {
+            if (!generatedCssFiles.includes(cssFile)) {
+              const cssFilePath = path.join(outputDir, cssFile);
+              fs.unlinkSync(cssFilePath);
+            }
           }
         }
       }
@@ -67,7 +109,9 @@ class TwsxPlugin {
     this.inputDir = options.inputDir || path.resolve(process.cwd(), "src");
     this.outputDir =
       options.outputDir || path.resolve(process.cwd(), "src/styles");
-    if (!fs.existsSync(this.outputDir)) {
+    this.preserveStructure = options.preserveStructure || false;
+
+    if (!this.preserveStructure && !fs.existsSync(this.outputDir)) {
       fs.mkdirSync(this.outputDir, { recursive: true });
     }
   }
@@ -75,14 +119,14 @@ class TwsxPlugin {
   apply(compiler) {
     compiler.hooks.beforeCompile.tapPromise("TwsxPlugin", async () => {
       try {
-        await buildTwsx(this.inputDir, this.outputDir);
+        await buildTwsx(this.inputDir, this.outputDir, this.preserveStructure);
       } catch (err) {
         console.error("[webpack-twsx] Error writing CSS:", err);
       }
     });
     compiler.hooks.watchRun.tapPromise("TwsxPlugin", async () => {
       try {
-        await buildTwsx(this.inputDir, this.outputDir);
+        await buildTwsx(this.inputDir, this.outputDir, this.preserveStructure);
       } catch (err) {
         console.error("[webpack-twsx] Error updating CSS:", err);
       }