@webmate-studio/builder 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "description": "Webmate Studio Component Builder",
   "keywords": [
@@ -24,6 +24,8 @@
     "access": "public"
   },
   "dependencies": {
+    "@tailwindcss/cli": "^4.1.0",
+    "@webmate-studio/builder": "^0.1.5",
     "@webmate-studio/core": "^0.1.0",
     "@webmate-studio/parser": "^0.1.0",
     "alpinejs": "^3.15.0",
@@ -38,7 +40,6 @@
     "react-dom": "^19.2.0",
     "svelte": "^5.41.2",
     "tailwindcss": "^4.1.0",
-    "@tailwindcss/cli": "^4.1.0",
     "vue": "^3.5.22"
   }
 }

package/src/tailwind-generator-v4.js

@@ -16,25 +16,31 @@ const execAsync = promisify(exec);
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
-// Find tailwindcss binary - try multiple locations
+// Import createRequire for resolving packages
 import { createRequire } from 'module';
 const require = createRequire(import.meta.url);
 
-let tailwindBinary;
-try {
-	// Try to resolve tailwindcss package
-	const tailwindPackagePath = require.resolve('tailwindcss/package.json');
-	const tailwindDir = dirname(tailwindPackagePath);
-
-	// Check if we're on Windows
-	const isWindows = process.platform === 'win32';
-	const binName = isWindows ? 'tailwindcss.cmd' : 'tailwindcss';
-
-	// Use npx to run tailwindcss from the resolved package
-	tailwindBinary = `npx tailwindcss`;
-} catch (e) {
-	// Fallback to old method
-	tailwindBinary = join(__dirname, '..', 'node_modules', '.bin', 'tailwindcss');
+/**
+ * Get tailwindcss CLI path for execution
+ * @returns {string} Path to tailwindcss CLI
+ */
+function getTailwindCommand() {
+	try {
+		// Try to resolve @tailwindcss/cli package which contains the actual binary
+		const cliPath = require.resolve('@tailwindcss/cli');
+		return cliPath;
+	} catch (e) {
+		// Fallback: try to find tailwindcss package and use its CLI
+		try {
+			const tailwindPackagePath = require.resolve('tailwindcss/package.json');
+			const tailwindDir = dirname(tailwindPackagePath);
+			// Tailwind v4 uses @tailwindcss/cli
+			const cliPath = join(tailwindDir, '..', '@tailwindcss', 'cli', 'dist', 'index.js');
+			return cliPath;
+		} catch (e2) {
+			throw new Error('Could not find @tailwindcss/cli. Please install it: npm install @tailwindcss/cli');
+		}
+	}
 }
 
 /**
@@ -277,8 +283,8 @@ ${themeCSS}
 
 		// Run Tailwind v4 CLI
 		// Tailwind v4 auto-detects HTML files in the same directory
-		const command = `node "${tailwindBinary}" -i "${inputPath}" ${minify ? '--minify' : ''}`;
-
+		const tailwindCliPath = getTailwindCommand();
+		const command = `node "${tailwindCliPath}" -i "${inputPath}" ${minify ? '--minify' : ''}`;
 
 		// Set NODE_PATH so tailwindcss module can be resolved
 		const builderNodeModules = join(__dirname, "..", "node_modules");

package/src/tailwind-generator.js

@@ -16,25 +16,31 @@ const execAsync = promisify(exec);
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
-// Find tailwindcss binary - try multiple locations
+// Import createRequire for resolving packages
 import { createRequire } from 'module';
 const require = createRequire(import.meta.url);
 
-let tailwindBinary;
-try {
-	// Try to resolve tailwindcss package
-	const tailwindPackagePath = require.resolve('tailwindcss/package.json');
-	const tailwindDir = dirname(tailwindPackagePath);
-
-	// Check if we're on Windows
-	const isWindows = process.platform === 'win32';
-	const binName = isWindows ? 'tailwindcss.cmd' : 'tailwindcss';
-
-	// Use npx to run tailwindcss from the resolved package
-	tailwindBinary = `npx tailwindcss`;
-} catch (e) {
-	// Fallback to old method
-	tailwindBinary = join(__dirname, '..', 'node_modules', '.bin', 'tailwindcss');
+/**
+ * Get tailwindcss CLI path for execution
+ * @returns {string} Path to tailwindcss CLI
+ */
+function getTailwindCommand() {
+	try {
+		// Try to resolve @tailwindcss/cli package which contains the actual binary
+		const cliPath = require.resolve('@tailwindcss/cli');
+		return cliPath;
+	} catch (e) {
+		// Fallback: try to find tailwindcss package and use its CLI
+		try {
+			const tailwindPackagePath = require.resolve('tailwindcss/package.json');
+			const tailwindDir = dirname(tailwindPackagePath);
+			// Tailwind v4 uses @tailwindcss/cli
+			const cliPath = join(tailwindDir, '..', '@tailwindcss', 'cli', 'dist', 'index.js');
+			return cliPath;
+		} catch (e2) {
+			throw new Error('Could not find @tailwindcss/cli. Please install it: npm install @tailwindcss/cli');
+		}
+	}
 }
 
 /**
@@ -255,8 +261,9 @@ export async function generateTailwindCSS(classes, options = {}) {
 		const dummyHTML = `<div class="${classArray.join(' ')}"></div>`;
 		writeFileSync(htmlPath, dummyHTML);
 
-		// Run Tailwind CLI using node to execute the CLI script
-		const command = `node "${tailwindBinary}" -c "${configPath}" -i "${inputPath}" ${minify ? '--minify' : ''}`;
+		// Run Tailwind CLI
+		const tailwindCliPath = getTailwindCommand();
+		const command = `node "${tailwindCliPath}" -c "${configPath}" -i "${inputPath}" ${minify ? '--minify' : ''}`;
 
 		const { stdout } = await execAsync(command, {
 			maxBuffer: 10 * 1024 * 1024 // 10MB buffer