@webmate-studio/builder 0.2.87 → 0.2.89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.2.87",
+  "version": "0.2.89",
   "type": "module",
   "description": "Webmate Studio Component Builder",
   "keywords": [

package/src/tailwind-generator.js

@@ -68,6 +68,33 @@ function stripNonUtilityLayers(css) {
 	return css.trim();
 }
 
+/**
+ * Wraps utility classes in @layer components, preserving base/theme/properties layers
+ * This allows design token utilities (@layer utilities) to override component utilities
+ * @param {string} css - Full Tailwind CSS
+ * @returns {string} CSS with utilities wrapped in @layer components
+ */
+function wrapUtilitiesInComponentsLayer(css) {
+	// Extract @layer utilities content
+	const utilitiesMatch = css.match(/@layer\s+utilities\s*\{([\s\S]*?)\n\}/);
+
+	if (!utilitiesMatch) {
+		console.log('[Tailwind Generator] No @layer utilities found, returning CSS as-is');
+		return css;
+	}
+
+	const utilitiesContent = utilitiesMatch[1].trim();
+
+	// Replace @layer utilities with @layer components
+	const result = css.replace(
+		/@layer\s+utilities\s*\{[\s\S]*?\n\}/,
+		`@layer components {\n${utilitiesContent}\n}`
+	);
+
+	console.log('[Tailwind Generator] Wrapped utilities in @layer components');
+	return result;
+}
+
 /**
  * Extract Tailwind classes from HTML content
  * Supports: class="...", class='...', class={...}, and Svelte's class:xxx={...}
@@ -401,20 +428,24 @@ ${themeCSS}
 		let result = await compiler.build(classArray);
 
 		console.log(`[Tailwind Generator] includeBaseLayers = ${includeBaseLayers}`);
-		console.log(`[Tailwind Generator] Generated CSS length BEFORE stripping: ${result.length}`);
+		console.log(`[Tailwind Generator] Generated CSS length: ${result.length}`);
 		console.log(`[Tailwind Generator] CSS contains @layer base: ${result.includes('@layer base')}`);
-		console.log(`[Tailwind Generator] CSS contains @layer theme: ${result.includes('@layer theme')}`);
+		console.log(`[Tailwind Generator] CSS contains @layer utilities: ${result.includes('@layer utilities')}`);
 
-		// If includeBaseLayers is false, strip out base/theme/properties layers
+		// If includeBaseLayers is false, strip out base/theme/properties layers and return unwrapped utilities
 		if (!includeBaseLayers) {
 			console.log('[Tailwind Generator] Stripping non-utility layers...');
 			result = stripNonUtilityLayers(result);
 			console.log(`[Tailwind Generator] Generated CSS length AFTER stripping: ${result.length}`);
-			console.log(`[Tailwind Generator] CSS contains @layer base: ${result.includes('@layer base')}`);
 
-			// Wrap in @layer components (btn, etc. are components, not utilities)
-			// Utilities from design tokens (@layer utilities) can then override them
+			// Wrap stripped utilities in @layer components
 			result = `@layer components {\n${result}\n}`;
+			console.log('[Tailwind Generator] Wrapped stripped utilities in @layer components');
+		} else {
+			// Keep base/theme/properties layers, but wrap utilities in @layer components
+			// This preserves CSS custom properties while allowing utilities override
+			console.log('[Tailwind Generator] Preserving base/theme/properties, wrapping utilities in @layer components...');
+			result = wrapUtilitiesInComponentsLayer(result);
 		}
 
 		return result;