tailwind-to-style 2.8.1 → 2.8.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.browser.js +1 -1
  2. package/dist/index.cjs +1 -1
  3. package/dist/index.esm.js +1 -1
  4. package/lib/build-twsx.js +42 -23
  5. package/package.json +1 -1
  6. package/plugins/vite-twsx.js +64 -30
  7. package/plugins/webpack-twsx.js +79 -33
package/dist/index.browser.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * tailwind-to-style v2.8.1
2
+ * tailwind-to-style v2.8.3
3
3
  * Convert tailwind classes to inline style
4
4
  *
5
5
  * @author Bigetion
package/dist/index.cjs CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * tailwind-to-style v2.8.1
2
+ * tailwind-to-style v2.8.3
3
3
  * Convert tailwind classes to inline style
4
4
  *
5
5
  * @author Bigetion
package/dist/index.esm.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * tailwind-to-style v2.8.1
2
+ * tailwind-to-style v2.8.3
3
3
  * Convert tailwind classes to inline style
4
4
  *
5
5
  * @author Bigetion
package/lib/build-twsx.js CHANGED
@@ -3,39 +3,58 @@ import path from "path";
3
3
  import { pathToFileURL } from "url";
4
4
  import { twsx } from "tailwind-to-style";
5
5
 
6
- const twsxDir = path.resolve(process.cwd(), "src/twsx");
7
- const cssFile = path.resolve(process.cwd(), "node_modules/tailwind-to-style/twsx.css");
6
+ function findTwsxFiles(dir, files = []) {
7
+ const items = fs.readdirSync(dir);
8
+ for (const item of items) {
9
+ const fullPath = path.join(dir, item);
10
+ const stat = fs.statSync(fullPath);
11
+ if (stat.isDirectory()) {
12
+ findTwsxFiles(fullPath, files);
13
+ } else if (item.startsWith("twsx.") && item.endsWith(".js")) {
14
+ files.push(fullPath);
15
+ }
16
+ }
17
+ return files;
18
+ }
8
19
 
9
- async function buildTwsx() {
10
- let allCss = "";
20
+ async function buildTwsx(inputDir, outputDir) {
11
21
  try {
12
- const files = fs.readdirSync(twsxDir);
13
- for (const file of files) {
14
- if (file.endsWith(".js")) {
15
- try {
16
- const styleModule = await import(
17
- pathToFileURL(path.join(twsxDir, file)).href
18
- );
19
- const styleObj = styleModule.default || styleModule;
20
- const css = twsx(styleObj, { inject: false });
21
- allCss += css + "\n";
22
- } catch (err) {
23
- console.error(`[build-twsx] Error importing or processing ${file}:`, err);
24
- }
22
+ const twsxFiles = findTwsxFiles(inputDir);
23
+ for (const filePath of twsxFiles) {
24
+ try {
25
+ const styleModule = await import(
26
+ pathToFileURL(filePath).href + `?update=${Date.now()}`
27
+ );
28
+ const styleObj = styleModule.default || styleModule;
29
+ const css = twsx(styleObj, { inject: false });
30
+ const fileName = path.basename(filePath).replace(/\.js$/, ".css");
31
+ const cssFilePath = path.join(outputDir, fileName);
32
+ fs.writeFileSync(cssFilePath, css);
33
+ console.log(`[build-twsx] CSS written to ${cssFilePath}`);
34
+ } catch (err) {
35
+ console.error(
36
+ `[build-twsx] Error importing or processing ${filePath}:`,
37
+ err
38
+ );
25
39
  }
26
40
  }
27
41
  } catch (err) {
28
- console.error('[build-twsx] Error reading twsxDir:', err);
42
+ console.error("[build-twsx] Error scanning for twsx files:", err);
29
43
  }
30
- return allCss;
44
+ }
45
+
46
+ const inputDir =
47
+ process.env.TWSX_INPUT_DIR || path.resolve(process.cwd(), "src");
48
+ const outputDir =
49
+ process.env.TWSX_OUTPUT_DIR || path.resolve(process.cwd(), "src/styles");
50
+ if (!fs.existsSync(outputDir)) {
51
+ fs.mkdirSync(outputDir, { recursive: true });
31
52
  }
32
53
 
33
54
  (async () => {
34
55
  try {
35
- const allCss = await buildTwsx();
36
- fs.writeFileSync(cssFile, allCss);
37
- console.log(`[build-twsx] CSS written to ${cssFile}`);
56
+ await buildTwsx(inputDir, outputDir);
38
57
  } catch (err) {
39
- console.error('[build-twsx] Error writing CSS:', err);
58
+ console.error("[build-twsx] Error writing CSS:", err);
40
59
  }
41
60
  })();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tailwind-to-style",
3
- "version": "2.8.1",
3
+ "version": "2.8.3",
4
4
  "description": "Convert tailwind classes to inline style",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",
package/plugins/vite-twsx.js CHANGED
@@ -1,58 +1,92 @@
1
-
2
1
  import fs from "fs";
3
2
  import path from "path";
4
3
  import { pathToFileURL } from "url";
5
4
  import { twsx } from "tailwind-to-style";
6
5
 
7
- async function buildTwsx(twsxDir) {
8
- let allCss = "";
6
+ function findTwsxFiles(dir, files = []) {
7
+ const items = fs.readdirSync(dir);
8
+ for (const item of items) {
9
+ const fullPath = path.join(dir, item);
10
+ const stat = fs.statSync(fullPath);
11
+ if (stat.isDirectory()) {
12
+ findTwsxFiles(fullPath, files);
13
+ } else if (item.startsWith("twsx.") && item.endsWith(".js")) {
14
+ files.push(fullPath);
15
+ }
16
+ }
17
+ return files;
18
+ }
19
+
20
+ async function buildTwsx(inputDir, outputDir) {
9
21
  try {
10
- const files = fs.readdirSync(twsxDir);
11
- for (const file of files) {
12
- if (file.endsWith(".js")) {
13
- try {
14
- const styleModule = await import(
15
- pathToFileURL(path.join(twsxDir, file)).href
16
- );
17
- const styleObj = styleModule.default || styleModule;
18
- const css = twsx(styleObj, { inject: false });
19
- allCss += css + "\n";
20
- } catch (err) {
21
- console.error(`[vite-twsx] Error importing or processing ${file}:`, err);
22
+ const twsxFiles = findTwsxFiles(inputDir);
23
+ const generatedCssFiles = [];
24
+
25
+ // Generate CSS from JS files
26
+ for (const filePath of twsxFiles) {
27
+ try {
28
+ const styleModule = await import(
29
+ pathToFileURL(filePath).href + `?update=${Date.now()}`
30
+ );
31
+ const styleObj = styleModule.default || styleModule;
32
+ const css = twsx(styleObj, { inject: false });
33
+ const fileName = path.basename(filePath).replace(/\.js$/, ".css");
34
+ const cssFilePath = path.join(outputDir, fileName);
35
+ fs.writeFileSync(cssFilePath, css);
36
+ generatedCssFiles.push(fileName);
37
+ } catch (err) {
38
+ console.error(
39
+ `[vite-twsx] Error importing or processing ${filePath}:`,
40
+ err
41
+ );
42
+ }
43
+ }
44
+
45
+ // Clean up orphaned CSS files
46
+ if (fs.existsSync(outputDir)) {
47
+ const existingCssFiles = fs.readdirSync(outputDir)
48
+ .filter(file => file.startsWith('twsx.') && file.endsWith('.css'));
49
+
50
+ console.log(`[vite-twsx] Found ${existingCssFiles.length} existing CSS files:`, existingCssFiles);
51
+ console.log(`[vite-twsx] Generated ${generatedCssFiles.length} CSS files:`, generatedCssFiles);
52
+
53
+ for (const cssFile of existingCssFiles) {
54
+ if (!generatedCssFiles.includes(cssFile)) {
55
+ const cssFilePath = path.join(outputDir, cssFile);
56
+ fs.unlinkSync(cssFilePath);
57
+ console.log(`[vite-twsx] Removed orphaned CSS: ${cssFilePath}`);
22
58
  }
23
59
  }
24
60
  }
25
61
  } catch (err) {
26
- console.error('[vite-twsx] Error reading twsxDir:', err);
62
+ console.error("[vite-twsx] Error scanning for twsx files:", err);
27
63
  }
28
- return allCss;
64
+ return null;
29
65
  }
30
66
 
31
67
  export default function twsxPlugin(options = {}) {
32
- const twsxDir = options.twsxDir || path.resolve(process.cwd(), "src/twsx");
33
- const cssFile = path.resolve(
34
- process.cwd(),
35
- "node_modules/tailwind-to-style/twsx.css"
36
- );
68
+ const inputDir = options.inputDir || path.resolve(process.cwd(), "src");
69
+ const outputDir =
70
+ options.outputDir || path.resolve(process.cwd(), "src/styles");
71
+
72
+ if (!fs.existsSync(outputDir)) {
73
+ fs.mkdirSync(outputDir, { recursive: true });
74
+ }
37
75
 
38
76
  return {
39
77
  name: "vite-twsx",
40
78
  async buildStart() {
41
79
  try {
42
- const allCss = await buildTwsx(twsxDir);
43
- fs.writeFileSync(cssFile, allCss);
44
- console.log(`[vite-twsx] CSS written to ${cssFile}`);
80
+ await buildTwsx(inputDir, outputDir);
45
81
  } catch (err) {
46
- console.error('[vite-twsx] Error writing CSS:', err);
82
+ console.error("[vite-twsx] Error writing CSS:", err);
47
83
  }
48
84
  },
49
85
  async handleHotUpdate() {
50
86
  try {
51
- const allCss = await buildTwsx(twsxDir);
52
- fs.writeFileSync(cssFile, allCss);
53
- console.log(`[vite-twsx] CSS written to ${cssFile}`);
87
+ await buildTwsx(inputDir, outputDir);
54
88
  } catch (err) {
55
- console.error('[vite-twsx] Error writing CSS:', err);
89
+ console.error("[vite-twsx] Error updating CSS:", err);
56
90
  }
57
91
  },
58
92
  };
package/plugins/webpack-twsx.js CHANGED
@@ -3,56 +3,102 @@ import path from "path";
3
3
  import { pathToFileURL } from "url";
4
4
  import { twsx } from "tailwind-to-style";
5
5
 
6
- class TwsxPlugin {
7
- constructor(options = {}) {
8
- this.twsxDir = options.twsxDir || path.resolve(process.cwd(), "src/twsx");
6
+ function findTwsxFiles(dir, files = []) {
7
+ const items = fs.readdirSync(dir);
8
+ for (const item of items) {
9
+ const fullPath = path.join(dir, item);
10
+ const stat = fs.statSync(fullPath);
11
+ if (stat.isDirectory()) {
12
+ findTwsxFiles(fullPath, files);
13
+ } else if (item.startsWith("twsx.") && item.endsWith(".js")) {
14
+ files.push(fullPath);
15
+ }
9
16
  }
17
+ return files;
18
+ }
19
+
20
+ async function buildTwsx(inputDir, outputDir) {
21
+ try {
22
+ const twsxFiles = findTwsxFiles(inputDir);
23
+ const generatedCssFiles = [];
24
+
25
+ // Generate CSS from JS files
26
+ for (const filePath of twsxFiles) {
27
+ try {
28
+ const styleModule = await import(
29
+ pathToFileURL(filePath).href + `?update=${Date.now()}`
30
+ );
31
+ const styleObj = styleModule.default || styleModule;
32
+ const css = twsx(styleObj, { inject: false });
33
+ const fileName = path.basename(filePath).replace(/\.js$/, ".css");
34
+ const cssFilePath = path.join(outputDir, fileName);
35
+ fs.writeFileSync(cssFilePath, css);
36
+ generatedCssFiles.push(fileName);
37
+ console.log(`[webpack-twsx] CSS written to ${cssFilePath}`);
38
+ } catch (err) {
39
+ console.error(
40
+ `[webpack-twsx] Error importing or processing ${filePath}:`,
41
+ err
42
+ );
43
+ }
44
+ }
45
+
46
+ // Clean up orphaned CSS files
47
+ if (fs.existsSync(outputDir)) {
48
+ const existingCssFiles = fs.readdirSync(outputDir).filter((file) => {
49
+ return file.startsWith("twsx.") && file.endsWith(".css");
50
+ });
51
+
52
+ if (
53
+ Array.isArray(existingCssFiles) &&
54
+ Array.isArray(generatedCssFiles)
55
+ ) {
56
+ console.log(
57
+ `[webpack-twsx] Found ${existingCssFiles.length} existing CSS files:`,
58
+ existingCssFiles
59
+ );
60
+ console.log(
61
+ `[webpack-twsx] Generated ${generatedCssFiles.length} CSS files:`,
62
+ generatedCssFiles
63
+ );
10
64
 
11
- async buildTwsx() {
12
- let allCss = "";
13
- try {
14
- const files = fs.readdirSync(this.twsxDir);
15
- for (const file of files) {
16
- if (file.endsWith(".js")) {
17
- try {
18
- const styleModule = await import(
19
- pathToFileURL(path.join(this.twsxDir, file)).href
20
- );
21
- const styleObj = styleModule.default || styleModule;
22
- const css = twsx(styleObj, { inject: false });
23
- allCss += css + "\n";
24
- } catch (err) {
25
- console.error(`[webpack-twsx] Error importing or processing ${file}:`, err);
65
+ for (const cssFile of existingCssFiles) {
66
+ if (!generatedCssFiles.includes(cssFile)) {
67
+ const cssFilePath = path.join(outputDir, cssFile);
68
+ fs.unlinkSync(cssFilePath);
69
+ console.log(`[webpack-twsx] Removed orphaned CSS: ${cssFilePath}`);
26
70
  }
27
71
  }
28
72
  }
29
- } catch (err) {
30
- console.error('[webpack-twsx] Error reading twsxDir:', err);
31
73
  }
32
- return allCss;
74
+ } catch (err) {
75
+ console.error("[webpack-twsx] Error scanning for twsx files:", err);
76
+ }
77
+ }
78
+
79
+ class TwsxPlugin {
80
+ constructor(options = {}) {
81
+ this.inputDir = options.inputDir || path.resolve(process.cwd(), "src");
82
+ this.outputDir =
83
+ options.outputDir || path.resolve(process.cwd(), "src/styles");
84
+ if (!fs.existsSync(this.outputDir)) {
85
+ fs.mkdirSync(this.outputDir, { recursive: true });
86
+ }
33
87
  }
34
88
 
35
89
  apply(compiler) {
36
- const cssFile = path.resolve(
37
- process.cwd(),
38
- "node_modules/tailwind-to-style/twsx.css"
39
- );
40
90
  compiler.hooks.beforeCompile.tapPromise("TwsxPlugin", async () => {
41
91
  try {
42
- const allCss = await this.buildTwsx();
43
- fs.writeFileSync(cssFile, allCss);
44
- console.log(`[webpack-twsx] CSS written to ${cssFile}`);
92
+ await buildTwsx(this.inputDir, this.outputDir);
45
93
  } catch (err) {
46
- console.error('[webpack-twsx] Error writing CSS:', err);
94
+ console.error("[webpack-twsx] Error writing CSS:", err);
47
95
  }
48
96
  });
49
97
  compiler.hooks.watchRun.tapPromise("TwsxPlugin", async () => {
50
98
  try {
51
- const allCss = await this.buildTwsx();
52
- fs.writeFileSync(cssFile, allCss);
53
- console.log(`[webpack-twsx] CSS written to ${cssFile}`);
99
+ await buildTwsx(this.inputDir, this.outputDir);
54
100
  } catch (err) {
55
- console.error('[webpack-twsx] Error writing CSS:', err);
101
+ console.error("[webpack-twsx] Error updating CSS:", err);
56
102
  }
57
103
  });
58
104
  }