tailwind-to-style 2.8.3 → 2.8.4

package/README.md

@@ -490,82 +490,93 @@ 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/build-twsx.js
 
-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`.
+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`.
+1. Create JS files with `twsx.` prefix containing style objects anywhere in your `src/` folder (e.g., `src/components/twsx.card.js`).
 2. Run the script with the following command:
 
 ```bash
-node lib/build-twsx.js
+node tailwind-to-style/lib/build-twsx.js
 ```
-3. After running, the combined CSS file will be available at:
 
+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/build-twsx.js
 ```
-node_modules/tailwind-to-style/twsx.css
+
+3. After running, individual CSS files will be available in the output directory (default: `src/styles/`):
+
 ```
-4. Import this CSS file in your React entry point:
+src/styles/twsx.card.css
+src/styles/twsx.button.css
+```
+
+4. 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';
 ```
 
 #### Automatic Integration
@@ -575,7 +586,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/build-twsx.js"
   }
 }
 ```

package/dist/index.browser.js

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

package/lib/build-twsx.js

@@ -30,7 +30,6 @@ async function buildTwsx(inputDir, outputDir) {
         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}:`,

package/package.json

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

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}`);
           }
         }
       }