@webmate-studio/builder 0.2.28 → 0.2.30

package/build-service.js

@@ -219,11 +219,23 @@ async function buildComponent(payload) {
 			console.log(`[Build Service] ✓ Transformed HTML: ${islandNames.length} island(s) → Custom Elements`);
 		}
 
-		// Generate CSS
+		// Generate CSS from HTML + Islands
 		let css = '';
-		if (transformedHtml) {
+		if (transformedHtml || bundledIslands.length > 0) {
 			console.log('[Build Service] Generating CSS...');
-			const cssResult = await generateComponentCSS(transformedHtml, {
+
+			// Combine HTML and island content for CSS scanning
+			let contentToScan = transformedHtml || '';
+
+			// Add island content (they contain Tailwind classes too!)
+			if (bundledIslands.length > 0) {
+				for (const island of bundledIslands) {
+					contentToScan += '\n' + island.content;
+				}
+				console.log(`[Build Service] Including ${bundledIslands.length} island(s) for CSS scanning`);
+			}
+
+			const cssResult = await generateComponentCSS(contentToScan, {
 				designTokens: null,
 				minify: true
 			});

package/package.json

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

package/src/build.js

@@ -81,24 +81,26 @@ async function installComponentDependencies(componentDir, componentName) {
  * @returns {string} HTML with scoping attribute
  */
 function addScopingAttribute(html, componentName) {
-	const dom = parseDocument(html);
 	const scopeId = `wm-${componentName.toLowerCase().replace(/[^a-z0-9]/g, '-')}`;
 
-	// Find first element (skip text nodes and comments)
-	const rootElement = DomUtils.findOne((elem) => elem.type === 'tag', dom.children, true);
-
-	if (rootElement) {
-		// Add data-wm-component attribute
-		if (!rootElement.attribs) {
-			rootElement.attribs = {};
-		}
-		rootElement.attribs['data-wm-component'] = scopeId;
+	// Use regex to add attribute to first HTML element
+	// This preserves the original HTML syntax (including unquoted class: directives)
+	// Pattern: Match first opening tag, capture tag name and attributes, insert our attribute
+	const match = html.match(/^(\s*)(<([a-zA-Z][a-zA-Z0-9-]*)(\s+[^>]*)?(\/?)>)/);
+
+	if (match) {
+		const whitespace = match[1];
+		const fullTag = match[2];
+		const tagName = match[3];
+		const existingAttrs = match[4] || '';
+		const selfClosing = match[5] || '';
+
+		// Insert data-wm-component attribute
+		const newTag = `<${tagName} data-wm-component="${scopeId}"${existingAttrs}${selfClosing}>`;
+		return whitespace + newTag + html.substring(match[0].length);
 	}
 
-	return render(dom, {
-		encodeEntities: false,
-		selfClosingTags: true
-	});
+	return html;
 }
 
 /**

package/src/html-cleaner.js

@@ -11,24 +11,28 @@ import render from 'dom-serializer';
  * @returns {string} Cleaned HTML without wm: attributes
  */
 export function cleanComponentHTML(html, islands = []) {
-	// Transform PascalCase island elements to data-island FIRST (before parsing)
+	// Transform PascalCase island elements to data-island FIRST
 	if (islands && islands.length > 0) {
 		html = transformIslandsToDataAttributes(html, islands);
 	}
 
-	const dom = parseDocument(html);
+	// Remove wm: attributes using regex (avoids htmlparser2 breaking class: directives)
+	// Remove metadata attributes: wm:component, wm:prop, wm:props, wm:schema, wm:description
+	html = html.replace(/\s+wm:(component|prop|props|schema|description)="[^"]*"/g, '');
+	html = html.replace(/\s+wm:(component|prop|props|schema|description)='[^']*'/g, '');
+	html = html.replace(/\s+wm:(component|prop|props|schema|description)=\{[^}]*\}/g, '');
+	html = html.replace(/\s+wm:(component|prop|props|schema|description)/g, '');
 
-	// Remove all wm: attributes from all elements
-	removeWmAttributes(dom);
+	// Remove standalone 'wm' attribute
+	html = html.replace(/\s+wm="[^"]*"/g, '');
+	html = html.replace(/\s+wm='[^']*'/g, '');
+	html = html.replace(/\s+wm(?=\s|>|\/)/g, '');
 
-	// Remove <script wm:schema> tags
-	removeSchemaScripts(dom);
+	// Remove <script wm:schema>, <script wm:description>, <script wm:props>, <script wm="">
+	html = html.replace(/<script[^>]*\s+wm:(schema|description|props)[^>]*>[\s\S]*?<\/script>/gi, '');
+	html = html.replace(/<script[^>]*\s+wm=""[^>]*>[\s\S]*?<\/script>/gi, '');
 
-	// Serialize back to HTML
-	return render(dom, {
-		encodeEntities: false,
-		selfClosingTags: true
-	});
+	return html;
 }
 
 /**
@@ -167,28 +171,23 @@ function removeSchemaScripts(dom) {
  * @returns {Object} { html: string, css: string }
  */
 export function extractStyles(html) {
-	const dom = parseDocument(html);
 	let css = '';
 
-	// Find all <style> tags
-	const styleTags = DomUtils.findAll(
-		(elem) => elem.name === 'style',
-		dom.children
-	);
-
-	for (const styleTag of styleTags) {
-		const styleContent = DomUtils.textContent(styleTag);
-		css += styleContent + '\n';
+	// Extract all <style> tags using regex (avoids htmlparser2 breaking class: directives)
+	const styleTagPattern = /<style(\s[^>]*)?>(.*)(?:<\/style>)/gis;
+	let match;
+	const stylesToRemove = [];
 
-		// Remove style tag from DOM
-		DomUtils.removeElement(styleTag);
+	while ((match = styleTagPattern.exec(html)) !== null) {
+		css += match[2] + '\n';
+		stylesToRemove.push(match[0]);
 	}
 
-	// Serialize remaining HTML
-	const cleanHtml = render(dom, {
-		encodeEntities: false,
-		selfClosingTags: true
-	});
+	// Remove all <style> tags from HTML
+	let cleanHtml = html;
+	for (const styleTag of stylesToRemove) {
+		cleanHtml = cleanHtml.replace(styleTag, '');
+	}
 
 	return {
 		html: cleanHtml.trim(),