@webmate-studio/builder 0.2.78 → 0.2.80

package/package.json

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

package/src/html-cleaner.js

@@ -58,11 +58,18 @@ function transformIslandsToDataAttributes(html, availableIslands = []) {
 		// Convert island name to kebab-case for Custom Element tag
 		// SwiperTest → swiper-test
 		// MyAwesomeComponent → my-awesome-component
-		const kebabTag = tagName
+		let kebabTag = tagName
 			.replace(/([A-Z])/g, '-$1')
 			.toLowerCase()
 			.replace(/^-/, '');
 
+		// Svelte requires custom element names to be hyphenated
+		// If there's no hyphen, add a prefix to make it valid
+		// IMPORTANT: Must match the prefix logic in injectSvelteOptions()
+		if (!kebabTag.includes('-')) {
+			kebabTag = 'wm-' + kebabTag;  // e.g., "sidebar" → "wm-sidebar"
+		}
+
 		// Parse attributes and convert to HTML attributes
 		const attrs = [];
 

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