@webmate-studio/builder 0.2.43 → 0.2.45

package/package.json

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

package/src/tailwind-generator.js

@@ -70,6 +70,7 @@ function stripNonUtilityLayers(css) {
 
 /**
  * Extract Tailwind classes from HTML content
+ * Supports: class="...", class='...', and Svelte's class:xxx={...}
  * @param {string} html - HTML content
  * @returns {Set<string>} Set of unique Tailwind classes
  */
@@ -90,6 +91,17 @@ export function extractTailwindClasses(html) {
 		});
 	}
 
+	// 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
+	const svelteClassRegex = /class:((?:[^\s=[]|\[[^\]]*\])+)=/g;
+	while ((match = svelteClassRegex.exec(html)) !== null) {
+		const className = match[1];
+		if (className.trim()) {
+			classes.add(className.trim());
+		}
+	}
+
 	return classes;
 }
 
@@ -292,13 +304,12 @@ export async function generateTailwindCSS(classes, options = {}) {
 		}
 
 		// Create input CSS with Tailwind v4 syntax
-		// For component builds: only include utilities layer (no base/theme/properties)
-		// For dev builds: include everything
+		// Always include theme (for color/spacing variables)
+		// We'll strip base/properties layers afterwards if includeBaseLayers is false
 		let inputCSS;
 
-		// Always use full Tailwind import
-		// We'll strip layers afterwards if includeBaseLayers is false
-		const themeCSS = includeBaseLayers ? generateThemeCSS(themeColors) : '';
+		// Always generate theme CSS (needed for utility classes like bg-primary)
+		const themeCSS = generateThemeCSS(themeColors);
 		inputCSS = `
 @import "tailwindcss";