tailwind-to-style 2.8.4 → 2.8.6

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
 
@@ -505,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
@@ -529,56 +541,152 @@ 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
 
 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: tailwind-to-style/lib/build-twsx.js
+### Script: tailwind-to-style/lib/twsx-cli.js (Legacy)
+
+> **💡 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. 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:
 
+2. **One-time Build:**
 ```bash
-node tailwind-to-style/lib/build-twsx.js
+node tailwind-to-style/lib/twsx-cli.js
+```
+
+3. **Watch Mode (Auto-rebuild on file changes):**
+```bash
+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/build-twsx.js
+TWSX_INPUT_DIR=src TWSX_OUTPUT_DIR=dist/styles node tailwind-to-style/lib/twsx-cli.js --watch
+```
+
+Or use environment variables for preserve structure:
+```bash
+TWSX_PRESERVE_STRUCTURE=true node tailwind-to-style/lib/twsx-cli.js --watch
 ```
 
-3. After running, individual CSS files will be available in the output directory (default: `src/styles/`):
+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
 ```
 
-4. Import the generated CSS files in your components:
+**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:**
+
+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",
+    "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"
+  }
+}
+```
+
+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
 
 You can add this script to the build section in your `package.json`:
@@ -586,7 +694,7 @@ You can add this script to the build section in your `package.json`:
 ```json
 {
   "scripts": {
-    "build-css": "node tailwind-to-style/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.4
+ * 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.4
+ * 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.4
+ * tailwind-to-style v2.8.6
  * Convert tailwind classes to inline style
  * 
  * @author Bigetion

package/lib/twsx-cli.js

@@ -0,0 +1,149 @@
+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, preserveStructure = false) {
+  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");
+        
+        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(preserveStructure ? cssFilePath : 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 (!preserveStructure && 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}`);
+        }
+      }
+    } 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);
+  }
+}
+
+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";
+
+if (!preserveStructure && !fs.existsSync(outputDir)) {
+  fs.mkdirSync(outputDir, { recursive: true });
+}
+
+// Initial build
+(async () => {
+  try {
+    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,
+      });
+
+      watcher
+        .on("change", async (filePath) => {
+          console.log(`[twsx-cli] File changed: ${filePath}`);
+          await buildTwsx(inputDir, outputDir, preserveStructure);
+        })
+        .on("add", async (filePath) => {
+          console.log(`[twsx-cli] File added: ${filePath}`);
+          await buildTwsx(inputDir, outputDir, preserveStructure);
+        })
+        .on("unlink", async (filePath) => {
+          console.log(`[twsx-cli] File removed: ${filePath}`);
+          await buildTwsx(inputDir, outputDir, preserveStructure);
+        });
+
+      // 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.4",
+  "version": "2.8.6",
   "description": "Convert tailwind classes to inline style",
   "type": "module",
   "main": "dist/index.cjs",
@@ -12,9 +12,11 @@
     "README.md",
     "LICENSE",
     "plugins",
-    "lib",
-    "twsx.css"
+    "lib"
   ],
+  "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 +56,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

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

package/lib/build-twsx.js

@@ -1,59 +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);
-      } 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);
-  }
-})();