meno-core 1.0.53 → 1.0.54

package/lib/shared/cssGeneration.ts

@@ -4,10 +4,16 @@
  * Used by both client and server to ensure consistent CSS output
  */
 
-import { prefixToCSSProperty, propertyMap } from './utilityClassConfig';
+import { propertyOrder, staticUtilityReverse, presetClassReverse } from './utilityClassConfig';
+import {
+  parseUtilityClass,
+  splitVariantPrefix,
+  breakpointClassPrefix,
+  resolveRootProperty,
+  camelToKebab,
+} from './utilityClassNames';
 import { getStyleValue, getDynamicStyle, isDynamicClass } from './styleValueRegistry';
-import { isCssNamedColor } from './cssNamedColors';
-import type { BreakpointConfig, LegacyBreakpointConfig } from './breakpoints';
+import type { BreakpointConfig } from './breakpoints';
 import { DEFAULT_BREAKPOINTS, getBreakpointValues } from './breakpoints';
 import type { ResponsiveScales, CSSPropertyType, ResponsiveMode } from './responsiveScaling';
 import {
@@ -21,49 +27,32 @@ import type { InteractiveStyles, StyleObject, ResponsiveStyleObject, StyleValue
 import type { RemConversionConfig } from './pxToRem';
 import { applyRemConversion, convertPxToRem, shouldConvertProperty } from './pxToRem';
 
-/** Sorted prefix list (longest first) — cached at module level to avoid re-sorting per call */
-const SORTED_PREFIXES: readonly string[] = Object.keys(prefixToCSSProperty)
-  .sort((a, b) => b.length - a.length);
-
 /**
- * Map from CSS property (kebab-case) to its index in propertyMap.
+ * Map from CSS property (kebab-case) to its index in propertyOrder.
  * Shorthands like 'border' have lower indices than longhands like 'border-color',
  * so sorting by this index ensures shorthand CSS rules appear before longhand rules.
  */
 const cssPropertyOrderMap: Map<string, number> = (() => {
   const map = new Map<string, number>();
-  const props = Object.keys(propertyMap);
-  for (let i = 0; i < props.length; i++) {
+  for (let i = 0; i < propertyOrder.length; i++) {
     // Convert camelCase key to kebab-case CSS property
-    const kebab = props[i].replace(/([A-Z])/g, '-$1').toLowerCase();
-    map.set(kebab, i);
+    const kebab = camelToKebab(propertyOrder[i]);
+    if (!map.has(kebab)) map.set(kebab, i);
   }
   return map;
 })();
 
 /**
  * Get the property-order index for a utility class name.
- * Returns the position of the class's CSS property in propertyMap,
+ * Returns the position of the class's CSS property in propertyOrder,
  * or Infinity for unknown classes (placed last).
  */
 function getClassPropertyOrder(className: string): number {
-  // Try dynamic prefix-based lookup
-  const extracted = extractPropertyAndValue(className);
-  if (extracted) {
-    const idx = cssPropertyOrderMap.get(extracted.property);
+  const parsed = parseUtilityClass(className);
+  if (parsed) {
+    const idx = cssPropertyOrderMap.get(parsed.property);
     if (idx !== undefined) return idx;
   }
-
-  // Try predefined rules (e.g. 'f' → display: flex)
-  const rule = utilityClassRules[className];
-  if (rule) {
-    const propMatch = rule.match(/^([a-z-]+):/);
-    if (propMatch) {
-      const idx = cssPropertyOrderMap.get(propMatch[1]);
-      if (idx !== undefined) return idx;
-    }
-  }
-
   return Infinity;
 }
 
@@ -85,18 +74,18 @@ function getResponsiveMode(scales: ResponsiveScales | undefined | null): Respons
 
 /** CSS property → responsive scale category mapping (used by generateUtilityCSS and generateSingleClassCSS) */
 const AUTO_RESPONSIVE_TYPE_MAP: Record<string, string> = {
-  'padding': 'padding',
+  padding: 'padding',
   'padding-left': 'padding',
   'padding-right': 'padding',
   'padding-top': 'padding',
   'padding-bottom': 'padding',
-  'margin': 'margin',
+  margin: 'margin',
   'margin-left': 'margin',
   'margin-right': 'margin',
   'margin-top': 'margin',
   'margin-bottom': 'margin',
   'font-size': 'fontSize',
-  'gap': 'gap',
+  gap: 'gap',
   'row-gap': 'gap',
   'column-gap': 'gap',
   'border-radius': 'borderRadius',
@@ -104,8 +93,8 @@ const AUTO_RESPONSIVE_TYPE_MAP: Record<string, string> = {
   'border-top-right-radius': 'borderRadius',
   'border-bottom-left-radius': 'borderRadius',
   'border-bottom-right-radius': 'borderRadius',
-  'width': 'size',
-  'height': 'size',
+  width: 'size',
+  height: 'size',
   'max-width': 'size',
   'max-height': 'size',
   'min-width': 'size',
@@ -113,126 +102,37 @@ const AUTO_RESPONSIVE_TYPE_MAP: Record<string, string> = {
 };
 
 /**
- * Escape special characters in CSS class names using backslash notation
- * Characters that have special meaning in CSS selectors need to be escaped
+ * Escape special characters in CSS class names using backslash notation.
+ * Tailwind-style class names carry `[ ] ( ) : % # . , / *` and more — escape
+ * everything outside the safe identifier charset.
  */
 function escapeCSSClassName(className: string): string {
-  // Escape special characters with backslash
-  // This includes: . # [ ] ( ) { } ; : , > + ~ % etc.
-  return className.replace(/[.#[\](){};<>+~:,%\/\s]/g, '\\$&');
+  return className.replace(/[^a-zA-Z0-9_-]/g, '\\$&');
 }
 
-// Define all possible utility class rules
-const utilityClassRules: Record<string, string> = {
-  // Display utilities (short forms from specialValueMappings)
-  f: 'display: flex;',
-  'fd-col': 'flex-direction: column;',
-  'fd-row': 'flex-direction: row;',
-  g: 'display: grid;',
-  b: 'display: block;',
-  i: 'display: inline;',
-  ib: 'display: inline-block;',
-  h: 'display: none;',
-  'if': 'display: inline-flex;',
-  ig: 'display: inline-grid;',
-
-  // Justify Content (short forms)
-  'jc-c': 'justify-content: center;',
-  'jc-s': 'justify-content: flex-start;',
-  'jc-e': 'justify-content: flex-end;',
-  'jc-b': 'justify-content: space-between;',
-  'jc-a': 'justify-content: space-around;',
-  'jc-ev': 'justify-content: space-evenly;',
-
-  // Align Items (short forms)
-  'ai-c': 'align-items: center;',
-  'ai-s': 'align-items: flex-start;',
-  'ai-e': 'align-items: flex-end;',
-  'ai-st': 'align-items: stretch;',
-  'ai-b': 'align-items: baseline;',
-
-  // Overflow (short forms)
-  'o-h': 'overflow: hidden;',
-  'o-a': 'overflow: auto;',
-  'o-s': 'overflow: scroll;',
-  'o-v': 'overflow: visible;',
-
-  // Cursor (full forms)
-  'cursor-pointer': 'cursor: pointer;',
-  'cursor-default': 'cursor: default;',
-
-  // Pointer events
-  'pe-none': 'pointer-events: none;',
-  'pe-auto': 'pointer-events: auto;',
-
-  // User select
-  'us-none': 'user-select: none;',
-  'us-auto': 'user-select: auto;',
-  'us-text': 'user-select: text;',
-  'us-all': 'user-select: all;',
-
-  // White space
-  'whs-normal': 'white-space: normal;',
-  'whs-nowrap': 'white-space: nowrap;',
-  'whs-pre': 'white-space: pre;',
-  'whs-pre-wrap': 'white-space: pre-wrap;',
-  'whs-pre-line': 'white-space: pre-line;',
-
-  // Shadow presets
-  'sh-0': 'box-shadow: none;',
-  'sh-1': 'box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);',
-  'sh-2': 'box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);',
-  'sh-3': 'box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);',
-  'sh-4': 'box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);',
-
-  // Gradient presets
-  'gr-1': 'background: linear-gradient(90deg, rgba(10,22,40,0.85) 0%, rgba(10,22,40,0.2) 100%);',
-  'gr-2': 'background: linear-gradient(0deg, #a9e8fd, #00aee8 25%, #0f1335 72%);',
-
-  // Border presets
-  'bd-0': 'border: 1px solid var(--border);',
-  'bd-1': 'border: 1px solid var(--border-light);',
-
-  // Note: CSS functions (blur, translateY, scale, rotate, repeat) are now handled
-  // dynamically via the styleValueRegistry - no need to hardcode specific values here
-};
-
 /**
- * Extract CSS property and value from a utility class
- * Returns { property: CSS property name, value: CSS value } or null if not a dynamic class
+ * Predefined rules for static utilities and presets (Tailwind names):
+ * `flex` → `display: flex;`, `hidden` → `display: none;`,
+ * `justify-center` → `justify-content: center;`, `shadow-2` → preset value, …
+ * Derived from the single source of truth in utilityClassConfig.ts.
  */
-function extractPropertyAndValue(className: string): { property: string; value: string } | null {
-  // Parse prefix-value pattern (e.g., "p-10px", "fs-48px")
-  for (const knownPrefix of SORTED_PREFIXES) {
-    if (className.startsWith(knownPrefix + '-')) {
-      const classValue = className.substring(knownPrefix.length + 1);
-      const cssProp = prefixToCSSProperty[knownPrefix];
-      if (cssProp) {
-        // Hash-fallback class (e.g. `pt-h1y9pr6i`): the part after the
-        // prefix is a hash, not a real CSS value. Returning `value: 'h1y9pr6i'`
-        // would make auto-responsive scaling and other downstream consumers
-        // emit broken rules like `padding-top: h1y9pr6i;`. The class IS
-        // resolvable via the style-value registry — `generateRuleForClass`
-        // handles it directly. Skip the dynamic-extraction path here.
-        if (/^h[0-9a-z]+$/.test(classValue)) {
-          return null;
-        }
-        return { property: cssProp, value: classValue };
-      }
-    }
+const utilityClassRules: Record<string, string> = (() => {
+  const rules: Record<string, string> = {};
+  for (const [className, entry] of Object.entries(staticUtilityReverse)) {
+    rules[className] = `${camelToKebab(entry.prop)}: ${entry.value};`;
   }
-
-  return null;
-}
+  for (const [className, entry] of Object.entries(presetClassReverse)) {
+    rules[className] = `${camelToKebab(entry.prop)}: ${entry.value};`;
+  }
+  return rules;
+})();
 
 /**
  * Resolve `{ property, value }` for a utility class, consulting the style-value
- * registry for hash-fallback classes (e.g. `fs-h1glej9a` for `222.3px`).
+ * registry for hash-fallback classes (e.g. `text-h1glej9a` for `222.3px`).
  *
  * Used by the auto-responsive scaling path so hashed classes don't silently
- * bypass `clamp()` / `@media` rewriting. `extractPropertyAndValue` itself
- * intentionally returns null for hashed classes because its other consumers
- * would emit broken `${prop}: ${hash};` rules.
+ * bypass `clamp()` / `@media` rewriting.
  *
  * Returns the registered value as-is (no parsing). Downstream helpers
  * (`buildFluidPropertyValue`, `scalePropertyValue`) already null out
@@ -241,48 +141,41 @@ function extractPropertyAndValue(className: string): { property: string; value:
  * `if (!fluidValue) return rule;` guards.
  */
 function resolveScalablePropertyValue(className: string): { property: string; value: string } | null {
-  const direct = extractPropertyAndValue(className);
-  if (direct) return direct;
-
-  for (const knownPrefix of SORTED_PREFIXES) {
-    if (!className.startsWith(knownPrefix + '-')) continue;
-    const classValue = className.substring(knownPrefix.length + 1);
-    if (!/^h[0-9a-z]+$/.test(classValue)) continue;
-    const cssProp = prefixToCSSProperty[knownPrefix];
-    if (!cssProp) continue;
-    const registered = getStyleValue(className);
-    if (registered == null || registered === '') continue;
-    return { property: cssProp, value: String(registered) };
-  }
-
-  return null;
+  const parsed = parseUtilityClass(className);
+  if (!parsed) return null;
+  if (parsed.value != null) return { property: parsed.property, value: parsed.value };
+
+  // Hash-fallback class: real value lives in the registry
+  const registered = getStyleValue(className);
+  if (registered == null || registered === '') return null;
+  const value = String(registered);
+  const property = parsed.root ? resolveRootProperty(parsed.root, value) : parsed.property;
+  return { property, value };
 }
 
+/** Border-side class roots → CSS side shorthand base. */
+const borderSideMap: Record<string, string> = {
+  'border-t': 'border-top',
+  'border-r': 'border-right',
+  'border-b': 'border-bottom',
+  'border-l': 'border-left',
+};
+
 /**
  * Generate CSS rule for a utility class
- * Handles dynamic classes like p-10px, m-20px, fs-48px, etc.
+ * Handles arbitrary values (p-[10px]), variables (bg-(--primary)),
+ * keywords (w-full), bare numbers (z-10) and hash-fallback classes.
  */
 export function generateRuleForClass(className: string): string | null {
-  // Check if it's a predefined rule
+  // Check if it's a predefined static/preset rule
   if (utilityClassRules[className]) {
     return utilityClassRules[className];
   }
 
-  // Parse prefix-value pattern (e.g., "p-10px", "fs-48px", "p-92px-0", "bgc-background-light")
-  // Try to match known prefixes first by checking longest prefixes first
-  let prefix = '';
-  let classValue = '';
+  const parsed = parseUtilityClass(className);
 
-  for (const knownPrefix of SORTED_PREFIXES) {
-    if (className.startsWith(knownPrefix + '-')) {
-      prefix = knownPrefix;
-      classValue = className.substring(knownPrefix.length + 1); // +1 for the hyphen
-      break;
-    }
-  }
-
-  if (!prefix || !classValue) {
-    // Check dynamic registry for classes with unknown prefixes
+  if (!parsed) {
+    // Check dynamic registry for classes with unknown roots
     const dynamicStyle = getDynamicStyle(className);
     if (dynamicStyle) {
       return `${dynamicStyle.property}: ${dynamicStyle.value};`;
@@ -290,181 +183,66 @@ export function generateRuleForClass(className: string): string | null {
     return null;
   }
 
-  // Look up the CSS property from prefix
-  const cssProp = prefixToCSSProperty[prefix];
-  if (!cssProp) {
-    // Check dynamic registry for classes with unknown prefixes
+  // Arbitrary property syntax: [clip-path:circle(50%)] — prefer the registered
+  // original value (exact), fall back to the decoded one.
+  if (parsed.kind === 'arbitrary-property') {
     const dynamicStyle = getDynamicStyle(className);
-    if (dynamicStyle) {
-      return `${dynamicStyle.property}: ${dynamicStyle.value};`;
-    }
-    return null;
-  }
-
-  // Handle border-side classes (bt-, bb-, bl-, border-r-) with special syntax FIRST
-  // Generate ONLY width and style, NOT color - allows bc- to control color independently
-  // e.g., bt-1px-solid → "border-top-width: 1px; border-top-style: solid;"
-  // This must come BEFORE registry check to ensure consistent output
-  const borderSideMap: Record<string, string> = {
-    'bt': 'border-top',
-    'bb': 'border-bottom',
-    'bl': 'border-left',
-    'border-r': 'border-right',
-  };
-  if (borderSideMap[prefix] && classValue.includes('-')) {
-    const parts = classValue.split('-');
-    const width = parts[0];
-    const borderStyle = parts[1] || 'solid';
-    const side = borderSideMap[prefix];
-    return `${side}-width: ${width}; ${side}-style: ${borderStyle};`;
+    const value = dynamicStyle ? dynamicStyle.value : parsed.value;
+    return `${parsed.property}: ${value};`;
   }
 
-  // Check registry for original value first (avoids lossy reverse-engineering)
-  const originalValue = getStyleValue(className);
-  if (originalValue !== undefined) {
-    return `${cssProp}: ${originalValue};`;
-  }
-
-  // FALLBACK: Reverse-engineer value from class name for backward compatibility
-  // (for classes extracted from HTML that weren't registered)
-
-  // Handle border with special syntax BEFORE hyphen conversion (e.g., b-1px-solid-text)
-  // This needs the original hyphenated format to parse correctly
-  if (prefix === 'b' && classValue.includes('-')) {
-    const parts = classValue.split('-');
-    const width = parts[0];
-    const borderStyle = parts[1] || 'solid';
-    const borderColor = parts[2] ? `var(--${parts[2]})` : 'currentColor';
-    return `border: ${width} ${borderStyle} ${borderColor};`;
-  }
+  const root = parsed.root;
 
-  // Handle border-radius with CSS variables (e.g., br-background)
-  if (prefix === 'br' && classValue.includes('-') && !classValue.match(/^\d+px$/)) {
-    return `border-radius: var(--${classValue});`;
-  }
-
-  // Convert hyphenated values back to spaces, but preserve negative numbers
-  // Handle cases like:
-  // - "92px-0" → "92px 0" (space between values)
-  // - "-0.015" → "-0.015" (negative number)
-  // - "0-5px" → "0 5px" (space between values)
-  // - "1px-solid" → "1px solid" (border shorthand)
-  // - "translateY(-100vh)" → "translateY(-100vh)" (preserve negatives in functions)
-  let value = classValue;
-
-  // Pattern to match CSS values that should be preceded by a space instead of hyphen
-  // Includes: digits, auto, inherit, initial, unset, border style keywords, and CSS function names
-  const valuePattern = /\d|auto|inherit|initial|unset|solid|dashed|dotted|double|groove|ridge|inset|outset|none|hidden|minmax|repeat|clamp|calc|min|max|fit-content|var/;
-
-  // Only convert hyphens that are NOT inside parentheses (function arguments)
-  // This preserves negative values like translateY(-100vh) while still handling
-  // multi-value shorthand like "10px-20px" → "10px 20px"
-  const hasParentheses = value.includes('(');
-
-  if (hasParentheses) {
-    // Convert hyphens to spaces, handling both inside and outside parentheses
-    // Inside parentheses: convert hyphens after commas (they were space separators)
-    //   - "repeat(3,-1fr)" → "repeat(3, 1fr)" (single hyphen = space)
-    //   - "clamp(-10px,--5px,-10px)" → "clamp(-10px, -5px, 10px)" (double hyphen = space + negative)
-    let result = '';
-    let depth = 0;
-    let afterComma = false;
-    for (let i = 0; i < value.length; i++) {
-      const char = value[i];
-      if (char === '(') {
-        depth++;
-        result += char;
-        afterComma = false;
-      } else if (char === ')') {
-        depth--;
-        result += char;
-        afterComma = false;
-      } else if (char === ',') {
-        result += char;
-        afterComma = true;
-      } else if (char === '-' && afterComma && depth > 0) {
-        // Hyphen after comma inside parentheses - convert to space
-        // Check if next char is also hyphen (indicating actual negative number)
-        if (value[i + 1] === '-') {
-          // Double hyphen: ",--" means ", -" (space followed by negative)
-          result += ' ';
-          // Don't skip the next hyphen - let it be added normally
-        } else {
-          // Single hyphen: ",-" means ", " (just a space separator)
-          result += ' ';
-        }
-        afterComma = false;
-      } else if (char === '-' && depth > 0 && i > 0) {
-        // Hyphens inside parentheses (not after comma) - convert if followed by digit/value
-        // This handles cases like "#0f1442-94%" → "#0f1442 94%"
-        const rest = value.substring(i + 1);
-        if (valuePattern.test(rest[0] || '')) {
-          result += ' ';
-        } else {
-          result += char;
-        }
-        afterComma = false;
-      } else if (char === '-' && depth === 0 && i > 0) {
-        // Hyphens outside parentheses - convert if followed by value pattern
-        const rest = value.substring(i + 1);
-        if (valuePattern.test(rest[0] || '')) {
-          result += ' ';
-        } else {
-          result += char;
-        }
-        afterComma = false;
-      } else {
-        result += char;
-        afterComma = false;
-      }
-    }
-    value = result;
-  } else if (value.startsWith('-')) {
-    // For negative values, only replace hyphens that come after the first character
-    // This way "-0.015" stays as is, but "-10px-5px" becomes "-10px 5px"
-    value = value[0] + value.substring(1).replace(new RegExp(`-(?=${valuePattern.source})`, 'g'), ' ');
+  // Resolve the CSS value. The style-value registry holds the exact original
+  // for arbitrary/hash classes; variable, keyword and numeric forms decode
+  // deterministically from the class name itself.
+  let value: string;
+  let property = parsed.property;
+  if (parsed.kind === 'hash') {
+    const registered = getStyleValue(className);
+    if (registered == null) return null;
+    value = String(registered);
+    if (root) property = resolveRootProperty(root, value);
+  } else if (parsed.kind === 'arbitrary') {
+    const registered = getStyleValue(className);
+    value = registered !== undefined ? String(registered) : parsed.value!;
   } else {
-    // For positive values, replace hyphens normally
-    value = value.replace(new RegExp(`-(?=${valuePattern.source})`, 'g'), ' ');
+    value = parsed.value!;
   }
 
-  // Convert 'p' suffix to '%' for percentage values (e.g., "50p" → "50%")
-  value = value.replace(/(\d+)p(?!\w)/g, '$1%');
-
-  // Handle special multi-property prefixes
-  if (prefix === 'px') {
-    // padding-left and padding-right
+  // Multi-property roots (Tailwind axis shorthands)
+  if (root === 'px') {
     return `padding-left: ${value}; padding-right: ${value};`;
   }
-  if (prefix === 'py') {
-    // padding-top and padding-bottom
+  if (root === 'py') {
     return `padding-top: ${value}; padding-bottom: ${value};`;
   }
-  if (prefix === 'mx') {
-    // margin-left and margin-right
+  if (root === 'mx') {
     return `margin-left: ${value}; margin-right: ${value};`;
   }
-  if (prefix === 'my') {
-    // margin-top and margin-bottom
+  if (root === 'my') {
     return `margin-top: ${value}; margin-bottom: ${value};`;
   }
 
-  // Handle CSS variables for color properties
-  // For color (c), background-color (bgc), and border-color (bc), treat as CSS variables
-  // 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};`;
+  // Border-side classes (border-t-, border-r-, …): emit width/style (and color
+  // when present) as LONGHANDS, so a separate border-color class can still
+  // control the color independently (longhands sort after the side class).
+  if (root && borderSideMap[root] && property !== 'border-color') {
+    const side = borderSideMap[root];
+    const tokens = value.split(/\s+/).filter(Boolean);
+    if (tokens.length >= 2) {
+      const declarations = [`${side}-width: ${tokens[0]};`, `${side}-style: ${tokens[1]};`];
+      if (tokens[2]) {
+        declarations.push(`${side}-color: ${tokens.slice(2).join(' ')};`);
       }
-      return `${cssProp}: var(--${value});`;
+      return declarations.join(' ');
     }
+    return `${side}: ${value};`;
   }
 
-  // Standard case: prefix-value (e.g., p-10px, fs-48px, ta-center)
-  return `${cssProp}: ${value};`;
+  // Standard case: property + decoded value (e.g. `padding: 10px;`,
+  // `color: var(--primary);`, `width: 100%;`)
+  return `${property}: ${value};`;
 }
 
 /**
@@ -480,7 +258,7 @@ function applyFluidToUtilityRule(
   rule: string,
   className: string,
   responsiveScales: ResponsiveScales,
-  breakpoints: BreakpointConfig
+  breakpoints: BreakpointConfig,
 ): string {
   const propValue = resolveScalablePropertyValue(className);
   if (!propValue) return rule;
@@ -488,9 +266,7 @@ function applyFluidToUtilityRule(
   const category = AUTO_RESPONSIVE_TYPE_MAP[propValue.property];
   if (!category) return rule;
 
-  const scaleConfig = responsiveScales[category as keyof ResponsiveScales] as
-    | Record<string, number>
-    | undefined;
+  const scaleConfig = responsiveScales[category as keyof ResponsiveScales] as Record<string, number> | undefined;
   if (!scaleConfig) return rule;
 
   const smallest = getSmallestBreakpointName(breakpoints);
@@ -501,13 +277,7 @@ function applyFluidToUtilityRule(
 
   const range = responsiveScales.fluidRange ?? DEFAULT_FLUID_RANGE;
   const baseRef = responsiveScales.baseReference ?? 16;
-  const fluidValue = buildFluidPropertyValue(
-    propValue.value,
-    scale,
-    range.min,
-    range.max,
-    baseRef
-  );
+  const fluidValue = buildFluidPropertyValue(propValue.value, scale, range.min, range.max, baseRef);
   if (!fluidValue) return rule;
 
   return `${propValue.property}: ${fluidValue};`;
@@ -521,7 +291,7 @@ function applyFluidToUtilityRule(
 function applyFluidToStyle(
   style: StyleObject,
   responsiveScales: ResponsiveScales,
-  breakpoints: BreakpointConfig
+  breakpoints: BreakpointConfig,
 ): StyleObject {
   const range = responsiveScales.fluidRange ?? DEFAULT_FLUID_RANGE;
   const baseRef = responsiveScales.baseReference ?? 16;
@@ -539,23 +309,13 @@ function applyFluidToStyle(
       continue;
     }
 
-    const scale = getScaleMultiplier(
-      responsiveScales,
-      prop as CSSPropertyType,
-      smallest
-    );
+    const scale = getScaleMultiplier(responsiveScales, prop as CSSPropertyType, smallest);
     if (scale == null || scale === 1) {
       out[prop] = value;
       continue;
     }
 
-    const fluidValue = buildFluidPropertyValue(
-      String(value),
-      scale,
-      range.min,
-      range.max,
-      baseRef
-    );
+    const fluidValue = buildFluidPropertyValue(String(value), scale, range.min, range.max, baseRef);
     out[prop] = fluidValue ?? value;
   }
   return out;
@@ -580,10 +340,7 @@ const CONTAINER_RESERVED_VALUES = new Set(['auto', 'inherit', 'initial', 'unset'
  * Margins are ALWAYS overwritten with `auto` (per user spec), even if the
  * caller had set explicit values.
  */
-export function applyContainerPattern(
-  style: StyleObject,
-  fluidActive: boolean
-): StyleObject {
+export function applyContainerPattern(style: StyleObject, fluidActive: boolean): StyleObject {
   if (!fluidActive) return style;
   const w = style.width;
   const mw = style.maxWidth;
@@ -609,7 +366,7 @@ export function generateUtilityCSS(
   usedClasses: Set<string>,
   breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS,
   responsiveScales?: ResponsiveScales,
-  remConfig?: RemConversionConfig
+  remConfig?: RemConversionConfig,
 ): string {
   const css: string[] = [];
   const baseClasses = new Set<string>();
@@ -619,23 +376,17 @@ export function generateUtilityCSS(
   const breakpointValues = getBreakpointValues(breakpoints);
 
   // Create a map for responsive breakpoint classes
-  // Map from prefix (e.g., 't', 'm') to the class name and breakpoint info
+  // Map from variant prefix (e.g. 'tablet:', 'mobile:') to the class names and breakpoint info
   type BreakpointClassMap = Record<string, { classes: Set<string>; breakpointName: string; value: number }>;
   const responsiveClasses: BreakpointClassMap = {};
 
   // Initialize responsive class sets for each breakpoint
   for (const [breakpointName, breakpointValue] of Object.entries(breakpointValues)) {
-    // Generate prefix from breakpoint name, avoiding conflicts with property prefixes
-    // For 'mobile', use 'mob' to avoid conflict with 'margin' (m-), etc.
-    let prefix = breakpointName.charAt(0).toLowerCase();
-    if (breakpointName.toLowerCase() === 'mobile') {
-      prefix = 'mob'; // Use 'mob' instead of 'm' to avoid margin conflict
-    }
-
+    const prefix = breakpointClassPrefix(breakpointName);
     responsiveClasses[prefix] = {
       classes: new Set<string>(),
       breakpointName,
-      value: breakpointValue
+      value: breakpointValue,
     };
   }
 
@@ -643,15 +394,12 @@ export function generateUtilityCSS(
   for (const className of usedClasses) {
     let matched = false;
 
-    // Try to match against any responsive breakpoint prefix
+    // Try to match against any responsive breakpoint variant prefix
     for (const prefix of Object.keys(responsiveClasses)) {
-      if (className.startsWith(`${prefix}-`) && className.length > prefix.length + 1) {
-        const potentialClass = className.substring(prefix.length + 1);
+      if (className.startsWith(prefix) && className.length > prefix.length) {
+        const potentialClass = className.substring(prefix.length);
         const rule = generateRuleForClass(potentialClass);
-
-        // If it generates a valid rule and doesn't look like a margin value, treat as breakpoint class
-        // Margin values are typically: auto, 0, or pixel/percentage values (like 10px, 92px, 50p)
-        if (rule && !potentialClass.match(/^(auto|0|[\d.]+px|[\d.]+p)$/)) {
+        if (rule) {
           responsiveClasses[prefix].classes.add(potentialClass);
           matched = true;
           break;
@@ -699,8 +447,15 @@ export function generateUtilityCSS(
 
   // Generate auto-responsive rules for classes with enabled scaling.
   // In fluid mode the base rule already encodes scaling via clamp(), so skip @media.
+  // Sort shorthand-before-longhand exactly like the base rules above: within a breakpoint
+  // block, a `margin` shorthand emitted AFTER a `margin-bottom` longhand would clobber it
+  // (equal specificity ⇒ source order wins), silently dropping the longhand on that
+  // breakpoint. The base section is sorted, so the cascade would flip ONLY inside @media —
+  // and the unsorted Set's order depends on collection order (SSR render vs .astro walk),
+  // so the same project could render correctly in one path and lose the longhand in the
+  // other. Sorting makes the @media cascade deterministic and consistent with base.
   if (responsiveScales?.enabled && !fluidActive) {
-    for (const className of autoResponsiveClasses) {
+    for (const className of sortClassesByPropertyOrder(autoResponsiveClasses)) {
       const propValue = resolveScalablePropertyValue(className);
       if (!propValue) continue;
 
@@ -727,16 +482,17 @@ export function generateUtilityCSS(
         if (!autoResponsiveMediaQueries[breakpointName]) {
           autoResponsiveMediaQueries[breakpointName] = {
             classes: [],
-            value: breakpointValue
+            value: breakpointValue,
           };
         }
 
-        const finalScaledValue = (remConfig?.enabled && shouldConvertProperty(propValue.property))
-          ? convertPxToRem(scaledValue, remConfig.baseFontSize)
-          : scaledValue;
+        const finalScaledValue =
+          remConfig?.enabled && shouldConvertProperty(propValue.property)
+            ? convertPxToRem(scaledValue, remConfig.baseFontSize)
+            : scaledValue;
         autoResponsiveMediaQueries[breakpointName].classes.push({
           className: escapedClassName,
-          rule: `${propValue.property}: ${finalScaledValue};`
+          rule: `${propValue.property}: ${finalScaledValue};`,
         });
       }
     }
@@ -745,14 +501,13 @@ export function generateUtilityCSS(
   // Generate media queries in two separate sections:
   // 1. Auto-responsive classes FIRST (baseline responsive behavior)
   // 2. Manual breakpoint classes AFTER (explicit overrides)
-  // This ensures manual t-, mob- classes always override auto-responsive rules
+  // This ensures manual tablet:/mobile: classes always override auto-responsive rules
 
   // Sort auto-responsive media queries by breakpoint value (descending)
-  const sortedAutoResponsive = Object.entries(autoResponsiveMediaQueries)
-    .sort(([, a], [, b]) => b.value - a.value);
+  const sortedAutoResponsive = Object.entries(autoResponsiveMediaQueries).sort(([, a], [, b]) => b.value - a.value);
 
   // Generate auto-responsive media queries first
-  for (const [breakpointName, mq] of sortedAutoResponsive) {
+  for (const [, mq] of sortedAutoResponsive) {
     if (mq.classes.length === 0) continue;
 
     css.push(`@media (max-width: ${mq.value}px) {`);
@@ -771,12 +526,12 @@ export function generateUtilityCSS(
   for (const [prefix, breakpointInfo] of sortedManualResponsive) {
     const rules: string[] = [];
 
-    for (const className of breakpointInfo.classes) {
+    for (const className of sortClassesByPropertyOrder(breakpointInfo.classes)) {
       const rule = generateRuleForClass(className);
       if (rule) {
-        const escapedClassName = escapeCSSClassName(className);
+        const escapedClassName = escapeCSSClassName(`${prefix}${className}`);
         const finalRule = applyRemConversion(rule, remConfig);
-        rules.push(`  .${prefix}-${escapedClassName} { ${finalRule} }`);
+        rules.push(`  .${escapedClassName} { ${finalRule} }`);
       }
     }
 
@@ -802,35 +557,28 @@ export function generateSingleClassCSS(
   className: string,
   breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS,
   responsiveScales?: ResponsiveScales,
-  remConfig?: RemConversionConfig
+  remConfig?: RemConversionConfig,
 ): string {
   const breakpointValues = getBreakpointValues(breakpoints);
   const css: string[] = [];
 
-  // Build responsive prefix map: prefix → { breakpointName, value }
+  // Build responsive variant prefix map: prefix → { breakpointName, value }
   const responsivePrefixes: Record<string, { breakpointName: string; value: number }> = {};
   for (const [breakpointName, breakpointValue] of Object.entries(breakpointValues)) {
-    let prefix = breakpointName.charAt(0).toLowerCase();
-    if (breakpointName.toLowerCase() === 'mobile') {
-      prefix = 'mob';
-    }
-    responsivePrefixes[prefix] = { breakpointName, value: breakpointValue };
+    responsivePrefixes[breakpointClassPrefix(breakpointName)] = { breakpointName, value: breakpointValue };
   }
 
-  // Check if class has a responsive prefix (e.g. "t-fs-16px", "mob-p-10px")
+  // Check if class has a responsive variant prefix (e.g. "tablet:text-[16px]", "mobile:p-[10px]")
   let matched = false;
   for (const prefix of Object.keys(responsivePrefixes)) {
-    if (className.startsWith(`${prefix}-`) && className.length > prefix.length + 1) {
-      const potentialClass = className.substring(prefix.length + 1);
+    if (className.startsWith(prefix) && className.length > prefix.length) {
+      const potentialClass = className.substring(prefix.length);
       const rule = generateRuleForClass(potentialClass);
-
-      // Only treat as responsive if it generates a valid rule and isn't a margin value
-      if (rule && !potentialClass.match(/^(auto|0|[\d.]+px|[\d.]+p)$/)) {
+      if (rule) {
         const escapedClassName = escapeCSSClassName(className);
-        const escapedInnerClass = escapeCSSClassName(potentialClass);
         const bpValue = responsivePrefixes[prefix].value;
         const finalRule = applyRemConversion(rule, remConfig);
-        css.push(`@media (max-width: ${bpValue}px) {\n  .${prefix}-${escapedInnerClass} { ${finalRule} }\n}`);
+        css.push(`@media (max-width: ${bpValue}px) {\n  .${escapedClassName} { ${finalRule} }\n}`);
         matched = true;
         break;
       }
@@ -863,13 +611,14 @@ export function generateSingleClassCSS(
       if (propValue) {
         const category = AUTO_RESPONSIVE_TYPE_MAP[propValue.property];
         if (category) {
-          const scaleConfig = responsiveScales[category as keyof ResponsiveScales] as Record<string, number> | undefined;
+          const scaleConfig = responsiveScales[category as keyof ResponsiveScales] as
+            | Record<string, number>
+            | undefined;
           if (scaleConfig) {
             const baseRef = responsiveScales.baseReference || 16;
 
             // Sort breakpoints descending (largest first) for proper cascade
-            const sortedBps = Object.entries(breakpointValues)
-              .sort(([, a], [, b]) => b - a);
+            const sortedBps = Object.entries(breakpointValues).sort(([, a], [, b]) => b - a);
 
             for (const [breakpointName, breakpointValue] of sortedBps) {
               const scale = scaleConfig[breakpointName];
@@ -878,10 +627,13 @@ export function generateSingleClassCSS(
               const scaledValue = scalePropertyValue(propValue.value, baseRef, scale);
               if (!scaledValue) continue;
 
-              const finalScaledValue = (remConfig?.enabled && shouldConvertProperty(propValue.property))
-                ? convertPxToRem(scaledValue, remConfig.baseFontSize)
-                : scaledValue;
-              css.push(`@media (max-width: ${breakpointValue}px) {\n  .${escapedClassName} { ${propValue.property}: ${finalScaledValue}; }\n}`);
+              const finalScaledValue =
+                remConfig?.enabled && shouldConvertProperty(propValue.property)
+                  ? convertPxToRem(scaledValue, remConfig.baseFontSize)
+                  : scaledValue;
+              css.push(
+                `@media (max-width: ${breakpointValue}px) {\n  .${escapedClassName} { ${propValue.property}: ${finalScaledValue}; }\n}`,
+              );
             }
           }
         }
@@ -893,99 +645,33 @@ export function generateSingleClassCSS(
 }
 
 /**
- * Extract all utility classes from a rendered HTML string
- * Identifies utility classes by checking against known prefixes from propertyMap
+ * Extract all utility classes from a rendered HTML string.
+ * A class counts as a utility when (after stripping an optional `breakpoint:`
+ * variant prefix) it parses as a Meno utility class — static (`flex`,
+ * `justify-center`), arbitrary (`p-[10px]`), variable (`bg-(--primary)`),
+ * keyword (`w-full`), numeric (`z-10`), preset (`shadow-2`),
+ * arbitrary-property (`[clip-path:…]`) or hash-fallback — or when it was
+ * registered in the dynamic style registry.
  */
 export function extractUtilityClassesFromHTML(html: string): Set<string> {
   const classes = new Set<string>();
   const classRegex = /class="([^"]*)"/g;
   let match;
 
-  // Get all known utility prefixes from propertyMap
-  const knownPrefixes = new Set(Object.values(propertyMap));
-  // Also include special/short form prefixes from utilityClassRules
-  const specialPrefixes = new Set([
-    // Display short forms
-    'f', 'fd-col', 'fd-row', 'g', 'b', 'i', 'ib', 'h', 'if', 'ig',
-    // Justify content
-    'jc-c', 'jc-s', 'jc-e', 'jc-b', 'jc-a',
-    // Align items
-    'ai-c', 'ai-s', 'ai-e', 'ai-b',
-    // Overflow
-    'o-h', 'o-a', 'o-s', 'o-v',
-    // Cursor
-    'cursor-pointer', 'cursor-default',
-    // White space
-    'whs-normal', 'whs-nowrap', 'whs-pre', 'whs-pre-wrap', 'whs-pre-line',
-  ]);
-
   while ((match = classRegex.exec(html)) !== null) {
-    const classString = match[1];
-    const classList = classString.split(/\s+/);
+    const classList = match[1].split(/\s+/);
 
     for (const className of classList) {
-      // Skip empty class names
-      if (!className || className.length === 0) continue;
+      if (!className) continue;
 
-      // Check if it's a special/short form class
-      if (specialPrefixes.has(className)) {
+      const { base } = splitVariantPrefix(className);
+      if (parseUtilityClass(base)) {
         classes.add(className);
         continue;
       }
 
-      // Check for responsive prefix (like 't-', 'mob-', 's-', etc.) and process accordingly
-      let classToCheck = className;
-      let hasResponsivePrefix = false;
-
-      // Extract responsive prefix if present
-      // Check for multi-letter prefix first (e.g., 'mob-' for mobile)
-      if (className.startsWith('mob-') && className.length > 4) {
-        classToCheck = className.substring(4); // Remove 'mob-' prefix
-        hasResponsivePrefix = true;
-      }
-      // Then check for single-letter prefixes (t-, s-, l-, x-, u-)
-      else if (className.length > 2 && className.charAt(1) === '-' && className.match(/^[a-z]-/)) {
-        const firstChar = className.charAt(0);
-        // Only treat as responsive prefix if it looks like a breakpoint indicator
-        // Common breakpoint prefixes: t (tablet), s (small), x (extra), u (ultra)
-        // NOTE: We exclude 'm' because it conflicts with margin prefix - use 'mob' instead
-        // NOTE: We exclude 'l' because it conflicts with left property prefix - use 'lg' instead
-        if (['t', 's', 'x', 'u'].includes(firstChar)) {
-          classToCheck = className.substring(2); // Remove responsive prefix
-          hasResponsivePrefix = true;
-        }
-      }
-
-      // Check if it starts with a known prefix
-      // Handle both single-letter (like 'p-', 'w-') and multi-letter (like 'jc-', 'ai-')
-      for (const prefix of knownPrefixes) {
-        if (classToCheck === prefix) {
-          // Exact match (like 'f' for flex, 'g' for grid)
-          classes.add(className);
-          break;
-        } else if (classToCheck.startsWith(prefix + '-')) {
-          // Prefix with hyphen separator (like 'p-10px', 'fs-16px', or 't-p-10px')
-          classes.add(className);
-          break;
-        }
-      }
-
-      // Also check special prefixes for responsive classes
-      if (hasResponsivePrefix && !classes.has(className)) {
-        for (const specialPrefix of specialPrefixes) {
-          if (classToCheck === specialPrefix) {
-            classes.add(className);
-            break;
-          } else if (classToCheck.startsWith(specialPrefix + '-')) {
-            classes.add(className);
-            break;
-          }
-        }
-      }
-
-      // Check if it's a dynamic class (registered in the dynamic registry)
-      // This handles classes for properties not in propertyMap
-      if (!classes.has(className) && isDynamicClass(className)) {
+      // Dynamic classes (registered for properties without a known root)
+      if (isDynamicClass(className) || isDynamicClass(base)) {
         classes.add(className);
       }
     }
@@ -1002,18 +688,20 @@ export function extractUtilityClassesFromHTML(html: string): Set<string> {
  * Check if a style object is responsive (has base/breakpoint structure)
  */
 function isResponsiveStyle(style: StyleValue): style is ResponsiveStyleObject {
-  return (
-    typeof style === 'object' &&
-    style !== null &&
-    ('base' in style || 'tablet' in style || 'mobile' in style)
-  );
+  return typeof style === 'object' && style !== null && ('base' in style || 'tablet' in style || 'mobile' in style);
 }
 
 /**
  * Convert a flat style object to CSS property declarations
  * Returns string like "padding: 10px; background-color: var(--primary);"
+ *
+ * Exported for the studio's astro-play optimistic style preview: it converts a
+ * single changed declaration to the same kebab-case + `var(--name)` color form
+ * the server's utility/theme CSS uses, so the inline preview matches the value
+ * the recompiled stylesheet will land with. `_mapping` (binding) values are
+ * skipped, so a bound property yields an empty string (no optimistic preview).
  */
-function styleObjectToCSS(style: StyleObject): string {
+export function styleObjectToCSS(style: StyleObject): string {
   const declarations: string[] = [];
 
   for (const [prop, value] of Object.entries(style)) {
@@ -1065,7 +753,7 @@ export function generateInteractiveCSS(
   interactiveStyles: InteractiveStyles,
   breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS,
   remConfig?: RemConversionConfig,
-  responsiveScales?: ResponsiveScales
+  responsiveScales?: ResponsiveScales,
 ): string {
   const css: string[] = [];
 
@@ -1082,9 +770,7 @@ export function generateInteractiveCSS(
     const fullSelector = `${prefix || ''}.${elementClass}${postfix || ''}`;
 
     // Breakpoint styles (sorted by value descending)
-    const sortedBreakpoints = Object.entries(breakpointValues).sort(
-      ([, a], [, b]) => b - a
-    );
+    const sortedBreakpoints = Object.entries(breakpointValues).sort(([, a], [, b]) => b - a);
 
     if (isResponsiveStyle(style)) {
       // Generate responsive rules
@@ -1120,7 +806,7 @@ export function generateInteractiveCSS(
             responsive.base,
             responsiveScales!,
             breakpointName,
-            new Set(Object.keys(explicit ?? {}))
+            new Set(Object.keys(explicit ?? {})),
           );
           if (Object.keys(scaled).length > 0) {
             merged = { ...(merged ?? {}), ...scaled };
@@ -1130,9 +816,7 @@ export function generateInteractiveCSS(
         if (merged && Object.keys(merged).length > 0) {
           const properties = applyRemConversion(styleObjectToCSS(merged), remConfig);
           if (properties) {
-            css.push(
-              `@media (max-width: ${breakpointValue}px) { ${fullSelector} { ${properties}; } }`
-            );
+            css.push(`@media (max-width: ${breakpointValue}px) { ${fullSelector} { ${properties}; } }`);
           }
         }
       }
@@ -1153,18 +837,11 @@ export function generateInteractiveCSS(
         // Auto-scale the flat style into each enabled breakpoint — breakpoints mode only.
         if (scalingEnabled && !fluidActive) {
           for (const [breakpointName, breakpointValue] of sortedBreakpoints) {
-            const scaled = scaleStyleForBreakpoint(
-              flatStyle,
-              responsiveScales!,
-              breakpointName,
-              new Set()
-            );
+            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}; } }`
-            );
+            css.push(`@media (max-width: ${breakpointValue}px) { ${fullSelector} { ${scaledProps}; } }`);
           }
         }
       }
@@ -1184,7 +861,7 @@ function scaleStyleForBreakpoint(
   baseStyle: StyleObject,
   responsiveScales: ResponsiveScales,
   breakpointName: string,
-  skipProperties: Set<string>
+  skipProperties: Set<string>,
 ): StyleObject {
   const result: StyleObject = {};
   const baseRef = responsiveScales.baseReference ?? 16;
@@ -1197,11 +874,7 @@ function scaleStyleForBreakpoint(
     const strValue = String(value);
     if (strValue === '') continue;
 
-    const scale = getScaleMultiplier(
-      responsiveScales,
-      property as CSSPropertyType,
-      breakpointName
-    );
+    const scale = getScaleMultiplier(responsiveScales, property as CSSPropertyType, breakpointName);
     if (scale == null) continue;
 
     const scaledValue = scalePropertyValue(strValue, baseRef, scale);
@@ -1224,7 +897,7 @@ export function generateAllInteractiveCSS(
   interactiveStylesMap: Map<string, InteractiveStyles>,
   breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS,
   remConfig?: RemConversionConfig,
-  responsiveScales?: ResponsiveScales
+  responsiveScales?: ResponsiveScales,
 ): string {
   const cssBlocks: string[] = [];