@webmate-studio/builder 0.2.89 → 0.2.91

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.2.89",
+  "version": "0.2.91",
   "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 utilities {';
+	utilities += '\n@layer components {';
 
 	// Map of all colors: token name -> utility class base name
 	const colorMap = {
@@ -1008,13 +1008,7 @@ export function generateTailwindConfig(tokens) {
  * Generate CSS Variables from Design Tokens
  */
 export function generateCSSFromTokens(tokens) {
-	const lines = [];
-
-	// Define layer order FIRST (before any other CSS)
-	lines.push('/* CSS Layer Order Declaration */');
-	lines.push('@layer base, components, utilities;');
-	lines.push('');
-	lines.push(':root {');
+	const lines = [':root {'];
 
 	// Colors
 	for (const [key, value] of Object.entries(tokens.colors || {})) {
@@ -1319,6 +1313,7 @@ export function generateCSSFromTokens(tokens) {
 	if (tokens.buttons) {
 		lines.push('');
 		lines.push('/* Button Utilities */');
+		lines.push('@layer components {');
 
 		// Helper to convert hex to rgba with opacity
 		const hexToRgba = (hex, alpha) => {
@@ -1477,6 +1472,8 @@ export function generateCSSFromTokens(tokens) {
 
 			lines.push('}');
 		}
+
+		lines.push('}'); // Close @layer components
 	}
 
 	// Add semantic color utilities

package/src/tailwind-generator.js

@@ -68,33 +68,6 @@ 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={...}
@@ -428,24 +401,16 @@ ${themeCSS}
 		let result = await compiler.build(classArray);
 
 		console.log(`[Tailwind Generator] includeBaseLayers = ${includeBaseLayers}`);
-		console.log(`[Tailwind Generator] Generated CSS length: ${result.length}`);
+		console.log(`[Tailwind Generator] Generated CSS length BEFORE stripping: ${result.length}`);
 		console.log(`[Tailwind Generator] CSS contains @layer base: ${result.includes('@layer base')}`);
-		console.log(`[Tailwind Generator] CSS contains @layer utilities: ${result.includes('@layer utilities')}`);
+		console.log(`[Tailwind Generator] CSS contains @layer theme: ${result.includes('@layer theme')}`);
 
-		// If includeBaseLayers is false, strip out base/theme/properties layers and return unwrapped utilities
+		// If includeBaseLayers is false, strip out base/theme/properties layers
 		if (!includeBaseLayers) {
 			console.log('[Tailwind Generator] Stripping non-utility layers...');
 			result = stripNonUtilityLayers(result);
 			console.log(`[Tailwind Generator] Generated CSS length AFTER stripping: ${result.length}`);
-
-			// 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);
+			console.log(`[Tailwind Generator] CSS contains @layer base: ${result.includes('@layer base')}`);
 		}
 
 		return result;