@webmate-studio/builder 0.1.5 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "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/build.js

@@ -5,7 +5,7 @@ import { parseComponent } from '@webmate-studio/parser';
 import { loadConfig, logger } from '@webmate-studio/core';
 import { cleanComponentHTML, extractStyles } from './html-cleaner.js';
 import { generateManifest } from './manifest.js';
-import { generateComponentCSS } from './tailwind-generator-v4.js';
+import { generateComponentCSS } from './tailwind-generator.js';
 import { bundleComponentIslands } from './bundler.js';
 import { parseDocument } from 'htmlparser2';
 import { DomUtils } from 'htmlparser2';

package/src/tailwind-generator.js

@@ -1,11 +1,11 @@
 /**
- * Tailwind CSS Generator for Components
- * Generates scoped Tailwind CSS for each component based on used classes
+ * Tailwind CSS v4 Generator for Components
+ * Generates scoped Tailwind CSS using Tailwind v4's new CSS-based configuration
  */
 
 import { exec } from 'child_process';
 import { promisify } from 'util';
-import { writeFileSync, readFileSync, unlinkSync, mkdtempSync } from 'fs';
+import { writeFileSync, unlinkSync, mkdtempSync } from 'fs';
 import { join, dirname } from 'path';
 import { tmpdir } from 'os';
 import { fileURLToPath } from 'url';
@@ -21,27 +21,25 @@ import { createRequire } from 'module';
 const require = createRequire(import.meta.url);
 
 /**
- * Get tailwindcss command for execution
- * @returns {string} Command to run tailwindcss
+ * Get tailwindcss CLI path for execution
+ * @returns {string} Path to tailwindcss CLI
  */
 function getTailwindCommand() {
 	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';
-
-		// Build path to bin
-		const binPath = join(tailwindDir, '..', '.bin', binName);
-
-		// Return just npx command - will be resolved at runtime
-		return 'npx tailwindcss';
+		// Try to resolve @tailwindcss/cli package which contains the actual binary
+		const cliPath = require.resolve('@tailwindcss/cli');
+		return cliPath;
 	} catch (e) {
-		// Fallback to npx
-		return 'npx tailwindcss';
+		// 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');
+		}
 	}
 }
 
@@ -71,7 +69,50 @@ export function extractTailwindClasses(html) {
 }
 
 /**
- * Generate Tailwind CSS for specific classes
+ * Generate CSS with custom theme colors and design tokens for Tailwind v4
+ * @param {Object} colors - Color definitions
+ * @param {Object} designTokens - Complete design tokens (optional)
+ * @returns {string} CSS with @theme directive
+ */
+function generateThemeCSS(colors, designTokens = null) {
+	let themeCSS = `@theme {\n`;
+
+	// Helper to flatten nested colors
+	function flattenColors(obj, prefix = '') {
+		let css = '';
+		for (const [key, value] of Object.entries(obj)) {
+			const colorKey = prefix ? `${prefix}-${key}` : key;
+
+			if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+				// Nested color (e.g., primary.light)
+				if (value.DEFAULT) {
+					css += `  --color-${colorKey}: ${value.DEFAULT};\n`;
+				}
+				css += flattenColors(value, colorKey);
+			} else {
+				// Simple color value
+				css += `  --color-${colorKey}: ${value};\n`;
+			}
+		}
+		return css;
+	}
+
+	themeCSS += flattenColors(colors);
+
+	// Add spacing if provided in design tokens
+	if (designTokens?.spacing) {
+		if (typeof designTokens.spacing === 'string') {
+			themeCSS += `  --spacing: ${designTokens.spacing};\n`;
+		}
+	}
+
+	themeCSS += `}\n`;
+
+	return themeCSS;
+}
+
+/**
+ * Generate Tailwind CSS for specific classes (Tailwind v4)
  * @param {Set<string>|Array<string>} classes - Tailwind classes to include
  * @param {Object} options - Generation options
  * @param {Object} options.designTokens - Custom design tokens (optional)
@@ -92,14 +133,10 @@ export async function generateTailwindCSS(classes, options = {}) {
 
 	// Create temporary directory
 	const tempDir = mkdtempSync(join(tmpdir(), 'tailwind-gen-'));
-	const configPath = join(tempDir, 'tailwind.config.cjs');
 	const inputPath = join(tempDir, 'input.css');
 	const htmlPath = join(tempDir, 'content.html');
 
 	try {
-		// Tailwind v4 uses CSS-based configuration
-		// Instead of config file, we generate CSS with custom properties and @theme
-
 		// Default theme colors (complete design tokens)
 		const defaultColors = {
 			// Brand colors with variants
@@ -150,13 +187,13 @@ export async function generateTailwindCSS(classes, options = {}) {
 				900: '#111827'
 			},
 
-			// Semantic text colors (direct utilities)
+			// Semantic text colors
 			'text-body': '#374151',
 			'text-heading': '#111827',
 			'text-muted': '#6b7280',
 			'text-inverse': '#ffffff',
 
-			// Semantic background colors (direct utilities)
+			// Semantic background colors
 			'bg-default': '#ffffff',
 			'bg-subtle': '#f9fafb',
 			'bg-elevated': '#ffffff',
@@ -170,11 +207,9 @@ export async function generateTailwindCSS(classes, options = {}) {
 		// Merge with provided design tokens
 		let themeColors = defaultColors;
 		if (designTokens?.colors) {
-			// Convert flat design tokens to nested structure
 			const tokens = designTokens.colors;
 			themeColors = {
 				...defaultColors,
-				// Override with provided tokens
 				primary: {
 					DEFAULT: tokens.primary || defaultColors.primary.DEFAULT,
 					light: tokens.primaryLight || defaultColors.primary.light,
@@ -232,54 +267,45 @@ export async function generateTailwindCSS(classes, options = {}) {
 			};
 		}
 
-		// Create Tailwind config with safelist
-		const config = {
-			content: [htmlPath],
-			safelist: classArray,
-			theme: {
-				extend: {
-					colors: themeColors,
-					fontFamily: designTokens?.typography?.fontFamily || {},
-					fontSize: designTokens?.typography?.fontSize || {},
-					spacing: designTokens?.spacing || {},
-					borderRadius: designTokens?.borderRadius || {},
-					boxShadow: designTokens?.boxShadow || {}
-				}
-			},
-			plugins: []
-		};
-
-		writeFileSync(configPath, `module.exports = ${JSON.stringify(config, null, 2)};`);
-
-		// Create input CSS with Tailwind directives
+		// Create input CSS with Tailwind v4 syntax
+		const themeCSS = generateThemeCSS(themeColors);
 		const inputCSS = `
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+${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 CLI
-		const tailwindCmd = getTailwindCommand();
-		const command = `${tailwindCmd} -c "${configPath}" -i "${inputPath}" ${minify ? '--minify' : ''}`;
+		// 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, {
-			maxBuffer: 10 * 1024 * 1024 // 10MB buffer
+			cwd: tempDir,
+			maxBuffer: 10 * 1024 * 1024,
+			env: {
+				...process.env,
+				NODE_PATH: builderNodeModules
+			}
 		});
 
 		return stdout.trim();
 
 	} catch (error) {
-		console.error('[Tailwind Generator] Error:', error);
+		console.error('[Tailwind Generator v4] Error:', error);
 		throw new Error(`Failed to generate Tailwind CSS: ${error.message}`);
 	} finally {
 		// Cleanup temp files
 		try {
-			unlinkSync(configPath);
 			unlinkSync(inputPath);
 			unlinkSync(htmlPath);
 		} catch (e) {

package/src/tailwind-generator-v4.js

@@ -1,343 +0,0 @@
-/**
- * Tailwind CSS v4 Generator for Components
- * Generates scoped Tailwind CSS using Tailwind v4's new CSS-based configuration
- */
-
-import { exec } from 'child_process';
-import { promisify } from 'util';
-import { writeFileSync, unlinkSync, mkdtempSync } from 'fs';
-import { join, dirname } from 'path';
-import { tmpdir } from 'os';
-import { fileURLToPath } from 'url';
-
-const execAsync = promisify(exec);
-
-// Get the directory where this module is located
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-// Import createRequire for resolving packages
-import { createRequire } from 'module';
-const require = createRequire(import.meta.url);
-
-/**
- * Get tailwindcss command for execution
- * @returns {string} Command to run tailwindcss
- */
-function getTailwindCommand() {
-	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';
-
-		// Build path to bin
-		const binPath = join(tailwindDir, '..', '.bin', binName);
-
-		// Return just npx command - will be resolved at runtime
-		return 'npx tailwindcss';
-	} catch (e) {
-		// Fallback to npx
-		return 'npx tailwindcss';
-	}
-}
-
-/**
- * Extract Tailwind classes from HTML content
- * @param {string} html - HTML content
- * @returns {Set<string>} Set of unique Tailwind classes
- */
-export function extractTailwindClasses(html) {
-	const classes = new Set();
-
-	// Match class="..." and class='...'
-	const classRegex = /class=["']([^"']+)["']/g;
-	let match;
-
-	while ((match = classRegex.exec(html)) !== null) {
-		const classString = match[1];
-		// Split by whitespace and add each class
-		classString.split(/\s+/).forEach(cls => {
-			if (cls.trim()) {
-				classes.add(cls.trim());
-			}
-		});
-	}
-
-	return classes;
-}
-
-/**
- * Generate CSS with custom theme colors and design tokens for Tailwind v4
- * @param {Object} colors - Color definitions
- * @param {Object} designTokens - Complete design tokens (optional)
- * @returns {string} CSS with @theme directive
- */
-function generateThemeCSS(colors, designTokens = null) {
-	let themeCSS = `@theme {\n`;
-
-	// Helper to flatten nested colors
-	function flattenColors(obj, prefix = '') {
-		let css = '';
-		for (const [key, value] of Object.entries(obj)) {
-			const colorKey = prefix ? `${prefix}-${key}` : key;
-
-			if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
-				// Nested color (e.g., primary.light)
-				if (value.DEFAULT) {
-					css += `  --color-${colorKey}: ${value.DEFAULT};\n`;
-				}
-				css += flattenColors(value, colorKey);
-			} else {
-				// Simple color value
-				css += `  --color-${colorKey}: ${value};\n`;
-			}
-		}
-		return css;
-	}
-
-	themeCSS += flattenColors(colors);
-
-	// Add spacing if provided in design tokens
-	if (designTokens?.spacing) {
-		if (typeof designTokens.spacing === 'string') {
-			themeCSS += `  --spacing: ${designTokens.spacing};\n`;
-		}
-	}
-
-	themeCSS += `}\n`;
-
-	return themeCSS;
-}
-
-/**
- * Generate Tailwind CSS for specific classes (Tailwind v4)
- * @param {Set<string>|Array<string>} classes - Tailwind classes to include
- * @param {Object} options - Generation options
- * @param {Object} options.designTokens - Custom design tokens (optional)
- * @param {boolean} options.minify - Minify output CSS
- * @returns {Promise<string>} Generated CSS
- */
-export async function generateTailwindCSS(classes, options = {}) {
-	const {
-		designTokens = null,
-		minify = true
-	} = options;
-
-	const classArray = Array.isArray(classes) ? classes : Array.from(classes);
-
-	if (classArray.length === 0) {
-		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 = {
-			// Brand colors with variants
-			primary: {
-				DEFAULT: '#cf0ce9',
-				light: '#fb923c',
-				dark: '#c2410c'
-			},
-			secondary: {
-				DEFAULT: '#6366f1',
-				light: '#818cf8',
-				dark: '#4f46e5'
-			},
-
-			// Feedback colors with variants
-			success: {
-				DEFAULT: '#10b981',
-				light: '#34d399',
-				dark: '#059669'
-			},
-			error: {
-				DEFAULT: '#ef4444',
-				light: '#f87171',
-				dark: '#dc2626'
-			},
-			warning: {
-				DEFAULT: '#f59e0b',
-				light: '#fbbf24',
-				dark: '#d97706'
-			},
-			info: {
-				DEFAULT: '#3b82f6',
-				light: '#60a5fa',
-				dark: '#2563eb'
-			},
-
-			// Grays
-			gray: {
-				50: '#f9fafb',
-				100: '#f3f4f6',
-				200: '#e5e7eb',
-				300: '#d1d5db',
-				400: '#9ca3af',
-				500: '#6b7280',
-				600: '#4b5563',
-				700: '#374151',
-				800: '#1f2937',
-				900: '#111827'
-			},
-
-			// Semantic text colors
-			'text-body': '#374151',
-			'text-heading': '#111827',
-			'text-muted': '#6b7280',
-			'text-inverse': '#ffffff',
-
-			// Semantic background colors
-			'bg-default': '#ffffff',
-			'bg-subtle': '#f9fafb',
-			'bg-elevated': '#ffffff',
-			'bg-inverse': '#111827',
-
-			// Basic colors
-			black: '#000000',
-			white: '#ffffff'
-		};
-
-		// Merge with provided design tokens
-		let themeColors = defaultColors;
-		if (designTokens?.colors) {
-			const tokens = designTokens.colors;
-			themeColors = {
-				...defaultColors,
-				primary: {
-					DEFAULT: tokens.primary || defaultColors.primary.DEFAULT,
-					light: tokens.primaryLight || defaultColors.primary.light,
-					dark: tokens.primaryDark || defaultColors.primary.dark
-				},
-				secondary: {
-					DEFAULT: tokens.secondary || defaultColors.secondary.DEFAULT,
-					light: tokens.secondaryLight || defaultColors.secondary.light,
-					dark: tokens.secondaryDark || defaultColors.secondary.dark
-				},
-				success: {
-					DEFAULT: tokens.success || defaultColors.success.DEFAULT,
-					light: tokens.successLight || defaultColors.success.light,
-					dark: tokens.successDark || defaultColors.success.dark
-				},
-				error: {
-					DEFAULT: tokens.error || defaultColors.error.DEFAULT,
-					light: tokens.errorLight || defaultColors.error.light,
-					dark: tokens.errorDark || defaultColors.error.dark
-				},
-				warning: {
-					DEFAULT: tokens.warning || defaultColors.warning.DEFAULT,
-					light: tokens.warningLight || defaultColors.warning.light,
-					dark: tokens.warningDark || defaultColors.warning.dark
-				},
-				info: {
-					DEFAULT: tokens.info || defaultColors.info.DEFAULT,
-					light: tokens.infoLight || defaultColors.info.light,
-					dark: tokens.infoDark || defaultColors.info.dark
-				},
-				// Semantic colors
-				'text-body': tokens.textBody || defaultColors['text-body'],
-				'text-heading': tokens.textHeading || defaultColors['text-heading'],
-				'text-muted': tokens.textMuted || defaultColors['text-muted'],
-				'text-inverse': tokens.textInverse || defaultColors['text-inverse'],
-				'bg-default': tokens.bgDefault || defaultColors['bg-default'],
-				'bg-subtle': tokens.bgSubtle || defaultColors['bg-subtle'],
-				'bg-elevated': tokens.bgElevated || defaultColors['bg-elevated'],
-				'bg-inverse': tokens.bgInverse || defaultColors['bg-inverse'],
-				// Grays
-				gray: {
-					50: tokens.gray50 || defaultColors.gray[50],
-					100: tokens.gray100 || defaultColors.gray[100],
-					200: tokens.gray200 || defaultColors.gray[200],
-					300: tokens.gray300 || defaultColors.gray[300],
-					400: tokens.gray400 || defaultColors.gray[400],
-					500: tokens.gray500 || defaultColors.gray[500],
-					600: tokens.gray600 || defaultColors.gray[600],
-					700: tokens.gray700 || defaultColors.gray[700],
-					800: tokens.gray800 || defaultColors.gray[800],
-					900: tokens.gray900 || defaultColors.gray[900]
-				},
-				black: tokens.black || defaultColors.black,
-				white: tokens.white || defaultColors.white
-			};
-		}
-
-		// Create input CSS with Tailwind v4 syntax
-		const themeCSS = generateThemeCSS(themeColors);
-		const inputCSS = `
-@import "tailwindcss";
-
-${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 tailwindCmd = getTailwindCommand();
-		const command = `${tailwindCmd} -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
-			}
-		});
-
-		return stdout.trim();
-
-	} 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
-		}
-	}
-}
-
-/**
- * Generate Tailwind CSS for a component HTML file
- * @param {string} html - Component HTML content
- * @param {Object} options - Generation options
- * @returns {Promise<{css: string, classes: string[]}>} Generated CSS and extracted classes
- */
-export async function generateComponentCSS(html, options = {}) {
-	// Extract classes from HTML
-	const classes = extractTailwindClasses(html);
-
-	if (classes.size === 0) {
-		return {
-			css: '/* No Tailwind classes found in component */\n',
-			classes: []
-		};
-	}
-
-	// Generate CSS
-	const css = await generateTailwindCSS(classes, options);
-
-	return {
-		css,
-		classes: Array.from(classes)
-	};
-}