@webmate-studio/builder 0.2.36 → 0.2.38

package/package.json

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

package/src/tailwind-generator.js

@@ -30,6 +30,44 @@ function loadTailwindStyles() {
 	}
 }
 
+/**
+ * Strip non-utility layers from Tailwind CSS output
+ * Removes @layer base, @layer theme, @layer properties, @property definitions, and Tailwind comments
+ * Keeps only @layer utilities content
+ * @param {string} css - Full Tailwind CSS
+ * @returns {string} CSS with only utilities
+ */
+function stripNonUtilityLayers(css) {
+	// Remove Tailwind header comments
+	css = css.replace(/\/\*!.*?tailwindcss.*?\*\//gs, '');
+
+	// Remove @layer declarations (but keep the utilities layer)
+	css = css.replace(/@layer\s+[^{]*?;\s*/g, '');
+
+	// Remove @layer base { ... } blocks
+	css = css.replace(/@layer\s+base\s*\{[\s\S]*?\n\}/g, '');
+
+	// Remove @layer theme { ... } blocks
+	css = css.replace(/@layer\s+theme\s*\{[\s\S]*?\n\}/g, '');
+
+	// Remove @layer properties { ... } blocks
+	css = css.replace(/@layer\s+properties\s*\{[\s\S]*?\n\}/g, '');
+
+	// Remove @property definitions
+	css = css.replace(/@property\s+[^{]+\{[\s\S]*?\n\}/g, '');
+
+	// Extract content from @layer utilities { ... }
+	const utilitiesMatch = css.match(/@layer\s+utilities\s*\{([\s\S]*)\}/);
+	if (utilitiesMatch) {
+		css = utilitiesMatch[1].trim();
+	}
+
+	// Clean up multiple newlines
+	css = css.replace(/\n{3,}/g, '\n\n');
+
+	return css.trim();
+}
+
 /**
  * Extract Tailwind classes from HTML content
  * @param {string} html - HTML content
@@ -256,21 +294,14 @@ export async function generateTailwindCSS(classes, options = {}) {
 		// For dev builds: include everything
 		let inputCSS;
 
-		if (includeBaseLayers) {
-			// Full Tailwind with all layers (for wm dev)
-			const themeCSS = generateThemeCSS(themeColors);
-			inputCSS = `
+		// Always use full Tailwind import
+		// We'll strip layers afterwards if includeBaseLayers is false
+		const themeCSS = includeBaseLayers ? generateThemeCSS(themeColors) : '';
+		inputCSS = `
 @import "tailwindcss";
 
 ${themeCSS}
-			`.trim();
-		} else {
-			// Only utilities layer (for component builds)
-			// Base/theme/properties are provided by CMS design tokens
-			inputCSS = `
-@import "tailwindcss" layer(utilities);
-			`.trim();
-		}
+		`.trim();
 
 		// Load Tailwind CSS styles
 		const tailwindStyles = loadTailwindStyles();
@@ -288,7 +319,12 @@ ${themeCSS}
 		});
 
 		// Build CSS for the specific classes
-		const result = await compiler.build(classArray);
+		let result = await compiler.build(classArray);
+
+		// If includeBaseLayers is false, strip out base/theme/properties layers
+		if (!includeBaseLayers) {
+			result = stripNonUtilityLayers(result);
+		}
 
 		return result;