@webmate-studio/builder 0.2.38 → 0.2.40

package/package.json

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

package/src/build.js

@@ -369,11 +369,13 @@ export async function build(options = {}) {
 
 			// Generate Tailwind CSS for this component
 			logger.info(`Generating Tailwind CSS for ${component.name}...`);
-			const { css, classes } = await generateComponentCSS(allHTML, {
+			const tailwindOptions = {
 				minify: minify,
 				designTokens: options.designTokens, // Pass design tokens to Tailwind generator
 				includeBaseLayers: false // Only generate utilities, not base/theme/properties layers
-			});
+			};
+			console.log('[Build.js] CALLING generateComponentCSS with options:', JSON.stringify(tailwindOptions, null, 2));
+			const { css, classes } = await generateComponentCSS(allHTML, tailwindOptions);
 
 			// Write CSS file
 			const cssFile = file.replace(/\.html$/, '.tailwind.css');

package/src/tailwind-generator.js

@@ -146,6 +146,8 @@ function generateThemeCSS(colors, designTokens = null) {
  * @returns {Promise<string>} Generated CSS
  */
 export async function generateTailwindCSS(classes, options = {}) {
+	console.log('[Tailwind Generator] RECEIVED options:', JSON.stringify(options, null, 2));
+
 	const {
 		designTokens = null,
 		minify = true,
@@ -321,9 +323,17 @@ ${themeCSS}
 		// Build CSS for the specific classes
 		let result = await compiler.build(classArray);
 
+		console.log(`[Tailwind Generator] includeBaseLayers = ${includeBaseLayers}`);
+		console.log(`[Tailwind Generator] Generated CSS length BEFORE stripping: ${result.length}`);
+		console.log(`[Tailwind Generator] CSS contains @layer base: ${result.includes('@layer base')}`);
+		console.log(`[Tailwind Generator] CSS contains @layer theme: ${result.includes('@layer theme')}`);
+
 		// If includeBaseLayers is false, strip out base/theme/properties layers
 		if (!includeBaseLayers) {
+			console.log('[Tailwind Generator] Stripping non-utility layers...');
 			result = stripNonUtilityLayers(result);
+			console.log(`[Tailwind Generator] Generated CSS length AFTER stripping: ${result.length}`);
+			console.log(`[Tailwind Generator] CSS contains @layer base: ${result.includes('@layer base')}`);
 		}
 
 		return result;
@@ -341,6 +351,8 @@ ${themeCSS}
  * @returns {Promise<{css: string, classes: string[]}>} Generated CSS and extracted classes
  */
 export async function generateComponentCSS(html, options = {}) {
+	console.log('[Component CSS] RECEIVED options:', JSON.stringify(options, null, 2));
+
 	// Extract classes from HTML
 	const classes = extractTailwindClasses(html);
 
@@ -351,6 +363,8 @@ export async function generateComponentCSS(html, options = {}) {
 		};
 	}
 
+	console.log('[Component CSS] PASSING options to generateTailwindCSS:', JSON.stringify(options, null, 2));
+
 	// Generate CSS
 	const css = await generateTailwindCSS(classes, options);