meno-core 1.0.45 → 1.0.46

package/lib/shared/cssGeneration.ts

@@ -6,10 +6,11 @@
 
 import { prefixToCSSProperty, propertyMap } from './utilityClassConfig';
 import { getStyleValue, getDynamicStyle, isDynamicClass } from './styleValueRegistry';
+import { isCssNamedColor } from './cssNamedColors';
 import type { BreakpointConfig, LegacyBreakpointConfig } from './breakpoints';
 import { DEFAULT_BREAKPOINTS, getBreakpointValues } from './breakpoints';
-import type { ResponsiveScales } from './responsiveScaling';
-import { scalePropertyValue } from './responsiveScaling';
+import type { ResponsiveScales, CSSPropertyType } from './responsiveScaling';
+import { scalePropertyValue, getScaleMultiplier } from './responsiveScaling';
 import type { InteractiveStyles, StyleObject, ResponsiveStyleObject, StyleValue } from './types/styles';
 import type { RemConversionConfig } from './pxToRem';
 import { applyRemConversion, convertPxToRem, shouldConvertProperty } from './pxToRem';
@@ -395,7 +396,11 @@ export function generateRuleForClass(className: string): string | null {
   // unless it's a hex color (#...) or RGB value
   if ((prefix === 'bgc' || prefix === 'bg' || prefix === 'c' || prefix === 'bc')) {
     // If it's not a hex color, RGB value, or pixel value, treat it as a CSS variable name
+    // Unless it's a CSS named color (red, blue, transparent, etc.) — use directly
     if (!value.startsWith('#') && !value.includes('rgb') && !value.includes('px')) {
+      if (isCssNamedColor(value)) {
+        return `${cssProp}: ${value};`;
+      }
       return `${cssProp}: var(--${value});`;
     }
   }
@@ -849,12 +854,14 @@ export function generateInteractiveCSS(
   elementClass: string,
   interactiveStyles: InteractiveStyles,
   breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS,
-  remConfig?: RemConversionConfig
+  remConfig?: RemConversionConfig,
+  responsiveScales?: ResponsiveScales
 ): string {
   const css: string[] = [];
 
   // Extract breakpoint values for CSS media queries
   const breakpointValues = getBreakpointValues(breakpoints);
+  const scalingEnabled = responsiveScales?.enabled === true;
 
   for (const rule of interactiveStyles) {
     const { prefix, postfix, style } = rule;
@@ -862,6 +869,11 @@ export function generateInteractiveCSS(
     // Build full selector: {prefix}.element{postfix}
     const fullSelector = `${prefix || ''}.${elementClass}${postfix || ''}`;
 
+    // Breakpoint styles (sorted by value descending)
+    const sortedBreakpoints = Object.entries(breakpointValues).sort(
+      ([, a], [, b]) => b - a
+    );
+
     if (isResponsiveStyle(style)) {
       // Generate responsive rules
       const responsive = style as ResponsiveStyleObject;
@@ -874,15 +886,30 @@ export function generateInteractiveCSS(
         }
       }
 
-      // Breakpoint styles (sorted by value descending)
-      const sortedBreakpoints = Object.entries(breakpointValues).sort(
-        ([, a], [, b]) => b - a
-      );
-
       for (const [breakpointName, breakpointValue] of sortedBreakpoints) {
-        const breakpointStyles = responsive[breakpointName];
-        if (breakpointStyles && Object.keys(breakpointStyles).length > 0) {
-          const properties = applyRemConversion(styleObjectToCSS(breakpointStyles), remConfig);
+        const explicit = responsive[breakpointName];
+
+        // Merge explicit breakpoint styles with auto-scaled values derived
+        // from the base, skipping any property the author explicitly set.
+        let merged: StyleObject | null = null;
+        if (explicit && Object.keys(explicit).length > 0) {
+          merged = { ...explicit };
+        }
+
+        if (scalingEnabled && responsive.base) {
+          const scaled = scaleStyleForBreakpoint(
+            responsive.base,
+            responsiveScales!,
+            breakpointName,
+            new Set(Object.keys(explicit ?? {}))
+          );
+          if (Object.keys(scaled).length > 0) {
+            merged = { ...(merged ?? {}), ...scaled };
+          }
+        }
+
+        if (merged && Object.keys(merged).length > 0) {
+          const properties = applyRemConversion(styleObjectToCSS(merged), remConfig);
           if (properties) {
             css.push(
               `@media (max-width: ${breakpointValue}px) { ${fullSelector} { ${properties}; } }`
@@ -898,6 +925,24 @@ export function generateInteractiveCSS(
         if (properties) {
           css.push(`${fullSelector} { ${properties}; }`);
         }
+
+        // Auto-scale the flat style into each enabled breakpoint.
+        if (scalingEnabled) {
+          for (const [breakpointName, breakpointValue] of sortedBreakpoints) {
+            const scaled = scaleStyleForBreakpoint(
+              flatStyle,
+              responsiveScales!,
+              breakpointName,
+              new Set()
+            );
+            if (Object.keys(scaled).length === 0) continue;
+            const scaledProps = applyRemConversion(styleObjectToCSS(scaled), remConfig);
+            if (!scaledProps) continue;
+            css.push(
+              `@media (max-width: ${breakpointValue}px) { ${fullSelector} { ${scaledProps}; } }`
+            );
+          }
+        }
       }
     }
   }
@@ -905,6 +950,45 @@ export function generateInteractiveCSS(
   return css.join('\n');
 }
 
+/**
+ * Build a new style object containing auto-scaled values for every property
+ * in a given base style that falls into a scale category at `breakpointName`.
+ * Properties listed in `skipProperties` are left out (the author has set an
+ * explicit override at that breakpoint).
+ */
+function scaleStyleForBreakpoint(
+  baseStyle: StyleObject,
+  responsiveScales: ResponsiveScales,
+  breakpointName: string,
+  skipProperties: Set<string>
+): StyleObject {
+  const result: StyleObject = {};
+  const baseRef = responsiveScales.baseReference ?? 16;
+
+  for (const [property, value] of Object.entries(baseStyle)) {
+    if (skipProperties.has(property)) continue;
+    if (typeof value === 'object' && value !== null && '_mapping' in value) continue;
+    if (value == null) continue;
+
+    const strValue = String(value);
+    if (strValue === '') continue;
+
+    const scale = getScaleMultiplier(
+      responsiveScales,
+      property as CSSPropertyType,
+      breakpointName
+    );
+    if (scale == null) continue;
+
+    const scaledValue = scalePropertyValue(strValue, baseRef, scale);
+    if (scaledValue == null || scaledValue === strValue) continue;
+
+    result[property] = scaledValue;
+  }
+
+  return result;
+}
+
 /**
  * Collect and generate CSS for all interactive styles in a page/component
  *
@@ -915,12 +999,13 @@ export function generateInteractiveCSS(
 export function generateAllInteractiveCSS(
   interactiveStylesMap: Map<string, InteractiveStyles>,
   breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS,
-  remConfig?: RemConversionConfig
+  remConfig?: RemConversionConfig,
+  responsiveScales?: ResponsiveScales
 ): string {
   const cssBlocks: string[] = [];
 
   for (const [elementClass, styles] of interactiveStylesMap) {
-    const css = generateInteractiveCSS(elementClass, styles, breakpoints, remConfig);
+    const css = generateInteractiveCSS(elementClass, styles, breakpoints, remConfig, responsiveScales);
     if (css) {
       cssBlocks.push(css);
     }

package/lib/shared/cssNamedColors.ts

@@ -0,0 +1,47 @@
+/**
+ * CSS Named Colors
+ * Complete set of CSS Level 4 named colors + keywords
+ * Used to distinguish named colors from CSS variable references
+ */
+
+export const CSS_NAMED_COLORS: ReadonlySet<string> = new Set([
+  // CSS Level 4 named colors
+  'aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'azure',
+  'beige', 'bisque', 'black', 'blanchedalmond', 'blue', 'blueviolet', 'brown', 'burlywood',
+  'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan',
+  'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki',
+  'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon',
+  'darkseagreen', 'darkslateblue', 'darkslategray', 'darkslategrey', 'darkturquoise', 'darkviolet',
+  'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue',
+  'firebrick', 'floralwhite', 'forestgreen', 'fuchsia',
+  'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'gray', 'green', 'greenyellow', 'grey',
+  'honeydew', 'hotpink',
+  'indianred', 'indigo', 'ivory',
+  'khaki',
+  'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan',
+  'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon',
+  'lightseagreen', 'lightskyblue', 'lightslategray', 'lightslategrey', 'lightsteelblue', 'lightyellow',
+  'lime', 'limegreen', 'linen',
+  'magenta', 'maroon', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple',
+  'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred',
+  'midnightblue', 'mintcream', 'mistyrose', 'moccasin',
+  'navajowhite', 'navy',
+  'oldlace', 'olive', 'olivedrab', 'orange', 'orangered', 'orchid',
+  'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff',
+  'peru', 'pink', 'plum', 'powderblue', 'purple',
+  'rebeccapurple', 'red', 'rosybrown', 'royalblue',
+  'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'silver', 'skyblue',
+  'slateblue', 'slategray', 'slategrey', 'snow', 'springgreen', 'steelblue',
+  'tan', 'teal', 'thistle', 'tomato', 'turquoise',
+  'violet',
+  'wheat', 'white', 'whitesmoke',
+  'yellow', 'yellowgreen',
+  // CSS color keywords
+  'transparent', 'currentcolor',
+  // CSS-wide keywords (should never be wrapped in var())
+  'inherit', 'initial', 'unset', 'revert',
+]);
+
+export function isCssNamedColor(value: string): boolean {
+  return CSS_NAMED_COLORS.has(value.toLowerCase());
+}

package/lib/shared/cssProperties.ts

@@ -495,7 +495,7 @@ function matchesAbbreviation(property: string, input: string): boolean {
  * Supports both startsWith matching and camelCase abbreviation matching
  */
 export function filterCSSProperties(input: string): string[] {
-  const normalizedInput = input.trim();
+  const normalizedInput = (input ?? '').trim();
   if (!normalizedInput) {
     return CSS_PROPERTIES.slice(0, 15); // Show first 15 by default
   }
@@ -544,7 +544,7 @@ export function filterPropertyValues(propertyName: string, input: string): strin
     return []; // No predefined values for this property
   }
 
-  const normalizedInput = input.trim().toLowerCase();
+  const normalizedInput = (input ?? '').trim().toLowerCase();
   if (!normalizedInput) {
     return values; // Return all values if no input
   }

package/lib/shared/index.ts

@@ -23,6 +23,7 @@ export * from './styleUtils';
 export * from './cssProperties';
 export * from './cssGeneration';
 export * from './colorProperties';
+export * from './cssNamedColors';
 export * from './utilityClassMapper';
 export * from './elementClassName';
 export * from './styleValueRegistry';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meno-core",
-  "version": "1.0.45",
+  "version": "1.0.46",
   "type": "module",
   "bin": {
     "meno": "./dist/bin/cli.js"