meno-core 1.0.53 → 1.1.0

package/lib/client/styles/UtilityClassCollector.ts

@@ -15,44 +15,51 @@
 
 import { generateSingleClassCSS, sortClassesByPropertyOrder, generateRuleForClass } from '../../shared/cssGeneration';
 import { rewriteViewportUnits } from '../../shared/viewportUnits';
-import { getCachedBreakpointConfig, getCachedResponsiveScalesConfig, getCachedRemConversionConfig } from '../responsiveStyleResolver';
+import {
+  getCachedBreakpointConfig,
+  getCachedResponsiveScalesConfig,
+  getCachedRemConversionConfig,
+  getCachedKnownTokens,
+  loadKnownTokens,
+} from '../responsiveStyleResolver';
 import { DEFAULT_BREAKPOINTS, getBreakpointValues } from '../../shared/breakpoints';
+import { breakpointClassPrefixes } from '../../shared/utilityClassNames';
 import type { BreakpointConfig } from '../../shared/breakpoints';
 import { DEFAULT_RESPONSIVE_SCALES } from '../../shared/responsiveScaling';
 import { applyNonce } from './cspNonce';
 
 /**
- * Build a map from responsive prefix (e.g. 't', 'mob') to breakpoint value.
- * Same logic as generateSingleClassCSS / generateUtilityCSS.
+ * Build a map from responsive variant prefix (e.g. 'tablet:', 'mobile:') to
+ * breakpoint value. Same logic as generateSingleClassCSS / generateUtilityCSS.
  */
 function buildResponsivePrefixMap(breakpoints: BreakpointConfig): Record<string, number> {
   const breakpointValues = getBreakpointValues(breakpoints);
   const map: Record<string, number> = {};
   for (const [breakpointName, breakpointValue] of Object.entries(breakpointValues)) {
-    let prefix = breakpointName.charAt(0).toLowerCase();
-    if (breakpointName.toLowerCase() === 'mobile') {
-      prefix = 'mob';
+    // Both the current `max-tablet:` and legacy `tablet:` forms resolve to the same breakpoint value.
+    for (const prefix of breakpointClassPrefixes(breakpointName)) {
+      map[prefix] = breakpointValue;
     }
-    map[prefix] = breakpointValue;
   }
   return map;
 }
 
 /**
  * Get the responsive breakpoint value for a class, or 0 if it's not responsive.
- * A class is responsive if it starts with a known breakpoint prefix and the
- * remainder generates a valid CSS rule (same heuristic as generateSingleClassCSS).
+ * A class is responsive if it starts with a known breakpoint variant prefix and
+ * the remainder generates a valid CSS rule (same heuristic as generateSingleClassCSS).
  */
 function getClassBreakpointValue(
   className: string,
-  prefixMap: Record<string, number>
+  prefixMap: Record<string, number>,
+  knownTokens?: ReadonlySet<string>,
 ): number {
-  for (const prefix of Object.keys(prefixMap)) {
-    if (className.startsWith(`${prefix}-`) && className.length > prefix.length + 1) {
-      const potentialClass = className.substring(prefix.length + 1);
-      const rule = generateRuleForClass(potentialClass);
-      if (rule && !potentialClass.match(/^(auto|0|[\d.]+px|[\d.]+p)$/)) {
-        return prefixMap[prefix];
+  for (const [prefix, prefixValue] of Object.entries(prefixMap)) {
+    if (className.startsWith(prefix) && className.length > prefix.length) {
+      const potentialClass = className.substring(prefix.length);
+      const rule = generateRuleForClass(potentialClass, knownTokens);
+      if (rule) {
+        return prefixValue;
       }
     }
   }
@@ -71,14 +78,15 @@ function getClassBreakpointValue(
  */
 function sortClassesWithBreakpointOrder(
   classes: Iterable<string>,
-  breakpoints: BreakpointConfig
+  breakpoints: BreakpointConfig,
+  knownTokens?: ReadonlySet<string>,
 ): string[] {
   const prefixMap = buildResponsivePrefixMap(breakpoints);
   const arr = Array.from(classes);
 
   // Pre-compute sort keys for each class
-  const keys = arr.map(cls => {
-    const bpValue = getClassBreakpointValue(cls, prefixMap);
+  const keys = arr.map((cls) => {
+    const bpValue = getClassBreakpointValue(cls, prefixMap, knownTokens);
     return { cls, isResponsive: bpValue > 0 ? 1 : 0, bpValue };
   });
 
@@ -86,7 +94,9 @@ function sortClassesWithBreakpointOrder(
   const propertySorted = sortClassesByPropertyOrder(arr);
   const propertyOrderIndex = new Map<string, number>();
   for (let i = 0; i < propertySorted.length; i++) {
-    propertyOrderIndex.set(propertySorted[i], i);
+    const cls = propertySorted[i];
+    if (cls === undefined) continue;
+    propertyOrderIndex.set(cls, i);
   }
 
   keys.sort((a, b) => {
@@ -98,7 +108,7 @@ function sortClassesWithBreakpointOrder(
     return (propertyOrderIndex.get(a.cls) ?? Infinity) - (propertyOrderIndex.get(b.cls) ?? Infinity);
   });
 
-  return keys.map(k => k.cls);
+  return keys.map((k) => k.cls);
 }
 
 class UtilityClassCollectorImpl {
@@ -110,6 +120,9 @@ class UtilityClassCollectorImpl {
   /** Cached reference to <style id="utility-css"> */
   private styleEl: HTMLStyleElement | null = null;
 
+  /** Guards a single async warm of the known-token set (see collect()). */
+  private knownTokensPending = false;
+
   /**
    * Ensure we have a valid reference to the utility-css style element.
    * Returns null during SSR (no document).
@@ -118,7 +131,7 @@ class UtilityClassCollectorImpl {
     if (typeof document === 'undefined') return null;
 
     // Check if cached ref is still in the DOM
-    if (this.styleEl && this.styleEl.isConnected) {
+    if (this.styleEl?.isConnected) {
       return this.styleEl;
     }
 
@@ -150,6 +163,10 @@ class UtilityClassCollectorImpl {
     const breakpointConfig = getCachedBreakpointConfig() || DEFAULT_BREAKPOINTS;
     const responsiveScalesConfig = getCachedResponsiveScalesConfig() || DEFAULT_RESPONSIVE_SCALES;
     const remConversionConfig = getCachedRemConversionConfig() || undefined;
+    // The project's design tokens, needed to expand bare color-token classes (`bg-muted` →
+    // `background-color: var(--muted)`). Null until the async fetch resolves — warm it once below,
+    // then re-attempt the classes that produced no rule yet (they were skipped, not cached).
+    const knownTokens = getCachedKnownTokens() ?? undefined;
 
     let hasNew = false;
     for (const name of classNames) {
@@ -157,7 +174,13 @@ class UtilityClassCollectorImpl {
 
       if (this.injectedRules.has(name)) continue;
 
-      const css = generateSingleClassCSS(name, breakpointConfig, responsiveScalesConfig, remConversionConfig);
+      const css = generateSingleClassCSS(
+        name,
+        breakpointConfig,
+        responsiveScalesConfig,
+        remConversionConfig,
+        knownTokens,
+      );
       if (css) {
         // Rewrite vh/vw so design-canvas mode can pin viewport units to a
         // stable px value (see viewportUnits.ts). No-op when --design-vh
@@ -171,14 +194,24 @@ class UtilityClassCollectorImpl {
       // Rebuild style element with all rules sorted by property order.
       // This ensures shorthands always precede longhands regardless of
       // which collect() batch introduced each class.
-      const sorted = sortClassesWithBreakpointOrder(this.injectedRules.keys(), breakpointConfig);
+      const sorted = sortClassesWithBreakpointOrder(this.injectedRules.keys(), breakpointConfig, knownTokens);
       const styleEl = this.ensureStyleElement();
       if (styleEl) {
-        styleEl.textContent = sorted
-          .map(name => this.injectedRules.get(name)!)
-          .join('\n');
+        styleEl.textContent = sorted.map((name) => this.injectedRules.get(name)!).join('\n');
       }
     }
+
+    // First render runs before the token set has loaded, so bare color-token classes produce no
+    // rule. Warm the set once, then re-inject the still-uninjected classes so they pick up the
+    // resolved tokens (e.g. `bg-muted` gets its `background-color` after the fetch completes).
+    if (!getCachedKnownTokens() && !this.knownTokensPending) {
+      this.knownTokensPending = true;
+      void loadKnownTokens().then(() => {
+        this.knownTokensPending = false;
+        const pending = Array.from(this.classes).filter((n) => !this.injectedRules.has(n));
+        if (pending.length > 0) this.collect(pending);
+      });
+    }
   }
 
   /**
@@ -197,7 +230,8 @@ class UtilityClassCollectorImpl {
   destroy(): void {
     this.classes.clear();
     this.injectedRules.clear();
-    if (this.styleEl && this.styleEl.isConnected) {
+    this.knownTokensPending = false;
+    if (this.styleEl?.isConnected) {
       this.styleEl.remove();
     }
     this.styleEl = null;

package/lib/client/styles/cspNonce.test.ts

@@ -4,12 +4,9 @@ import { getCspNonce, applyNonce, _resetCspNonceCacheForTests } from './cspNonce
 // Minimal DOM mock — just enough for querySelector('meta[name="csp-nonce"]')
 // and for setting `el.nonce`. Bun's runtime does not ship a DOM.
 function installMockDocument(metaContent: string | null) {
-  const meta = metaContent === null
-    ? null
-    : { getAttribute: (k: string) => (k === 'content' ? metaContent : null) };
+  const meta = metaContent === null ? null : { getAttribute: (k: string) => (k === 'content' ? metaContent : null) };
   (globalThis as any).document = {
-    querySelector: (selector: string) =>
-      selector === 'meta[name="csp-nonce"]' ? meta : null,
+    querySelector: (selector: string) => (selector === 'meta[name="csp-nonce"]' ? meta : null),
   };
 }