tailwind-to-style 2.8.1 → 2.8.2

package/dist/index.browser.js

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

package/dist/index.cjs

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

package/dist/index.esm.js

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

package/lib/build-twsx.js

@@ -3,39 +3,58 @@ import path from "path";
 import { pathToFileURL } from "url";
 import { twsx } from "tailwind-to-style";
 
-const twsxDir = path.resolve(process.cwd(), "src/twsx");
-const cssFile = path.resolve(process.cwd(), "node_modules/tailwind-to-style/twsx.css");
+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() {
-  let allCss = "";
+async function buildTwsx(inputDir, outputDir) {
   try {
-    const files = fs.readdirSync(twsxDir);
-    for (const file of files) {
-      if (file.endsWith(".js")) {
-        try {
-          const styleModule = await import(
-            pathToFileURL(path.join(twsxDir, file)).href
-          );
-          const styleObj = styleModule.default || styleModule;
-          const css = twsx(styleObj, { inject: false });
-          allCss += css + "\n";
-        } catch (err) {
-          console.error(`[build-twsx] Error importing or processing ${file}:`, err);
-        }
+    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 reading twsxDir:', err);
+    console.error("[build-twsx] Error scanning for twsx files:", err);
   }
-  return allCss;
+}
+
+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 {
-    const allCss = await buildTwsx();
-    fs.writeFileSync(cssFile, allCss);
-    console.log(`[build-twsx] CSS written to ${cssFile}`);
+    await buildTwsx(inputDir, outputDir);
   } catch (err) {
-    console.error('[build-twsx] Error writing CSS:', err);
+    console.error("[build-twsx] Error writing CSS:", err);
   }
 })();

package/package.json

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

package/plugins/vite-twsx.js

@@ -1,58 +1,71 @@
-
 import fs from "fs";
 import path from "path";
 import { pathToFileURL } from "url";
 import { twsx } from "tailwind-to-style";
 
-async function buildTwsx(twsxDir) {
-  let allCss = "";
+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 files = fs.readdirSync(twsxDir);
-    for (const file of files) {
-      if (file.endsWith(".js")) {
-        try {
-          const styleModule = await import(
-            pathToFileURL(path.join(twsxDir, file)).href
-          );
-          const styleObj = styleModule.default || styleModule;
-          const css = twsx(styleObj, { inject: false });
-          allCss += css + "\n";
-        } catch (err) {
-          console.error(`[vite-twsx] Error importing or processing ${file}:`, err);
-        }
+    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(
+          `[vite-twsx] Error importing or processing ${filePath}:`,
+          err
+        );
       }
     }
   } catch (err) {
-    console.error('[vite-twsx] Error reading twsxDir:', err);
+    console.error("[vite-twsx] Error scanning for twsx files:", err);
   }
-  return allCss;
+  return null;
 }
 
 export default function twsxPlugin(options = {}) {
-  const twsxDir = options.twsxDir || path.resolve(process.cwd(), "src/twsx");
-  const cssFile = path.resolve(
-    process.cwd(),
-    "node_modules/tailwind-to-style/twsx.css"
-  );
+  const inputDir = options.inputDir || path.resolve(process.cwd(), "src");
+  const outputDir =
+    options.outputDir || path.resolve(process.cwd(), "src/styles");
+
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+  }
 
   return {
     name: "vite-twsx",
     async buildStart() {
       try {
-        const allCss = await buildTwsx(twsxDir);
-        fs.writeFileSync(cssFile, allCss);
-        console.log(`[vite-twsx] CSS written to ${cssFile}`);
+        await buildTwsx(inputDir, outputDir);
       } catch (err) {
-        console.error('[vite-twsx] Error writing CSS:', err);
+        console.error("[vite-twsx] Error writing CSS:", err);
       }
     },
     async handleHotUpdate() {
       try {
-        const allCss = await buildTwsx(twsxDir);
-        fs.writeFileSync(cssFile, allCss);
-        console.log(`[vite-twsx] CSS written to ${cssFile}`);
+        await buildTwsx(inputDir, outputDir);
       } catch (err) {
-        console.error('[vite-twsx] Error writing CSS:', err);
+        console.error("[vite-twsx] Error updating CSS:", err);
       }
     },
   };

package/plugins/webpack-twsx.js

@@ -3,56 +3,68 @@ import path from "path";
 import { pathToFileURL } from "url";
 import { twsx } from "tailwind-to-style";
 
-class TwsxPlugin {
-  constructor(options = {}) {
-    this.twsxDir = options.twsxDir || path.resolve(process.cwd(), "src/twsx");
+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 buildTwsx() {
-    let allCss = "";
-    try {
-      const files = fs.readdirSync(this.twsxDir);
-      for (const file of files) {
-        if (file.endsWith(".js")) {
-          try {
-            const styleModule = await import(
-              pathToFileURL(path.join(this.twsxDir, file)).href
-            );
-            const styleObj = styleModule.default || styleModule;
-            const css = twsx(styleObj, { inject: false });
-            allCss += css + "\n";
-          } catch (err) {
-            console.error(`[webpack-twsx] Error importing or processing ${file}:`, err);
-          }
-        }
+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(
+          `[webpack-twsx] Error importing or processing ${filePath}:`,
+          err
+        );
       }
-    } catch (err) {
-      console.error('[webpack-twsx] Error reading twsxDir:', err);
     }
-    return allCss;
+  } catch (err) {
+    console.error("[webpack-twsx] Error scanning for twsx files:", err);
+  }
+}
+
+class TwsxPlugin {
+  constructor(options = {}) {
+    this.inputDir = options.inputDir || path.resolve(process.cwd(), "src");
+    this.outputDir =
+      options.outputDir || path.resolve(process.cwd(), "src/styles");
+    if (!fs.existsSync(this.outputDir)) {
+      fs.mkdirSync(this.outputDir, { recursive: true });
+    }
   }
 
   apply(compiler) {
-    const cssFile = path.resolve(
-      process.cwd(),
-      "node_modules/tailwind-to-style/twsx.css"
-    );
     compiler.hooks.beforeCompile.tapPromise("TwsxPlugin", async () => {
       try {
-        const allCss = await this.buildTwsx();
-        fs.writeFileSync(cssFile, allCss);
-        console.log(`[webpack-twsx] CSS written to ${cssFile}`);
+        await buildTwsx(this.inputDir, this.outputDir);
       } catch (err) {
-        console.error('[webpack-twsx] Error writing CSS:', err);
+        console.error("[webpack-twsx] Error writing CSS:", err);
       }
     });
     compiler.hooks.watchRun.tapPromise("TwsxPlugin", async () => {
       try {
-        const allCss = await this.buildTwsx();
-        fs.writeFileSync(cssFile, allCss);
-        console.log(`[webpack-twsx] CSS written to ${cssFile}`);
+        await buildTwsx(this.inputDir, this.outputDir);
       } catch (err) {
-        console.error('[webpack-twsx] Error writing CSS:', err);
+        console.error("[webpack-twsx] Error updating CSS:", err);
       }
     });
   }