@webmate-studio/builder 0.2.77 → 0.2.79

package/build-service.js

@@ -172,9 +172,9 @@ async function buildComponent(payload) {
 		// These become Custom Elements, others are just utilities/sub-components
 		const usedIslands = new Set();
 		if (html) {
-			// Find all custom elements in HTML (e.g. <MenuMobile />, <SearchModal />)
-			// Match: <ComponentName or <ComponentName> or <ComponentName/>
-			const componentTagRegex = /<([A-Z][a-zA-Z0-9]*)\s*\/?>/g;
+			// Find all custom elements in HTML (e.g. <MenuMobile />, <SearchModal data={...} />)
+			// Match: <ComponentName ...> or <ComponentName .../> (with or without attributes)
+			const componentTagRegex = /<([A-Z][a-zA-Z0-9]*)[^>]*?\/?>/g;
 			let match;
 			while ((match = componentTagRegex.exec(html)) !== null) {
 				const componentName = match[1]; // e.g. "MenuMobile"

package/package.json

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

package/src/tailwind-generator.js

@@ -70,7 +70,7 @@ function stripNonUtilityLayers(css) {
 
 /**
  * Extract Tailwind classes from HTML content
- * Supports: class="...", class='...', and Svelte's class:xxx={...}
+ * Supports: class="...", class='...', class={...}, and Svelte's class:xxx={...}
  * @param {string} html - HTML content
  * @returns {Set<string>} Set of unique Tailwind classes
  */
@@ -91,6 +91,50 @@ export function extractTailwindClasses(html) {
 		});
 	}
 
+	// Match class={...} dynamic expressions (Svelte/React)
+	// Extracts ALL string literals within class={...}, including template strings
+	// Example: class={`bg-slate-500 ${open ? 'rotate-45' : 'rotate-0'}`}
+	// Finds: "bg-slate-500", "rotate-45", "rotate-0"
+	const dynamicClassBlockRegex = /class=\{([^}]+)\}/g;
+	while ((match = dynamicClassBlockRegex.exec(html)) !== null) {
+		const block = match[1];
+
+		// Extract all string literals:
+		// 1. Single quotes: 'text'
+		// 2. Double quotes: "text"
+		// 3. Template literal prefix (before ${): `text ${...`
+		// 4. String parts between template expressions: `...} text ${...`
+
+		// Match quoted strings (single and double quotes)
+		const quotedStringRegex = /['"]([^'"]+)['"]/g;
+		let stringMatch;
+		while ((stringMatch = quotedStringRegex.exec(block)) !== null) {
+			const classString = stringMatch[1];
+			classString.split(/\s+/).forEach(cls => {
+				if (cls.trim()) classes.add(cls.trim());
+			});
+		}
+
+		// Match template literal parts (text before/between ${...} expressions)
+		// Match backtick-quoted content, but stop at ${
+		const templateLiteralRegex = /`([^`]*?)\$\{/g;
+		while ((stringMatch = templateLiteralRegex.exec(block)) !== null) {
+			const classString = stringMatch[1];
+			classString.split(/\s+/).forEach(cls => {
+				if (cls.trim()) classes.add(cls.trim());
+			});
+		}
+
+		// Also match template literal at the end (after last } or if no ${)
+		const templateLiteralEndRegex = /\}([^`}]*?)`/g;
+		while ((stringMatch = templateLiteralEndRegex.exec(block)) !== null) {
+			const classString = stringMatch[1];
+			classString.split(/\s+/).forEach(cls => {
+				if (cls.trim()) classes.add(cls.trim());
+			});
+		}
+	}
+
 	// Match Svelte conditional classes: class:xxx={...}
 	// Supports arbitrary values with brackets: class:lg:pb-[calc(10px + 30px)]={...}
 	// Same pattern as CLI preview-ui for consistency