tailwind-to-style 2.8.3 → 2.8.5

package/README.md

@@ -7,10 +7,11 @@
 
 `tailwind-to-style` is a JavaScript library designed to convert Tailwind CSS utility classes into inline styles or JavaScript objects. This is especially useful when you need to dynamically apply styles to elements in frameworks like React, where inline styles or style objects are frequently used.
 
-The library exposes two main functions:
+The library exposes two main functions and a CLI tool:
 
 1. **`tws`**: Converts Tailwind CSS classes into inline CSS styles or JavaScript objects (JSON).
 2. **`twsx`**: A more advanced function that allows you to define nested and complex styles similar to SCSS, including support for responsive, state variants, and grouping.
+3. **`twsx-cli`**: A command-line tool for generating CSS files from `twsx.*.js` files with watch mode support.
 
 ## Installation
 
@@ -490,82 +491,145 @@ This will automatically log warnings for operations taking longer than 5ms and p
 
 ### Automated Modular CSS Generation
 
-1. Save your modular styles in the `src/twsx/` folder as JS files (e.g., `card.js`, `button.js`).
+1. Create JS files with `twsx.` prefix in your project (e.g., `twsx.card.js`, `twsx.button.js`) anywhere in your `src/` folder.
 2. Use the Vite/Webpack plugin from the `plugins/` folder to automatically generate CSS on every build/rebuild.
-3. All generated CSS files will be merged into a single `twsx.css` file inside `node_modules/tailwind-to-style/`.
-4. In React, simply import this file in your entry point: `import 'tailwind-to-style/twsx.css'`.
+3. Each JS file will generate its own CSS file in the specified output directory (default: `src/styles/`).
+4. Import the generated CSS files directly in your components or bundle them as needed.
 
 #### Vite Plugin Usage Example
 
 Add the plugin to your `vite.config.js`:
 ```js
-import twsxPlugin from './plugins/vite-twsx';
+import twsxPlugin from 'tailwind-to-style/plugins/vite-twsx';
 
 export default {
   plugins: [
     twsxPlugin({
-      twsxDir: 'src/twsx',
-      outDir: 'dist'
+      inputDir: 'src',
+      outputDir: 'src/styles'
     })
   ]
 };
 ```
 
-After build, the merged CSS file will be automatically created at `node_modules/tailwind-to-style/twsx.css`.
-Import in React:
+After build, individual CSS files will be created in `src/styles/` (e.g., `twsx.card.css`, `twsx.button.css`).
+Import in your components:
 ```js
-// src/index.js
-import 'tailwind-to-style/twsx.css';
+// Import specific CSS files
+import './styles/twsx.card.css';
+import './styles/twsx.button.css';
 ```
 
 #### Webpack Plugin Usage Example
 
 Add the plugin to your `webpack.config.js`:
 ```js
-import TwsxPlugin from './plugins/webpack-twsx';
+import TwsxPlugin from 'tailwind-to-style/plugins/webpack-twsx';
 
 module.exports = {
   plugins: [
     new TwsxPlugin({
-      twsxDir: 'src/twsx',
-      outDir: 'dist'
+      inputDir: 'src',
+      outputDir: 'src/styles'
     })
   ]
 };
 ```
 
-After build, the merged CSS file will be automatically created at `node_modules/tailwind-to-style/twsx.css`.
-Import in React:
+After build, individual CSS files will be created in `src/styles/` (e.g., `twsx.card.css`, `twsx.button.css`).
+Import in your components:
 ```js
-// src/index.js
-import 'tailwind-to-style/twsx.css';
+// Import specific CSS files
+import './styles/twsx.card.css';
+import './styles/twsx.button.css';
 ```
 
 ## Build-Time CSS Generation via Script
 
-In addition to using the Vite/Webpack plugin, you can also use a Node.js script to generate a CSS file from the `src/twsx` folder manually or as part of your build workflow.
+In addition to using the Vite/Webpack plugin, you can also use a Node.js script to generate CSS files from `twsx.*.js` files manually or as part of your build workflow.
 
-### Script: lib/build-twsx.js
+### Script: tailwind-to-style/lib/twsx-cli.js (Legacy)
 
-This script will read all JS files in `src/twsx`, generate CSS using the `twsx` function, and write the result to `node_modules/tailwind-to-style/twsx.css`.
+> **💡 Recommended:** Use `npx twsx-cli` instead of calling the script directly.
+
+This script will recursively scan for all `twsx.*.js` files in your project, generate CSS using the `twsx` function, and write individual CSS files to the specified output directory.
 
 #### How to Use
 
-1. Make sure your JS files containing style objects are in `src/twsx`.
-2. Run the script with the following command:
+1. Create JS files with `twsx.` prefix containing style objects anywhere in your `src/` folder (e.g., `src/components/twsx.card.js`).
 
+2. **One-time Build:**
 ```bash
-node lib/build-twsx.js
+node tailwind-to-style/lib/twsx-cli.js
 ```
-3. After running, the combined CSS file will be available at:
 
+3. **Watch Mode (Auto-rebuild on file changes):**
+```bash
+node tailwind-to-style/lib/twsx-cli.js --watch
 ```
-node_modules/tailwind-to-style/twsx.css
+
+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. Import this CSS file in your React entry point:
+
+4. After running, individual CSS files will be available in the output directory (default: `src/styles/`):
+
+```
+src/styles/twsx.card.css
+src/styles/twsx.button.css
+```
+
+5. Import the generated CSS files in your components:
 
 ```js
-import 'tailwind-to-style/twsx.css';
+import './styles/twsx.card.css';
+import './styles/twsx.button.css';
+```
+
+#### Usage in Different Projects
+
+**React/Next.js/Vue/Any Project:**
+
+1. Install the package:
+```bash
+npm install tailwind-to-style
+```
+
+2. Add to your `package.json`:
+```json
+{
+  "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",
+    "dev": "npm run twsx:watch & next dev"
+  }
+}
+```
+
+3. For development with auto-rebuild:
+```bash
+npm run twsx:watch
+```
+
+4. For production build:
+```bash
+npm run twsx:build
+```
+
+**VS Code Integration:**
+Add to your workspace settings (`.vscode/settings.json`):
+```json
+{
+  "emeraldwalk.runonsave": {
+    "commands": [
+      {
+        "match": "twsx\\..*\\.js$",
+        "cmd": "npm run twsx:build"
+      }
+    ]
+  }
+}
 ```
 
 #### Automatic Integration
@@ -575,7 +639,7 @@ You can add this script to the build section in your `package.json`:
 ```json
 {
   "scripts": {
-    "build-css": "node lib/build-twsx.js"
+    "build-css": "node tailwind-to-style/lib/twsx-cli.js"
   }
 }
 ```

package/dist/index.browser.js

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

package/dist/index.cjs

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

package/dist/index.esm.js

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

package/lib/twsx-cli.js

@@ -0,0 +1,114 @@
+import fs from "fs";
+import path from "path";
+import { pathToFileURL } from "url";
+import { twsx } from "tailwind-to-style";
+import chokidar from "chokidar";
+
+function findTwsxFiles(dir, files = []) {
+  const items = fs.readdirSync(dir);
+  for (const item of items) {
+    const fullPath = path.join(dir, item);
+    const stat = fs.statSync(fullPath);
+    if (stat.isDirectory()) {
+      findTwsxFiles(fullPath, files);
+    } else if (item.startsWith("twsx.") && item.endsWith(".js")) {
+      files.push(fullPath);
+    }
+  }
+  return files;
+}
+
+async function buildTwsx(inputDir, outputDir) {
+  try {
+    const twsxFiles = findTwsxFiles(inputDir);
+    const generatedCssFiles = [];
+
+    // Generate CSS from JS files
+    for (const filePath of twsxFiles) {
+      try {
+        const styleModule = await import(
+          pathToFileURL(filePath).href + `?update=${Date.now()}`
+        );
+        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);
+        fs.writeFileSync(cssFilePath, css);
+        generatedCssFiles.push(fileName);
+        console.log(`[twsx-cli] CSS written to ${cssFilePath}`);
+      } catch (err) {
+        console.error(
+          `[twsx-cli] Error importing or processing ${filePath}:`,
+          err
+        );
+      }
+    }
+
+    // Clean up orphaned CSS files
+    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);
+          console.log(`[twsx-cli] Removed orphaned CSS: ${cssFilePath}`);
+        }
+      }
+    }
+  } catch (err) {
+    console.error("[twsx-cli] Error scanning for twsx files:", err);
+  }
+}
+
+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";
+
+if (!fs.existsSync(outputDir)) {
+  fs.mkdirSync(outputDir, { recursive: true });
+}
+
+// Initial build
+(async () => {
+  try {
+    await buildTwsx(inputDir, outputDir);
+    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,
+      });
+
+      watcher
+        .on("change", async (filePath) => {
+          console.log(`[twsx-cli] File changed: ${filePath}`);
+          await buildTwsx(inputDir, outputDir);
+        })
+        .on("add", async (filePath) => {
+          console.log(`[twsx-cli] File added: ${filePath}`);
+          await buildTwsx(inputDir, outputDir);
+        })
+        .on("unlink", async (filePath) => {
+          console.log(`[twsx-cli] File removed: ${filePath}`);
+          await buildTwsx(inputDir, outputDir);
+        });
+
+      // Keep the process alive
+      process.on("SIGINT", () => {
+        console.log("\n[twsx-cli] Stopping watcher...");
+        watcher.close();
+        process.exit(0);
+      });
+    }
+  } catch (err) {
+    console.error("[twsx-cli] Error writing CSS:", err);
+  }
+})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-to-style",
-  "version": "2.8.3",
+  "version": "2.8.5",
   "description": "Convert tailwind classes to inline style",
   "type": "module",
   "main": "dist/index.cjs",
@@ -15,6 +15,9 @@
     "lib",
     "twsx.css"
   ],
+  "bin": {
+    "twsx-cli": "./lib/twsx-cli.js"
+  },
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js --passWithNoTests",
     "build": "rollup -c rollup.config.js",
@@ -54,6 +57,7 @@
     "@rollup/plugin-terser": "^0.4.4",
     "babel-jest": "^28.1.0",
     "babel-loader": "^10.0.0",
+    "chokidar": "^4.0.1",
     "eslint": "^8.16.0",
     "jest": "^28.1.0",
     "prettier": "^3.5.3",

package/plugins/vite-twsx.js

@@ -21,7 +21,7 @@ async function buildTwsx(inputDir, outputDir) {
   try {
     const twsxFiles = findTwsxFiles(inputDir);
     const generatedCssFiles = [];
-    
+
     // Generate CSS from JS files
     for (const filePath of twsxFiles) {
       try {
@@ -41,20 +41,17 @@ 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'));
-      
-      console.log(`[vite-twsx] Found ${existingCssFiles.length} existing CSS files:`, existingCssFiles);
-      console.log(`[vite-twsx] Generated ${generatedCssFiles.length} CSS files:`, generatedCssFiles);
-      
+      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);
-          console.log(`[vite-twsx] Removed orphaned CSS: ${cssFilePath}`);
         }
       }
     }

package/plugins/webpack-twsx.js

@@ -34,7 +34,6 @@ async function buildTwsx(inputDir, outputDir) {
         const cssFilePath = path.join(outputDir, fileName);
         fs.writeFileSync(cssFilePath, css);
         generatedCssFiles.push(fileName);
-        console.log(`[webpack-twsx] CSS written to ${cssFilePath}`);
       } catch (err) {
         console.error(
           `[webpack-twsx] Error importing or processing ${filePath}:`,
@@ -49,24 +48,11 @@ async function buildTwsx(inputDir, outputDir) {
         return file.startsWith("twsx.") && file.endsWith(".css");
       });
 
-      if (
-        Array.isArray(existingCssFiles) &&
-        Array.isArray(generatedCssFiles)
-      ) {
-        console.log(
-          `[webpack-twsx] Found ${existingCssFiles.length} existing CSS files:`,
-          existingCssFiles
-        );
-        console.log(
-          `[webpack-twsx] Generated ${generatedCssFiles.length} CSS files:`,
-          generatedCssFiles
-        );
-
+      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);
-            console.log(`[webpack-twsx] Removed orphaned CSS: ${cssFilePath}`);
           }
         }
       }

package/lib/build-twsx.js

@@ -1,60 +0,0 @@
-import fs from "fs";
-import path from "path";
-import { pathToFileURL } from "url";
-import { twsx } from "tailwind-to-style";
-
-function findTwsxFiles(dir, files = []) {
-  const items = fs.readdirSync(dir);
-  for (const item of items) {
-    const fullPath = path.join(dir, item);
-    const stat = fs.statSync(fullPath);
-    if (stat.isDirectory()) {
-      findTwsxFiles(fullPath, files);
-    } else if (item.startsWith("twsx.") && item.endsWith(".js")) {
-      files.push(fullPath);
-    }
-  }
-  return files;
-}
-
-async function buildTwsx(inputDir, outputDir) {
-  try {
-    const twsxFiles = findTwsxFiles(inputDir);
-    for (const filePath of twsxFiles) {
-      try {
-        const styleModule = await import(
-          pathToFileURL(filePath).href + `?update=${Date.now()}`
-        );
-        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);
-        fs.writeFileSync(cssFilePath, css);
-        console.log(`[build-twsx] CSS written to ${cssFilePath}`);
-      } catch (err) {
-        console.error(
-          `[build-twsx] Error importing or processing ${filePath}:`,
-          err
-        );
-      }
-    }
-  } catch (err) {
-    console.error("[build-twsx] Error scanning for twsx files:", err);
-  }
-}
-
-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");
-if (!fs.existsSync(outputDir)) {
-  fs.mkdirSync(outputDir, { recursive: true });
-}
-
-(async () => {
-  try {
-    await buildTwsx(inputDir, outputDir);
-  } catch (err) {
-    console.error("[build-twsx] Error writing CSS:", err);
-  }
-})();