@webmate-studio/builder 0.2.91 → 0.2.93

package/package.json

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

package/src/css-deduplicator.js

@@ -66,6 +66,7 @@ export function deduplicateCSS(cssArray) {
 		base: new Set(),
 		properties: new Set(),
 		theme: new Set(),
+		components: new Set(),
 		utilities: new Set()
 	};
 	const regularRules = {
@@ -137,6 +138,10 @@ export function deduplicateCSS(cssArray) {
 					regularRules.charset.push(trimmed);
 				} else if (trimmed.startsWith('@import')) {
 					regularRules.imports.push(trimmed);
+				} else if (trimmed.startsWith('@layer') && trimmed.includes(';')) {
+					// Skip @layer declarations (we add our own)
+					duplicatesSkipped++;
+					continue;
 				} else {
 					regularRules.other.push(trimmed);
 				}
@@ -157,6 +162,12 @@ export function deduplicateCSS(cssArray) {
 		parts.push(...regularRules.imports);
 	}
 
+	// Add layer order declaration (only if we have any layers)
+	const hasLayers = tailwindLayers.base.size > 0 || tailwindLayers.components.size > 0 || tailwindLayers.utilities.size > 0;
+	if (hasLayers) {
+		parts.push('@layer base, components, utilities;');
+	}
+
 	// Tailwind layers in correct order
 	if (tailwindLayers.base.size > 0) {
 		parts.push(`@layer base {\n${Array.from(tailwindLayers.base).join('\n\n')}\n}`);
@@ -167,6 +178,11 @@ export function deduplicateCSS(cssArray) {
 	if (tailwindLayers.theme.size > 0) {
 		parts.push(`@layer theme {\n${Array.from(tailwindLayers.theme).join('\n\n')}\n}`);
 	}
+	if (tailwindLayers.components.size > 0) {
+		// Sort components by breakpoint before joining
+		const sortedComponents = sortUtilityRules(Array.from(tailwindLayers.components));
+		parts.push(`@layer components {\n${sortedComponents.join('\n\n')}\n}`);
+	}
 	if (tailwindLayers.utilities.size > 0) {
 		// Sort utilities by breakpoint before joining
 		const sortedUtilities = sortUtilityRules(Array.from(tailwindLayers.utilities));

package/src/design-tokens.js

@@ -1008,7 +1008,12 @@ export function generateTailwindConfig(tokens) {
  * Generate CSS Variables from Design Tokens
  */
 export function generateCSSFromTokens(tokens) {
-	const lines = [':root {'];
+	const lines = [];
+
+	// Define layer order FIRST - this sets the priority (later = higher priority)
+	lines.push('@layer base, components, utilities;');
+	lines.push('');
+	lines.push(':root {');
 
 	// Colors
 	for (const [key, value] of Object.entries(tokens.colors || {})) {