@webmate-studio/builder 0.2.170 → 0.2.172

package/build-service.js

@@ -8,7 +8,7 @@
 import http from 'http';
 import { generateComponentCSS } from './src/tailwind-generator.js';
 import { bundleIsland } from './src/bundler.js';
-import { cleanComponentHTML, getComponentSuffix } from './src/html-cleaner.js';
+import { cleanComponentHTML, getComponentSuffix, extractAndScopeStyles } from './src/html-cleaner.js';
 import { mkdtemp, writeFile, rm, mkdir } from 'fs/promises';
 import { existsSync, readFileSync, writeFileSync } from 'fs';
 import { join } from 'path';
@@ -329,6 +329,16 @@ async function buildComponent(payload) {
 			console.log(`[Build Service] ✓ CSS → ${(css.length / 1024).toFixed(2)}kb`);
 		}
 
+		// Extract <style> blocks from HTML, scope them, and append to CSS
+		if (transformedHtml && componentMetadata?.id) {
+			const { html: htmlWithoutStyle, scopedCss } = extractAndScopeStyles(transformedHtml, componentMetadata.id);
+			if (scopedCss) {
+				transformedHtml = htmlWithoutStyle;
+				css = css ? css + '\n\n/* Component Scoped Styles */\n' + scopedCss : scopedCss;
+				console.log(`[Build Service] ✓ Appended scoped component styles (${(scopedCss.length / 1024).toFixed(2)}kb)`);
+			}
+		}
+
 		return {
 			success: true,
 			bundledIslands,

package/package.json

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

package/src/html-cleaner.js

@@ -222,3 +222,172 @@ export function extractStyles(html) {
 		css: css.trim()
 	};
 }
+
+/**
+ * Scope CSS rules so they only apply within a specific component.
+ * Prepends each selector with [data-wmc-{hash}].
+ * Skips @-rules like @keyframes, @font-face, @media (but scopes rules inside @media).
+ * Drops element-only selectors like 'body', 'html' that can't be scoped.
+ *
+ * @param {string} css - Raw CSS from <style> block
+ * @param {string} scopeAttr - Scope attribute value, e.g. "a278"
+ * @returns {string} Scoped CSS
+ */
+export function scopeCSS(css, scopeAttr) {
+	const scope = `[data-wmc-${scopeAttr}]`;
+
+	// Element-only selectors that should be dropped (they target outside the component)
+	const globalElements = new Set(['html', 'body', ':root', ':host']);
+
+	function scopeSelector(selector) {
+		selector = selector.trim();
+		if (!selector) return '';
+
+		// :global(...) — unwrap and don't scope (like Svelte)
+		const globalMatch = selector.match(/^:global\((.+)\)$/);
+		if (globalMatch) {
+			return globalMatch[1];
+		}
+
+		// Drop pure element selectors that target outside the component
+		if (globalElements.has(selector.split(/[\s>+~.#\[:]/)[0].toLowerCase()) &&
+			!selector.includes('.') && !selector.includes('#') && !selector.includes('[')) {
+			return '';
+		}
+
+		// Prepend scope to each selector part (comma-separated handled by caller)
+		return `${scope} ${selector}`;
+	}
+
+	function scopeBlock(block) {
+		let result = '';
+		let i = 0;
+
+		while (i < block.length) {
+			// Skip whitespace
+			if (/\s/.test(block[i])) {
+				result += block[i];
+				i++;
+				continue;
+			}
+
+			// @-rules
+			if (block[i] === '@') {
+				const atRuleMatch = block.substring(i).match(/^@([\w-]+)\s*/);
+				if (atRuleMatch) {
+					const atName = atRuleMatch[1].toLowerCase();
+
+					// @media, @supports, @layer — scope contents recursively
+					if (['media', 'supports', 'layer', 'container'].includes(atName)) {
+						const braceStart = block.indexOf('{', i);
+						if (braceStart === -1) break;
+						const header = block.substring(i, braceStart + 1);
+
+						let depth = 1;
+						let j = braceStart + 1;
+						while (j < block.length && depth > 0) {
+							if (block[j] === '{') depth++;
+							else if (block[j] === '}') depth--;
+							j++;
+						}
+						const innerContent = block.substring(braceStart + 1, j - 1);
+						result += header + scopeBlock(innerContent) + '}';
+						i = j;
+						continue;
+					}
+
+					// @keyframes, @font-face — pass through without scoping
+					if (['keyframes', 'font-face'].includes(atName)) {
+						const braceStart = block.indexOf('{', i);
+						if (braceStart === -1) break;
+						let depth = 1;
+						let j = braceStart + 1;
+						while (j < block.length && depth > 0) {
+							if (block[j] === '{') depth++;
+							else if (block[j] === '}') depth--;
+							j++;
+						}
+						result += block.substring(i, j);
+						i = j;
+						continue;
+					}
+				}
+			}
+
+			// Regular CSS rule: selector { declarations }
+			const braceStart = block.indexOf('{', i);
+			if (braceStart === -1) {
+				result += block.substring(i);
+				break;
+			}
+
+			const selectorText = block.substring(i, braceStart).trim();
+
+			// Find matching closing brace (handle nested braces for &)
+			let depth = 1;
+			let j = braceStart + 1;
+			while (j < block.length && depth > 0) {
+				if (block[j] === '{') depth++;
+				else if (block[j] === '}') depth--;
+				j++;
+			}
+			const declarations = block.substring(braceStart + 1, j - 1);
+
+			// Scope each comma-separated selector
+			const scopedSelectors = selectorText
+				.split(',')
+				.map(scopeSelector)
+				.filter(Boolean)
+				.join(', ');
+
+			if (scopedSelectors) {
+				result += scopedSelectors + ' {' + declarations + '}';
+			}
+
+			i = j;
+		}
+
+		return result;
+	}
+
+	return scopeBlock(css);
+}
+
+/**
+ * Extract <style> blocks from component HTML, scope the CSS, and add scope attribute to root element.
+ * Returns cleaned HTML (without <style>) and scoped CSS ready to append to component.css.
+ *
+ * @param {string} html - Component HTML (may contain <style> blocks)
+ * @param {string} componentId - Component UUID for generating scope hash
+ * @returns {{ html: string, scopedCss: string }} Cleaned HTML + scoped CSS
+ */
+export function extractAndScopeStyles(html, componentId) {
+	if (!componentId) {
+		return { html, scopedCss: '' };
+	}
+
+	const { html: cleanHtml, css } = extractStyles(html);
+
+	if (!css) {
+		return { html, scopedCss: '' };
+	}
+
+	const suffix = getComponentSuffix(componentId);
+	const scopedCss = scopeCSS(css, suffix);
+
+	// Add data-wmc-{hash} attribute to the first root element
+	const scopeAttr = `data-wmc-${suffix}`;
+	const rootTagMatch = cleanHtml.match(/^(\s*<\w+)/);
+	let scopedHtml = cleanHtml;
+	if (rootTagMatch) {
+		const firstTag = rootTagMatch[1];
+		scopedHtml = cleanHtml.replace(firstTag, `${firstTag} ${scopeAttr}`);
+	}
+
+	console.log(`[HTML Cleaner] Extracted and scoped ${css.split('\n').length} lines of component CSS (scope: ${scopeAttr})`);
+
+	return {
+		html: scopedHtml,
+		scopedCss
+	};
+}

package/src/index.js

@@ -1,6 +1,6 @@
 import { build } from './build.js';
 import { generateComponentCSS, generateTailwindCSS, extractTailwindClasses } from './tailwind-generator.js';
-import { cleanComponentHTML, getComponentSuffix } from './html-cleaner.js';
+import { cleanComponentHTML, getComponentSuffix, extractAndScopeStyles, scopeCSS } from './html-cleaner.js';
 import { bundleIsland, bundleComponentIslands } from './bundler.js';
 import { deduplicateCSS } from './css-deduplicator.js';
 import { markdownToHtml, processMarkdownProps } from './markdown.js';
@@ -26,7 +26,7 @@ function getMotionRuntime() {
 }
 
 // V1 exports (backward compatible)
-export { build, generateComponentCSS, generateTailwindCSS, extractTailwindClasses, cleanComponentHTML, getComponentSuffix, bundleIsland, bundleComponentIslands, deduplicateCSS, markdownToHtml, processMarkdownProps, SafeHtml, getMotionRuntime, TemplateProcessor, templateProcessor, defaultDesignTokens, generateTailwindV4Theme, generateTailwindConfig, generateCSSFromTokens, generateFontImports };
+export { build, generateComponentCSS, generateTailwindCSS, extractTailwindClasses, cleanComponentHTML, getComponentSuffix, extractAndScopeStyles, scopeCSS, bundleIsland, bundleComponentIslands, deduplicateCSS, markdownToHtml, processMarkdownProps, SafeHtml, getMotionRuntime, TemplateProcessor, templateProcessor, defaultDesignTokens, generateTailwindV4Theme, generateTailwindConfig, generateCSSFromTokens, generateFontImports };
 
 // V2 exports
 export { defaultDesignTokensV2, generateTailwindV4ThemeV2, generateCSSFromTokensV2, generateFontImportsV2, migrateDesignTokensV1toV2, validateDesignTokensV2, migrateResponsiveToFluid, generateColorScale, generateDarkColorScale, calculateOnColor, isV1Format, isV2Format, COLOR_WORLDS, SEMANTIC_COLOR_WORLDS, TEXT_VOICES, TEXT_LEVELS, BUTTON_VARIANTS, BUTTON_SIZES, DEFAULT_SEMANTIC_MAPPINGS, DEFAULT_STATUS_SEMANTIC_MAPPINGS, getDefaultMappingsForWorld, DEFAULT_TEXT_ALIASES };