tailwind-to-style 2.7.7 → 2.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-to-style",
-  "version": "2.7.7",
+  "version": "2.8.0",
   "description": "Convert tailwind classes to inline style",
   "type": "module",
   "main": "dist/index.cjs",
@@ -10,7 +10,8 @@
     "dist",
     "preflight.css",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "plugins"
   ],
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js --passWithNoTests",

package/plugins/vite-twsx.js

@@ -0,0 +1,40 @@
+const fs = require("fs");
+const path = require("path");
+const { twsx } = require("tailwind-to-style");
+
+function buildTwsx(twsxDir, outDir) {
+  let allCss = "";
+  fs.readdirSync(twsxDir).forEach((file) => {
+    if (file.endsWith(".json")) {
+      const json = JSON.parse(
+        fs.readFileSync(path.join(twsxDir, file), "utf8")
+      );
+      const css = twsx(json, { inject: false });
+      const outFile = path.join(outDir, file.replace(".json", ".css"));
+      fs.writeFileSync(outFile, css);
+      allCss += css + "\n";
+    }
+  });
+  return allCss;
+}
+
+module.exports = function twsxPlugin(options = {}) {
+  const twsxDir = options.twsxDir || path.resolve(process.cwd(), "src/twsx");
+  const outDir = options.outDir || path.resolve(process.cwd(), "dist");
+  const cssFile = path.resolve(
+    process.cwd(),
+    "node_modules/tailwind-to-style/twsx.css"
+  );
+
+  return {
+    name: "vite-twsx",
+    buildStart() {
+      const allCss = buildTwsx(twsxDir, outDir);
+      fs.writeFileSync(cssFile, allCss);
+    },
+    handleHotUpdate() {
+      const allCss = buildTwsx(twsxDir, outDir);
+      fs.writeFileSync(cssFile, allCss);
+    },
+  };
+};

package/plugins/webpack-twsx.js

@@ -0,0 +1,43 @@
+const fs = require("fs");
+const path = require("path");
+const { twsx } = require("tailwind-to-style");
+
+class TwsxPlugin {
+  constructor(options = {}) {
+    this.twsxDir = options.twsxDir || path.resolve(process.cwd(), "src/twsx");
+    this.outDir = options.outDir || path.resolve(process.cwd(), "dist");
+  }
+
+  buildTwsx() {
+    let allCss = "";
+    fs.readdirSync(this.twsxDir).forEach((file) => {
+      if (file.endsWith(".json")) {
+        const json = JSON.parse(
+          fs.readFileSync(path.join(this.twsxDir, file), "utf8")
+        );
+        const css = twsx(json, { inject: false });
+        const outFile = path.join(this.outDir, file.replace(".json", ".css"));
+        fs.writeFileSync(outFile, css);
+        allCss += css + "\n";
+      }
+    });
+    return allCss;
+  }
+
+  apply(compiler) {
+    const cssFile = path.resolve(
+      process.cwd(),
+      "node_modules/tailwind-to-style/twsx.css"
+    );
+    compiler.hooks.beforeCompile.tap("TwsxPlugin", () => {
+      const allCss = this.buildTwsx();
+      fs.writeFileSync(cssFile, allCss);
+    });
+    compiler.hooks.watchRun.tap("TwsxPlugin", () => {
+      const allCss = this.buildTwsx();
+      fs.writeFileSync(cssFile, allCss);
+    });
+  }
+}
+
+module.exports = TwsxPlugin;