tailwind-to-style 2.8.5 → 2.8.6

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.6
  * 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.6
  * 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.6
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion

package/lib/twsx-cli.js

@@ -18,7 +18,7 @@ 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 = [];
@@ -32,9 +32,18 @@ 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);
+        generatedCssFiles.push(preserveStructure ? cssFilePath : fileName);
         console.log(`[twsx-cli] CSS written to ${cssFilePath}`);
       } catch (err) {
         console.error(
@@ -45,7 +54,7 @@ async function buildTwsx(inputDir, outputDir) {
     }
 
     // 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 +66,31 @@ 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);
@@ -68,15 +102,16 @@ const inputDir =
 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";
 
-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) {
@@ -90,15 +125,15 @@ if (!fs.existsSync(outputDir)) {
       watcher
         .on("change", async (filePath) => {
           console.log(`[twsx-cli] File changed: ${filePath}`);
-          await buildTwsx(inputDir, outputDir);
+          await buildTwsx(inputDir, outputDir, preserveStructure);
         })
         .on("add", async (filePath) => {
           console.log(`[twsx-cli] File added: ${filePath}`);
-          await buildTwsx(inputDir, outputDir);
+          await buildTwsx(inputDir, outputDir, preserveStructure);
         })
         .on("unlink", async (filePath) => {
           console.log(`[twsx-cli] File removed: ${filePath}`);
-          await buildTwsx(inputDir, outputDir);
+          await buildTwsx(inputDir, outputDir, preserveStructure);
         });
 
       // Keep the process alive

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-to-style",
-  "version": "2.8.5",
+  "version": "2.8.6",
   "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,7 +17,7 @@ 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 = [];
@@ -31,9 +31,24 @@ 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);
       } catch (err) {
         console.error(
           `[vite-twsx] Error importing or processing ${filePath}:`,
@@ -43,15 +58,27 @@ async function buildTwsx(inputDir, outputDir) {
     }
 
     // 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)) {
-          const cssFilePath = path.join(outputDir, cssFile);
-          fs.unlinkSync(cssFilePath);
+        for (const cssFile of existingCssFiles) {
+          if (!generatedCssFiles.includes(cssFile)) {
+            const cssFilePath = path.join(outputDir, cssFile);
+            fs.unlinkSync(cssFilePath);
+          }
         }
       }
     }
@@ -65,8 +92,9 @@ 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)) {
+  if (!preserveStructure && !fs.existsSync(outputDir)) {
     fs.mkdirSync(outputDir, { recursive: true });
   }
 
@@ -74,14 +102,14 @@ export default function twsxPlugin(options = {}) {
     name: "vite-twsx",
     async buildStart() {
       try {
-        await buildTwsx(inputDir, outputDir);
+        await buildTwsx(inputDir, outputDir, preserveStructure);
       } catch (err) {
         console.error("[vite-twsx] Error writing CSS:", err);
       }
     },
     async handleHotUpdate() {
       try {
-        await buildTwsx(inputDir, outputDir);
+        await buildTwsx(inputDir, outputDir, preserveStructure);
       } catch (err) {
         console.error("[vite-twsx] Error updating CSS:", err);
       }

package/plugins/webpack-twsx.js

@@ -17,7 +17,7 @@ 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 = [];
@@ -31,9 +31,24 @@ 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);
       } catch (err) {
         console.error(
           `[webpack-twsx] Error importing or processing ${filePath}:`,
@@ -43,16 +58,28 @@ async function buildTwsx(inputDir, outputDir) {
     }
 
     // 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 +94,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 +104,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);
       }