@webmate-studio/builder 0.2.50 → 0.2.51

package/package.json

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

package/src/css-deduplicator.js

@@ -0,0 +1,393 @@
+/**
+ * CSS Deduplication Service for Tailwind v4
+ * Combines multiple CSS files and removes duplicate rules
+ * Special handling for @layer blocks - extracts and deduplicates layer content
+ * Maintains correct order: base -> properties -> theme -> utilities -> components
+ */
+
+/**
+ * Extract @layer blocks from CSS
+ * Returns { layerName: content[] } map
+ */
+function extractLayers(css) {
+	const layers = {};
+	const layerRegex = /@layer\s+(\w+)\s*\{([\s\S]*?)\n\}/g;
+	let match;
+
+	while ((match = layerRegex.exec(css)) !== null) {
+		const layerName = match[1]; // base, theme, utilities, etc
+		const content = match[2].trim();
+
+		if (!layers[layerName]) {
+			layers[layerName] = [];
+		}
+		layers[layerName].push(content);
+	}
+
+	return layers;
+}
+
+/**
+ * Remove @layer blocks from CSS, returning only non-layer content
+ */
+function removeLayerBlocks(css) {
+	return css.replace(/@layer\s+\w+\s*\{[\s\S]*?\n\}/g, '').trim();
+}
+
+/**
+ * Normalize CSS rule for comparison
+ * Removes extra whitespace and normalizes formatting
+ */
+function normalizeRule(rule) {
+	return rule
+		.trim()
+		// Normalize whitespace around braces
+		.replace(/\s*{\s*/g, '{')
+		.replace(/\s*}\s*/g, '}')
+		// Normalize whitespace around colons and semicolons
+		.replace(/\s*:\s*/g, ':')
+		.replace(/\s*;\s*/g, ';')
+		// Normalize whitespace in selectors
+		.replace(/\s*,\s*/g, ',')
+		// Remove trailing semicolon (optional in CSS)
+		.replace(/;}/g, '}')
+		// Collapse multiple spaces
+		.replace(/\s+/g, ' ');
+}
+
+/**
+ * Deduplicate multiple CSS strings (Tailwind v4 aware)
+ * @param {string[]} cssArray - Array of CSS strings
+ * @returns {string} Deduplicated CSS
+ */
+export function deduplicateCSS(cssArray) {
+	const seenRules = new Map(); // normalized -> original
+	const tailwindLayers = {
+		base: new Set(),
+		properties: new Set(),
+		theme: new Set(),
+		utilities: new Set()
+	};
+	const regularRules = {
+		charset: [], // @charset declarations
+		imports: [], // @import rules
+		other: [] // Non-layer rules
+	};
+
+	let totalRules = 0;
+	let duplicatesSkipped = 0;
+
+	for (const css of cssArray) {
+		if (!css || typeof css !== 'string') continue;
+
+		// Extract Tailwind @layer blocks
+		const extractedLayers = extractLayers(css);
+
+		// Add layer content to Sets (automatic deduplication)
+		for (const [layerName, contents] of Object.entries(extractedLayers)) {
+			if (tailwindLayers[layerName]) {
+				for (const content of contents) {
+					// Split layer content into individual rules and deduplicate
+					const rules = splitCSSRules(content);
+					for (const rule of rules) {
+						const trimmed = rule.trim();
+						if (trimmed) {
+							const normalized = normalizeRule(trimmed);
+							if (!seenRules.has(normalized)) {
+								seenRules.set(normalized, trimmed);
+								tailwindLayers[layerName].add(trimmed);
+								totalRules++;
+							} else {
+								duplicatesSkipped++;
+							}
+						}
+					}
+				}
+			}
+		}
+
+		// Process non-layer CSS (utilities, custom rules)
+		const nonLayerCSS = removeLayerBlocks(css);
+		if (nonLayerCSS) {
+			const rules = splitCSSRules(nonLayerCSS);
+
+			for (const rule of rules) {
+				const trimmed = rule.trim();
+				if (!trimmed) continue;
+
+				// Skip empty rules
+				if (isEmptyRule(trimmed)) {
+					duplicatesSkipped++;
+					continue;
+				}
+
+				// Normalize for duplicate detection
+				const normalized = normalizeRule(trimmed);
+
+				// Skip exact duplicates (based on normalized form)
+				if (seenRules.has(normalized)) {
+					duplicatesSkipped++;
+					continue;
+				}
+				seenRules.set(normalized, trimmed);
+				totalRules++;
+
+				// Categorize rule
+				if (trimmed.startsWith('@charset')) {
+					regularRules.charset.push(trimmed);
+				} else if (trimmed.startsWith('@import')) {
+					regularRules.imports.push(trimmed);
+				} else {
+					regularRules.other.push(trimmed);
+				}
+			}
+		}
+	}
+
+	console.log(`[CSS Deduplicator] Total: ${totalRules} rules, Removed: ${duplicatesSkipped} duplicates`);
+
+	// Combine in correct order (Tailwind v4 order)
+	const parts = [];
+
+	// @charset and @import first
+	if (regularRules.charset.length > 0) {
+		parts.push(regularRules.charset[0]); // Only keep first @charset
+	}
+	if (regularRules.imports.length > 0) {
+		parts.push(...regularRules.imports);
+	}
+
+	// Tailwind layers in correct order
+	if (tailwindLayers.base.size > 0) {
+		parts.push(`@layer base {\n${Array.from(tailwindLayers.base).join('\n\n')}\n}`);
+	}
+	if (tailwindLayers.properties.size > 0) {
+		parts.push(`@layer properties {\n${Array.from(tailwindLayers.properties).join('\n\n')}\n}`);
+	}
+	if (tailwindLayers.theme.size > 0) {
+		parts.push(`@layer theme {\n${Array.from(tailwindLayers.theme).join('\n\n')}\n}`);
+	}
+	if (tailwindLayers.utilities.size > 0) {
+		// Sort utilities by breakpoint before joining
+		const sortedUtilities = sortUtilityRules(Array.from(tailwindLayers.utilities));
+		parts.push(`@layer utilities {\n${sortedUtilities.join('\n\n')}\n}`);
+	}
+
+	// Other rules (component-specific, non-layer)
+	if (regularRules.other.length > 0) {
+		// Post-process: Remove empty rules that have non-empty counterparts
+		let filteredRules = filterEmptyDuplicates(regularRules.other);
+
+		// Sort rules: non-responsive first, then responsive (sm, md, lg, xl, 2xl)
+		filteredRules = sortUtilityRules(filteredRules);
+
+		parts.push(...filteredRules);
+	}
+
+	return parts.join('\n\n');
+}
+
+/**
+ * Sort utility rules by responsive breakpoint
+ * Non-responsive rules first, then sm, md, lg, xl, 2xl
+ * This ensures correct CSS cascade (mobile-first approach)
+ */
+function sortUtilityRules(rules) {
+	const breakpointOrder = {
+		none: 0,   // No breakpoint
+		sm: 1,     // >= 640px
+		md: 2,     // >= 768px
+		lg: 3,     // >= 1024px
+		xl: 4,     // >= 1280px
+		'2xl': 5   // >= 1536px
+	};
+
+	return rules.sort((a, b) => {
+		const breakpointA = getBreakpoint(a);
+		const breakpointB = getBreakpoint(b);
+
+		return (breakpointOrder[breakpointA] || 0) - (breakpointOrder[breakpointB] || 0);
+	});
+}
+
+/**
+ * Extract breakpoint from a CSS rule selector
+ * Example: ".sm\:grid-cols-3 { ... }" -> "sm"
+ */
+function getBreakpoint(rule) {
+	const selector = extractSelector(rule);
+	if (!selector) return 'none';
+
+	// Check for responsive prefix (e.g., .sm\:, .md\:, .lg\:)
+	const match = selector.match(/\.(sm|md|lg|xl|2xl)\\:/);
+	return match ? match[1] : 'none';
+}
+
+/**
+ * Filter out empty rules that have non-empty versions with the same selector
+ * Example: Remove `.sm\:grid-cols-3 {}` if `.sm\:grid-cols-3 { @media ... }` exists
+ */
+function filterEmptyDuplicates(rules) {
+	const selectorMap = new Map(); // selector -> rule
+
+	for (const rule of rules) {
+		const selector = extractSelector(rule);
+		if (!selector) continue;
+
+		const existing = selectorMap.get(selector);
+
+		if (!existing) {
+			// First time seeing this selector
+			selectorMap.set(selector, rule);
+		} else {
+			// Selector already exists - keep the non-empty one
+			const isCurrentEmpty = isEmptyRule(rule);
+			const isExistingEmpty = isEmptyRule(existing);
+
+			if (isCurrentEmpty && !isExistingEmpty) {
+				// Keep existing (non-empty), skip current (empty)
+				continue;
+			} else if (!isCurrentEmpty && isExistingEmpty) {
+				// Replace with current (non-empty)
+				selectorMap.set(selector, rule);
+			} else if (!isCurrentEmpty && !isExistingEmpty) {
+				// Both non-empty - keep the more complex one (longer)
+				if (rule.length > existing.length) {
+					selectorMap.set(selector, rule);
+				}
+			}
+			// Both empty - keep first (doesn't matter)
+		}
+	}
+
+	return Array.from(selectorMap.values());
+}
+
+/**
+ * Extract the selector from a CSS rule
+ * Example: ".flex { display: flex; }" -> ".flex"
+ */
+function extractSelector(rule) {
+	const match = rule.match(/^([^{]+)\{/);
+	return match ? match[1].trim() : null;
+}
+
+/**
+ * Split CSS into rules
+ * Handles nested structures (media queries, nested selectors)
+ */
+function splitCSSRules(css) {
+	const rules = [];
+	let current = '';
+	let depth = 0;
+	let inString = false;
+	let stringChar = null;
+	let startDepth = 0; // Track starting depth for this rule
+
+	for (let i = 0; i < css.length; i++) {
+		const char = css[i];
+		const prevChar = i > 0 ? css[i - 1] : '';
+
+		// Track string literals
+		if ((char === '"' || char === "'") && prevChar !== '\\') {
+			if (!inString) {
+				inString = true;
+				stringChar = char;
+			} else if (char === stringChar) {
+				inString = false;
+				stringChar = null;
+			}
+		}
+
+		// Track brace depth (outside strings)
+		if (!inString) {
+			if (char === '{') {
+				// Starting a new rule - record initial depth
+				if (depth === 0) {
+					startDepth = 0;
+				}
+				depth++;
+			} else if (char === '}') {
+				depth--;
+
+				// Rule complete when we close back to starting depth (0)
+				if (depth === 0) {
+					current += char;
+
+					// Look ahead to see if there's more content
+					let j = i + 1;
+					while (j < css.length && /\s/.test(css[j])) {
+						j++;
+					}
+
+					// If we hit a selector or @ rule, end current rule
+					if (j >= css.length || css[j] === '.' || css[j] === '#' || css[j] === '@' || /[a-zA-Z]/.test(css[j])) {
+						const trimmed = current.trim();
+						// Only add non-empty rules
+						if (trimmed && !isEmptyRule(trimmed)) {
+							rules.push(trimmed);
+						}
+						current = '';
+						continue;
+					}
+				}
+			}
+		}
+
+		current += char;
+	}
+
+	// Add remaining content
+	const trimmed = current.trim();
+	if (trimmed && !isEmptyRule(trimmed)) {
+		rules.push(trimmed);
+	}
+
+	return rules;
+}
+
+/**
+ * Check if a CSS rule is empty (no declarations)
+ */
+function isEmptyRule(rule) {
+	// Extract content between outermost braces
+	const match = rule.match(/^[^{]+\{([\s\S]*)\}$/);
+	if (!match) return false;
+
+	const content = match[1].trim();
+
+	// Empty if no content at all
+	if (!content) return true;
+
+	// NOT empty if it contains @media, @supports, or other nested blocks
+	// (these are valid, even if the outer rule has no direct declarations)
+	if (content.includes('@media') || content.includes('@supports') || content.includes('@container')) {
+		return false;
+	}
+
+	// Check if there are any CSS declarations (property: value)
+	// Look for colon followed by semicolon or closing brace
+	const hasDeclarations = /:\s*[^:;{}]+[;}]/.test(content);
+
+	return !hasDeclarations;
+}
+
+/**
+ * Generate cache key from component versions
+ * @param {Array} components - Array of {name, versionId}
+ * @returns {string} Hash
+ */
+export function generateCSSCacheKey(components) {
+	const sorted = components.sort((a, b) => a.name.localeCompare(b.name));
+	const str = sorted.map((c) => `${c.name}:${c.versionId}`).join('|');
+
+	// Simple hash
+	let hash = 0;
+	for (let i = 0; i < str.length; i++) {
+		const char = str.charCodeAt(i);
+		hash = (hash << 5) - hash + char;
+		hash = hash & hash; // Convert to 32bit integer
+	}
+
+	return Math.abs(hash).toString(36);
+}

package/src/index.js

@@ -2,5 +2,6 @@ import { build } from './build.js';
 import { generateComponentCSS, generateTailwindCSS, extractTailwindClasses } from './tailwind-generator.js';
 import { cleanComponentHTML } from './html-cleaner.js';
 import { bundleIsland, bundleComponentIslands } from './bundler.js';
+import { deduplicateCSS } from './css-deduplicator.js';
 
-export { build, generateComponentCSS, generateTailwindCSS, extractTailwindClasses, cleanComponentHTML, bundleIsland, bundleComponentIslands };
+export { build, generateComponentCSS, generateTailwindCSS, extractTailwindClasses, cleanComponentHTML, bundleIsland, bundleComponentIslands, deduplicateCSS };