@webmate-studio/builder 0.2.172 → 0.2.173

package/package.json

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

package/src/html-cleaner.js

@@ -234,6 +234,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 +378,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}`
 	};
 }