@webmate-studio/builder 0.2.35 → 0.2.36

package/package.json

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

package/src/build.js

@@ -371,7 +371,8 @@ export async function build(options = {}) {
 			logger.info(`Generating Tailwind CSS for ${component.name}...`);
 			const { css, classes } = await generateComponentCSS(allHTML, {
 				minify: minify,
-				designTokens: options.designTokens // Pass design tokens to Tailwind generator
+				designTokens: options.designTokens, // Pass design tokens to Tailwind generator
+				includeBaseLayers: false // Only generate utilities, not base/theme/properties layers
 			});
 
 			// Write CSS file

package/src/tailwind-generator.js

@@ -104,12 +104,14 @@ function generateThemeCSS(colors, designTokens = null) {
  * @param {Object} options - Generation options
  * @param {Object} options.designTokens - Custom design tokens (optional)
  * @param {boolean} options.minify - Minify output CSS
+ * @param {boolean} options.includeBaseLayers - Include base/theme/properties layers (default: true)
  * @returns {Promise<string>} Generated CSS
  */
 export async function generateTailwindCSS(classes, options = {}) {
 	const {
 		designTokens = null,
-		minify = true
+		minify = true,
+		includeBaseLayers = true
 	} = options;
 
 	const classArray = Array.isArray(classes) ? classes : Array.from(classes);
@@ -250,12 +252,25 @@ export async function generateTailwindCSS(classes, options = {}) {
 		}
 
 		// Create input CSS with Tailwind v4 syntax
-		const themeCSS = generateThemeCSS(themeColors);
-		const inputCSS = `
+		// For component builds: only include utilities layer (no base/theme/properties)
+		// For dev builds: include everything
+		let inputCSS;
+
+		if (includeBaseLayers) {
+			// Full Tailwind with all layers (for wm dev)
+			const themeCSS = generateThemeCSS(themeColors);
+			inputCSS = `
 @import "tailwindcss";
 
 ${themeCSS}
-		`.trim();
+			`.trim();
+		} else {
+			// Only utilities layer (for component builds)
+			// Base/theme/properties are provided by CMS design tokens
+			inputCSS = `
+@import "tailwindcss" layer(utilities);
+			`.trim();
+		}
 
 		// Load Tailwind CSS styles
 		const tailwindStyles = loadTailwindStyles();