@webmate-studio/builder 0.1.10 → 0.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "type": "module",
   "description": "Webmate Studio Component Builder",
   "keywords": [
@@ -24,7 +24,6 @@
     "access": "public"
   },
   "dependencies": {
-    "@tailwindcss/cli": "^4.1.0",
     "@webmate-studio/core": "^0.1.0",
     "@webmate-studio/parser": "^0.1.0",
     "alpinejs": "^3.15.0",

package/src/index.js

@@ -1,3 +1,4 @@
 import { build } from './build.js';
+import { generateComponentCSS, generateTailwindCSS, extractTailwindClasses } from './tailwind-generator.js';
 
-export { build };
+export { build, generateComponentCSS, generateTailwindCSS, extractTailwindClasses };

package/src/tailwind-generator.js

@@ -1,16 +1,12 @@
 /**
  * Tailwind CSS v4 Generator for Components
- * Generates scoped Tailwind CSS using Tailwind v4's new CSS-based configuration
+ * Generates scoped Tailwind CSS using Tailwind v4's JavaScript API
  */
 
-import { exec } from 'child_process';
-import { promisify } from 'util';
-import { writeFileSync, unlinkSync, mkdtempSync, existsSync } from 'fs';
-import { join, dirname } from 'path';
-import { tmpdir } from 'os';
+import { compile } from 'tailwindcss';
+import { readFileSync } from 'fs';
 import { fileURLToPath } from 'url';
-
-const execAsync = promisify(exec);
+import { dirname, join } from 'path';
 
 // Get the directory where this module is located
 const __filename = fileURLToPath(import.meta.url);
@@ -21,51 +17,17 @@ import { createRequire } from 'module';
 const require = createRequire(import.meta.url);
 
 /**
- * Get tailwindcss CLI path for execution
- * @returns {string} Path to tailwindcss CLI
+ * Load Tailwind CSS index styles
+ * @returns {string} Tailwind CSS content
  */
-function getTailwindCommand() {
-	// Try multiple strategies to find @tailwindcss/cli
-	const strategies = [
-		// Strategy 1: Direct resolve of main entry
-		() => require.resolve('@tailwindcss/cli'),
-
-		// Strategy 2: Resolve package.json and build path
-		() => {
-			const pkgPath = require.resolve('@tailwindcss/cli/package.json');
-			return join(dirname(pkgPath), 'dist', 'index.js');
-		},
-
-		// Strategy 3: From builder's node_modules
-		() => {
-			const builderDir = dirname(import.meta.url.replace('file://', ''));
-			return join(builderDir, '..', 'node_modules', '@tailwindcss', 'cli', 'dist', 'index.js');
-		},
-
-		// Strategy 4: Relative to tailwindcss package
-		() => {
-			const tailwindPkg = require.resolve('tailwindcss/package.json');
-			const tailwindDir = dirname(tailwindPkg);
-			return join(tailwindDir, '..', '@tailwindcss', 'cli', 'dist', 'index.js');
-		}
-	];
-
-	for (const strategy of strategies) {
-		try {
-			const cliPath = strategy();
-			// Verify the file exists
-			if (existsSync(cliPath)) {
-				return cliPath;
-			}
-		} catch (e) {
-			// Try next strategy
-			continue;
-		}
+function loadTailwindStyles() {
+	try {
+		// Resolve tailwindcss/index.css
+		const tailwindCssPath = require.resolve('tailwindcss/index.css');
+		return readFileSync(tailwindCssPath, 'utf-8');
+	} catch (error) {
+		throw new Error(`Failed to load Tailwind CSS: ${error.message}`);
 	}
-
-	throw new Error(
-		'Could not find @tailwindcss/cli. Please ensure @tailwindcss/cli is installed.'
-	);
 }
 
 /**
@@ -156,11 +118,6 @@ export async function generateTailwindCSS(classes, options = {}) {
 		return '/* No Tailwind classes found */';
 	}
 
-	// Create temporary directory
-	const tempDir = mkdtempSync(join(tmpdir(), 'tailwind-gen-'));
-	const inputPath = join(tempDir, 'input.css');
-	const htmlPath = join(tempDir, 'content.html');
-
 	try {
 		// Default theme colors (complete design tokens)
 		const defaultColors = {
@@ -300,42 +257,29 @@ export async function generateTailwindCSS(classes, options = {}) {
 ${themeCSS}
 		`.trim();
 
-		writeFileSync(inputPath, inputCSS);
-
-		// Create dummy HTML file with all classes (for content scanning)
-		const dummyHTML = `<div class="${classArray.join(' ')}"></div>`;
-		writeFileSync(htmlPath, dummyHTML);
-
-		// Run Tailwind v4 CLI
-		// Tailwind v4 auto-detects HTML files in the same directory
-		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");
-
-		const { stdout } = await execAsync(command, {
-			cwd: tempDir,
-			maxBuffer: 10 * 1024 * 1024,
-			env: {
-				...process.env,
-				NODE_PATH: builderNodeModules
+		// Load Tailwind CSS styles
+		const tailwindStyles = loadTailwindStyles();
+
+		// Create compiler using Tailwind v4 JavaScript API
+		const compiler = await compile(inputCSS, {
+			loadStylesheet: async (id, base) => {
+				if (id === 'tailwindcss') {
+					return {
+						base: 'virtual:tailwindcss',
+						content: tailwindStyles
+					};
+				}
 			}
 		});
 
-		return stdout.trim();
+		// Build CSS for the specific classes
+		const result = await compiler.build(classArray);
+
+		return result;
 
 	} catch (error) {
 		console.error('[Tailwind Generator v4] Error:', error);
 		throw new Error(`Failed to generate Tailwind CSS: ${error.message}`);
-	} finally {
-		// Cleanup temp files
-		try {
-			unlinkSync(inputPath);
-			unlinkSync(htmlPath);
-		} catch (e) {
-			// Ignore cleanup errors
-		}
 	}
 }