@webmate-studio/builder 0.2.86 → 0.2.88

package/package.json

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

package/src/design-tokens.js

@@ -7,7 +7,7 @@ function generateSemanticColorUtilities(tokens) {
 	if (!tokens.colors) return '';
 
 	let utilities = '\n/* Color Utilities */';
-	utilities += '\n@layer components {';
+	utilities += '\n@layer utilities {';
 
 	// Map of all colors: token name -> utility class base name
 	const colorMap = {

package/src/tailwind-generator.js

@@ -401,7 +401,7 @@ ${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 BEFORE processing: ${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')}`);
 
@@ -413,6 +413,12 @@ ${themeCSS}
 			console.log(`[Tailwind Generator] CSS contains @layer base: ${result.includes('@layer base')}`);
 		}
 
+		// ALWAYS wrap component CSS in @layer components
+		// This ensures utilities from design tokens (@layer utilities) can override them
+		// Even if base layers are included, component-specific CSS should be in @layer components
+		console.log('[Tailwind Generator] Wrapping in @layer components...');
+		result = `@layer components {\n${result}\n}`;
+
 		return result;
 
 	} catch (error) {