@webmate-studio/builder 0.2.172 → 0.2.174

package/package.json

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

package/src/html-cleaner.js

@@ -81,18 +81,23 @@ function transformIslandsToDataAttributes(html, availableIslands = [], component
 		return kebabTag;
 	}
 
-	// Parse attributes string into HTML attributes
+	// Parse attributes string into a data-island-props JSON attribute.
+	// This preserves camelCase prop names (HTML attributes are case-insensitive
+	// and get lowercased by the browser, breaking camelCase like bgGray → bggray).
 	function parseAttrs(attrsString) {
-		const attrs = [];
-		const attrPattern = /([a-z][a-zA-Z0-9]*)\s*=\s*(?:\{([^}]+)\}|"([^"]*)"|'([^']*)')/g;
+		const props = {};
+		const attrPattern = /([a-zA-Z][a-zA-Z0-9]*)\s*=\s*(?:\{([^}]+)\}|"([^"]*)"|'([^']*)')/g;
 		let attrMatch;
 		while ((attrMatch = attrPattern.exec(attrsString)) !== null) {
 			const propName = attrMatch[1];
 			const propValue = attrMatch[2] || attrMatch[3] || attrMatch[4];
-			const value = attrMatch[2] ? `{${propValue}}` : propValue;
-			attrs.push(`${propName}="${value}"`);
+			// For {expression} values, wrap in braces to signal runtime evaluation
+			props[propName] = attrMatch[2] ? `{${propValue}}` : propValue;
 		}
-		return attrs.length > 0 ? ' ' + attrs.join(' ') : '';
+		if (Object.keys(props).length === 0) return '';
+		// Encode as JSON in data-island-props (preserves camelCase)
+		const json = JSON.stringify(props).replace(/"/g, '"');
+		return ` data-island-props="${json}"`;
 	}
 
 	// 1. Self-closing: <ComponentName attrs... />
@@ -234,6 +239,9 @@ export function extractStyles(html) {
  * @returns {string} Scoped CSS
  */
 export function scopeCSS(css, scopeAttr) {
+	// Strip CSS comments first to avoid parsing them as selectors
+	css = css.replace(/\/\*[\s\S]*?\*\//g, '');
+
 	const scope = `[data-wmc-${scopeAttr}]`;
 
 	// Element-only selectors that should be dropped (they target outside the component)
@@ -375,19 +383,11 @@ export function extractAndScopeStyles(html, componentId) {
 	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})`);
+	console.log(`[HTML Cleaner] Extracted and scoped ${css.split('\n').length} lines of component CSS (scope: data-wmc-${suffix})`);
 
 	return {
-		html: scopedHtml,
-		scopedCss
+		html: cleanHtml,
+		scopedCss,
+		scopeAttribute: `data-wmc-${suffix}`
 	};
 }