meno-core 1.0.53 → 1.1.0

package/lib/server/astro/tailwindMapper.ts

@@ -4,11 +4,7 @@
  * Uses exact-match table for common values, arbitrary value fallback for the rest.
  */
 
-import type {
-  StyleObject,
-  ResponsiveStyleObject,
-  StyleMapping,
-} from '../../shared/types/styles';
+import type { StyleObject, ResponsiveStyleObject, StyleMapping } from '../../shared/types/styles';
 import type { BreakpointConfig } from '../../shared/breakpoints';
 import type { ResponsiveScales, CSSPropertyType } from '../../shared/responsiveScaling';
 import { getScaleMultiplier, scalePropertyValue } from '../../shared/responsiveScaling';
@@ -19,10 +15,7 @@ import { getScaleMultiplier, scalePropertyValue } from '../../shared/responsiveS
 
 function isStyleMapping(value: unknown): value is StyleMapping {
   return (
-    typeof value === 'object' &&
-    value !== null &&
-    '_mapping' in value &&
-    (value as StyleMapping)._mapping === true
+    typeof value === 'object' && value !== null && '_mapping' in value && (value as StyleMapping)._mapping === true
   );
 }
 
@@ -30,9 +23,7 @@ function hasTemplateExpression(value: string): boolean {
   return /\{\{.+?\}\}/.test(value);
 }
 
-function isResponsiveStyle(
-  style: StyleObject | ResponsiveStyleObject
-): style is ResponsiveStyleObject {
+function isResponsiveStyle(style: StyleObject | ResponsiveStyleObject): style is ResponsiveStyleObject {
   return 'base' in style || 'tablet' in style || 'mobile' in style;
 }
 
@@ -390,10 +381,7 @@ const arbitraryPrefixMap: Record<string, string> = {
  * Convert a single CSS property:value pair to a Tailwind class.
  * Returns null if the value should be skipped (mappings, templates).
  */
-export function propertyToTailwind(
-  property: string,
-  value: string | number
-): string | null {
+export function propertyToTailwind(property: string, value: string | number): string | null {
   const strValue = String(value);
 
   // Skip empty values — they produce broken classes like gap-[], mt-[]
@@ -436,9 +424,19 @@ export function propertyToTailwind(
 
   // Border shorthand (e.g., "1px solid", "2px solid var(--border)") needs arbitrary property syntax
   // because Tailwind's border-[...] only accepts width values, not compound shorthands
-  if (property === 'border' || property === 'borderTop' || property === 'borderRight' ||
-      property === 'borderBottom' || property === 'borderLeft') {
-    if (strValue.includes('solid') || strValue.includes('dashed') || strValue.includes('dotted') || strValue.includes('none')) {
+  if (
+    property === 'border' ||
+    property === 'borderTop' ||
+    property === 'borderRight' ||
+    property === 'borderBottom' ||
+    property === 'borderLeft'
+  ) {
+    if (
+      strValue.includes('solid') ||
+      strValue.includes('dashed') ||
+      strValue.includes('dotted') ||
+      strValue.includes('none')
+    ) {
       const cssProp = property.replace(/([A-Z])/g, '-$1').toLowerCase();
       const sanitized = strValue.replace(/\s+/g, '_');
       return `[${cssProp}:${sanitized}]`;
@@ -494,9 +492,10 @@ export function propertyToTailwind(
  * Returns { classes, dynamicStyles } where dynamicStyles are template-expression
  * styles that need inline style attributes.
  */
-export function stylesToTailwind(
-  style: StyleObject | Record<string, string | number>
-): { classes: string[]; dynamicStyles: Record<string, string> } {
+export function stylesToTailwind(style: StyleObject | Record<string, string | number>): {
+  classes: string[];
+  dynamicStyles: Record<string, string>;
+} {
   const classes: string[] = [];
   const dynamicStyles: Record<string, string> = {};
 
@@ -506,9 +505,7 @@ export function stylesToTailwind(
   // border shorthands into width + style only (dropping the color part) so
   // borderColor can take effect without conflicts.
   const hasBorderColor = 'borderColor' in style && !isStyleMapping(style.borderColor);
-  const borderShorthands = new Set([
-    'border', 'borderTop', 'borderRight', 'borderBottom', 'borderLeft',
-  ]);
+  const borderShorthands = new Set(['border', 'borderTop', 'borderRight', 'borderBottom', 'borderLeft']);
 
   for (const [prop, value] of Object.entries(style)) {
     if (isStyleMapping(value)) continue;
@@ -526,8 +523,10 @@ export function stylesToTailwind(
     if (hasBorderColor && borderShorthands.has(prop)) {
       const parts = strValue.split(/\s+/);
       // Parse width and style from shorthand (e.g. "1px solid #ccc" → "1px", "solid")
-      const width = parts.find(p => /^\d/.test(p) || p === '0');
-      const borderStyle = parts.find(p => /^(solid|dashed|dotted|double|groove|ridge|inset|outset|none|hidden)$/.test(p));
+      const width = parts.find((p) => /^\d/.test(p) || p === '0');
+      const borderStyle = parts.find((p) =>
+        /^(solid|dashed|dotted|double|groove|ridge|inset|outset|none|hidden)$/.test(p),
+      );
       const cssProp = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
       if (width) classes.push(`[${cssProp}-width:${width}]`);
       if (borderStyle) classes.push(`[${cssProp}-style:${borderStyle}]`);
@@ -554,7 +553,7 @@ export function stylesToTailwind(
 export function responsiveStylesToTailwind(
   style: StyleObject | ResponsiveStyleObject | null | undefined,
   breakpoints: BreakpointConfig,
-  responsiveScales?: ResponsiveScales
+  responsiveScales?: ResponsiveScales,
 ): { classes: string[]; dynamicStyles: Record<string, string> } {
   if (!style) return { classes: [], dynamicStyles: {} };
 
@@ -576,7 +575,7 @@ export function responsiveStylesToTailwind(
       const bpValue = breakpoints.tablet?.breakpoint ?? 1024;
       const prefix = `max-[${bpValue}px]:`;
       const { classes, dynamicStyles } = stylesToTailwind(responsive.tablet);
-      allClasses.push(...classes.map(cls => `${prefix}${cls}`));
+      allClasses.push(...classes.map((cls) => `${prefix}${cls}`));
       // Dynamic styles for tablet — just merge (can't do responsive inline styles easily)
       Object.assign(allDynamicStyles, dynamicStyles);
     }
@@ -586,7 +585,7 @@ export function responsiveStylesToTailwind(
       const bpValue = breakpoints.mobile?.breakpoint ?? 540;
       const prefix = `max-[${bpValue}px]:`;
       const { classes, dynamicStyles } = stylesToTailwind(responsive.mobile);
-      allClasses.push(...classes.map(cls => `${prefix}${cls}`));
+      allClasses.push(...classes.map((cls) => `${prefix}${cls}`));
       Object.assign(allDynamicStyles, dynamicStyles);
     }
 
@@ -597,7 +596,7 @@ export function responsiveStylesToTailwind(
       if (!bpValue) continue;
       const prefix = `max-[${bpValue}px]:`;
       const { classes, dynamicStyles } = stylesToTailwind(bpStyle);
-      allClasses.push(...classes.map(cls => `${prefix}${cls}`));
+      allClasses.push(...classes.map((cls) => `${prefix}${cls}`));
       Object.assign(allDynamicStyles, dynamicStyles);
     }
 
@@ -629,7 +628,7 @@ function appendAutoScaledClasses(
   responsive: ResponsiveStyleObject,
   breakpoints: BreakpointConfig,
   responsiveScales: ResponsiveScales,
-  out: string[]
+  out: string[],
 ): void {
   const base = responsive.base;
   if (!base) return;
@@ -638,9 +637,7 @@ function appendAutoScaledClasses(
 
   const sortedBps = Object.entries(breakpoints)
     .map(([name, cfg]) => ({ name, value: cfg?.breakpoint }))
-    .filter((bp): bp is { name: string; value: number } =>
-      typeof bp.value === 'number' && bp.value > 0
-    )
+    .filter((bp): bp is { name: string; value: number } => typeof bp.value === 'number' && bp.value > 0)
     .sort((a, b) => b.value - a.value);
 
   for (const [property, value] of Object.entries(base)) {
@@ -655,11 +652,7 @@ function appendAutoScaledClasses(
       const bpBranch = responsive[bpName] as StyleObject | undefined;
       if (bpBranch && property in bpBranch) continue;
 
-      const scale = getScaleMultiplier(
-        responsiveScales,
-        property as CSSPropertyType,
-        bpName
-      );
+      const scale = getScaleMultiplier(responsiveScales, property as CSSPropertyType, bpName);
       if (scale == null) continue;
 
       const scaledValue = scalePropertyValue(strValue, baseRef, scale);

package/lib/server/astro/templateTransformer.ts

@@ -3,11 +3,6 @@
  * Converts {{cms.field}} and {{item.field}} template expressions to Astro expressions
  */
 
-// CMS template pattern (from cmsSSRProcessor.ts)
-const CMS_TEMPLATE_PATTERN = /\{\{cms\.([^}]+)\}\}/g;
-// Item template pattern for list iteration
-const ITEM_TEMPLATE_PATTERN = /\{\{([^}]+)\}\}/g;
-
 export function isTemplateExpression(text: string): boolean {
   return /\{\{.+?\}\}/.test(text);
 }
@@ -16,15 +11,15 @@ export function transformCMSTemplate(
   text: string,
   binding: string = 'entry',
   richTextFields?: Set<string>,
-  wrapFn?: string
+  wrapFn?: string,
 ): string {
-  const w = (expr: string) => wrapFn ? `${wrapFn}(${expr})` : expr;
+  const w = (expr: string) => (wrapFn ? `${wrapFn}(${expr})` : expr);
 
   // Check if entire text is a single {{cms.field}} expression
   const fullMatch = text.match(/^\{\{cms\.([^}]+)\}\}$/);
   if (fullMatch) {
-    const fieldPath = fullMatch[1].trim();
-    const topLevelField = fieldPath.split('.')[0];
+    const fieldPath = (fullMatch[1] ?? '').trim();
+    const topLevelField = fieldPath.split('.')[0] ?? '';
 
     // Rich-text fields use Fragment set:html
     if (richTextFields?.has(topLevelField)) {
@@ -35,9 +30,11 @@ export function transformCMSTemplate(
   }
 
   // Mixed content: "Hello {{cms.name}}" → {`Hello ${entry.data.name}`}
-  if (CMS_TEMPLATE_PATTERN.test(text)) {
-    CMS_TEMPLATE_PATTERN.lastIndex = 0;
-    const replaced = text.replace(CMS_TEMPLATE_PATTERN, (_, fieldPath) => {
+  // Construct the regex locally per call: a module-level /g regex carries mutable
+  // lastIndex state across calls (the "every-other-call" .test() footgun).
+  const cmsPattern = /\{\{cms\.([^}]+)\}\}/g;
+  if (cmsPattern.test(text)) {
+    const replaced = text.replace(cmsPattern, (_, fieldPath) => {
       return `\${${w(`${binding}.data.${fieldPath.trim()}`)}}`;
     });
     return `{\`${replaced}\`}`;
@@ -60,9 +57,7 @@ export function rewriteItemVar(expr: string, itemVar: string): string {
 }
 
 export function replaceItemMetaVars(expr: string, indexVar: string, sourceVar?: string, itemVar?: string): string {
-  const lastExpr = sourceVar
-    ? `(${indexVar} === ${sourceVar}.length - 1)`
-    : `false /* itemLast not supported */`;
+  const lastExpr = sourceVar ? `(${indexVar} === ${sourceVar}.length - 1)` : `false /* itemLast not supported */`;
   let result = expr
     .replace(/\bitemIndex\b/g, indexVar)
     .replace(/\bitemFirst\b/g, `(${indexVar} === 0)`)
@@ -75,12 +70,12 @@ export function transformItemTemplate(
   text: string,
   itemVar: string = 'item',
   indexVar?: string,
-  sourceVar?: string
+  sourceVar?: string,
 ): string {
   // Check if entire text is a single {{expression}}
   const fullMatch = text.match(/^\{\{(.+)\}\}$/);
   if (fullMatch) {
-    let expr = fullMatch[1].trim();
+    let expr = (fullMatch[1] ?? '').trim();
     expr = rewriteItemVar(expr, itemVar);
     if (indexVar) expr = replaceItemMetaVars(expr, indexVar, sourceVar);
     // If it contains a dot, it's item.field
@@ -92,9 +87,11 @@ export function transformItemTemplate(
   }
 
   // Mixed content: replace each {{expr}}
-  if (ITEM_TEMPLATE_PATTERN.test(text)) {
-    ITEM_TEMPLATE_PATTERN.lastIndex = 0;
-    const replaced = text.replace(ITEM_TEMPLATE_PATTERN, (_, expr) => {
+  // Construct the regex locally per call: a module-level /g regex carries mutable
+  // lastIndex state across calls (the "every-other-call" .test() footgun).
+  const itemPattern = /\{\{([^}]+)\}\}/g;
+  if (itemPattern.test(text)) {
+    const replaced = text.replace(itemPattern, (_, expr) => {
       let trimmed = expr.trim();
       trimmed = rewriteItemVar(trimmed, itemVar);
       if (indexVar) trimmed = replaceItemMetaVars(trimmed, indexVar, sourceVar);

package/lib/server/createServer.ts

@@ -60,11 +60,7 @@ export interface ServerConfig {
 /**
  * Additional route handler type
  */
-export type AdditionalRouteHandler = (
-  req: Request,
-  url: URL,
-  context: RouteContext
-) => Promise<Response | undefined>;
+export type AdditionalRouteHandler = (req: Request, url: URL, context: RouteContext) => Promise<Response | undefined>;
 
 /**
  * Server factory result
@@ -110,7 +106,7 @@ export async function createServer(config: ServerConfig): Promise<ServerResult>
   };
 
   // Will be set after server starts to inject actual bound port into live reload script
-  let boundPort: number | undefined;
+  let _boundPort: number | undefined;
 
   // Try to start server, incrementing port if busy
   let lastError: unknown;
@@ -138,17 +134,13 @@ export async function createServer(config: ServerConfig): Promise<ServerResult>
           // WebSocket upgrade for HMR
           if (url.pathname === HMR_ROUTE) {
             const success = upgradeWebSocket(req);
-            return success
-              ? undefined
-              : new Response('WebSocket upgrade failed', { status: 500 });
+            return success ? undefined : new Response('WebSocket upgrade failed', { status: 500 });
           }
 
           // WebSocket upgrade for collab sync
           if (url.pathname === COLLAB_ROUTE && onCollabWSMessage) {
             const success = upgradeWebSocket(req);
-            return success
-              ? undefined
-              : new Response('WebSocket upgrade failed', { status: 500 });
+            return success ? undefined : new Response('WebSocket upgrade failed', { status: 500 });
           }
 
           // Handle all routes through centralized router
@@ -176,11 +168,7 @@ export async function createServer(config: ServerConfig): Promise<ServerResult>
               }
 
               // Route collab messages to collab handler
-              if (
-                onCollabWSMessage &&
-                typeof data.type === 'string' &&
-                data.type.startsWith('collab:')
-              ) {
+              if (onCollabWSMessage && typeof data.type === 'string' && data.type.startsWith('collab:')) {
                 collabClients.add(ws);
                 onCollabWSMessage(ws, data);
                 return;
@@ -190,7 +178,7 @@ export async function createServer(config: ServerConfig): Promise<ServerResult>
               if (onWSMessage) {
                 onWSMessage(ws, data);
               }
-            } catch (error) {
+            } catch (_error) {
               // Ignore non-JSON messages
             }
           },
@@ -218,7 +206,7 @@ export async function createServer(config: ServerConfig): Promise<ServerResult>
       if (err?.code === 'EADDRINUSE') {
         if (portAttempt >= MAX_PORT_ATTEMPTS - 1) {
           console.error(
-            `Failed to start server: All ports from ${requestedPort} to ${requestedPort + MAX_PORT_ATTEMPTS - 1} are busy`
+            `Failed to start server: All ports from ${requestedPort} to ${requestedPort + MAX_PORT_ATTEMPTS - 1} are busy`,
           );
           throw error;
         }

package/lib/server/cssGenerator.test.ts

@@ -9,10 +9,10 @@ describe('cssGenerator', () => {
     test('should generate CSS color variables', () => {
       const colors: ColorVariables = {
         colors: {
-          'primary': '#3b82f6',
-          'secondary': '#10b981',
-          'text': '#1f2937'
-        }
+          primary: '#3b82f6',
+          secondary: '#10b981',
+          text: '#1f2937',
+        },
       };
 
       const css = generateColorVariablesCSS(colors);
@@ -31,7 +31,7 @@ describe('cssGenerator', () => {
 
     test('should handle single color', () => {
       const colors: ColorVariables = {
-        colors: { 'primary': '#ff0000' }
+        colors: { primary: '#ff0000' },
       };
 
       const css = generateColorVariablesCSS(colors);
@@ -43,8 +43,8 @@ describe('cssGenerator', () => {
       const colors: ColorVariables = {
         colors: {
           'primary-light': '#e0f2fe',
-          'text-secondary': '#6b7280'
-        }
+          'text-secondary': '#6b7280',
+        },
       };
 
       const css = generateColorVariablesCSS(colors);
@@ -62,18 +62,18 @@ describe('cssGenerator', () => {
           light: {
             label: 'Light',
             colors: {
-              'background': '#ffffff',
-              'text': '#000000'
-            }
+              background: '#ffffff',
+              text: '#000000',
+            },
           },
           dark: {
             label: 'Dark',
             colors: {
-              'background': '#1f2937',
-              'text': '#f9fafb'
-            }
-          }
-        }
+              background: '#1f2937',
+              text: '#f9fafb',
+            },
+          },
+        },
       };
 
       const css = generateThemeColorVariablesCSS(themeConfig);
@@ -91,9 +91,9 @@ describe('cssGenerator', () => {
         themes: {
           light: {
             label: 'Light',
-            colors: { 'primary': '#3b82f6' }
-          }
-        }
+            colors: { primary: '#3b82f6' },
+          },
+        },
       };
 
       const css = generateThemeColorVariablesCSS(themeConfig);
@@ -108,9 +108,9 @@ describe('cssGenerator', () => {
         themes: {
           default: {
             label: 'Default',
-            colors: { 'color': '#000000' }
-          }
-        }
+            colors: { color: '#000000' },
+          },
+        },
       };
 
       const css = generateThemeColorVariablesCSS(themeConfig);
@@ -122,7 +122,7 @@ describe('cssGenerator', () => {
     test('should handle empty themes', () => {
       const themeConfig: ThemeConfig = {
         default: 'default',
-        themes: {}
+        themes: {},
       };
 
       const css = generateThemeColorVariablesCSS(themeConfig);
@@ -136,13 +136,13 @@ describe('cssGenerator', () => {
         themes: {
           light: {
             label: 'Light',
-            colors: {}
+            colors: {},
           },
           dark: {
             label: 'Dark',
-            colors: { 'primary': '#000' }
-          }
-        }
+            colors: { primary: '#000' },
+          },
+        },
       };
 
       const css = generateThemeColorVariablesCSS(themeConfig);
@@ -157,13 +157,13 @@ describe('cssGenerator', () => {
         themes: {
           light: {
             label: 'Light',
-            colors: { 'a': '#fff' }
+            colors: { a: '#fff' },
           },
           dark: {
             label: 'Dark',
-            colors: { 'b': '#000' }
-          }
-        }
+            colors: { b: '#000' },
+          },
+        },
       };
 
       const css = generateThemeColorVariablesCSS(themeConfig);
@@ -183,26 +183,19 @@ describe('cssGenerator', () => {
     };
 
     test('emits --site-margin clamp on :root when fluid mode is enabled (no user vars)', () => {
-      const css = generateVariablesCSS(
-        { variables: [] },
-        DEFAULT_BREAKPOINTS,
-        fluidScales
-      );
+      const css = generateVariablesCSS({ variables: [] }, DEFAULT_BREAKPOINTS, fluidScales);
       expect(css).toContain('--site-margin: clamp(16px,');
       expect(css).toContain(', 32px)');
       expect(css).not.toContain('@media');
     });
 
-
     test('emits user variables with clamp() in fluid mode (no @media)', () => {
       const css = generateVariablesCSS(
         {
-          variables: [
-            { name: 'h1-fs', cssVar: '--h1-fs', value: '32px', type: 'fontSize' },
-          ],
+          variables: [{ name: 'h1-fs', cssVar: '--h1-fs', value: '32px', type: 'fontSize' }],
         },
         DEFAULT_BREAKPOINTS,
-        fluidScales
+        fluidScales,
       );
       // mobile fontSize scale=0.75 → MIN=28
       expect(css).toContain('--h1-fs: clamp(28px,');
@@ -215,12 +208,10 @@ describe('cssGenerator', () => {
     test('breakpoints mode (default) keeps @media blocks for vars and DOES NOT emit --site-margin', () => {
       const css = generateVariablesCSS(
         {
-          variables: [
-            { name: 'h1-fs', cssVar: '--h1-fs', value: '32px', type: 'fontSize' },
-          ],
+          variables: [{ name: 'h1-fs', cssVar: '--h1-fs', value: '32px', type: 'fontSize' }],
         },
         DEFAULT_BREAKPOINTS,
-        { ...fluidScales, mode: 'breakpoints' }
+        { ...fluidScales, mode: 'breakpoints' },
       );
       expect(css).not.toContain('--site-margin');
       expect(css).toContain('@media (max-width: 1024px)');

package/lib/server/cssGenerator.ts

@@ -6,7 +6,7 @@
 
 import type { ColorVariables, ThemeConfig } from '../shared/types/colors';
 import { resolvePaletteColor } from '../shared/types/colors';
-import type { VariablesConfig, CSSVariable } from '../shared/types/variables';
+import type { VariablesConfig } from '../shared/types/variables';
 import type { BreakpointConfig } from '../shared/breakpoints';
 import type { ResponsiveScales, BreakpointScales } from '../shared/responsiveScaling';
 import {
@@ -80,11 +80,10 @@ export function generateThemeColorVariablesCSS(themeConfig: ThemeConfig): string
 export function generateVariablesCSS(
   config: VariablesConfig,
   breakpoints?: BreakpointConfig,
-  responsiveScales?: ResponsiveScales
+  responsiveScales?: ResponsiveScales,
 ): string {
   const cssBlocks: string[] = [];
-  const fluidActive =
-    responsiveScales?.enabled === true && responsiveScales?.mode === 'fluid';
+  const fluidActive = responsiveScales?.enabled === true && responsiveScales?.mode === 'fluid';
 
   // Build base :root block: user-defined variables + (in fluid mode) --site-margin.
   // In fluid mode user variables get clamp() values directly on :root rather
@@ -93,18 +92,12 @@ export function generateVariablesCSS(
   const fluidBaseRef = responsiveScales?.baseReference || 16;
   const smallestBp = fluidActive ? getSmallestBreakpointName(breakpoints) : null;
 
-  const baseVars: string[] = (config.variables ?? []).map(v => {
+  const baseVars: string[] = (config.variables ?? []).map((v) => {
     if (fluidActive && smallestBp && v.type !== 'none') {
       const categoryScales = responsiveScales?.[v.type] as BreakpointScales | undefined;
       const scale = categoryScales?.[smallestBp];
       if (scale != null && scale !== 1) {
-        const fluid = buildFluidPropertyValue(
-          v.value,
-          scale,
-          fluidRange.min,
-          fluidRange.max,
-          fluidBaseRef
-        );
+        const fluid = buildFluidPropertyValue(v.value, scale, fluidRange.min, fluidRange.max, fluidBaseRef);
         if (fluid) return `  ${v.cssVar}: ${fluid};`;
       }
     }
@@ -129,15 +122,14 @@ export function generateVariablesCSS(
     const baseRef = responsiveScales.baseReference || 16;
 
     // Sort breakpoints by value descending (largest first)
-    const sortedBreakpoints = Object.entries(breakpoints)
-      .sort((a, b) => b[1].breakpoint - a[1].breakpoint);
+    const sortedBreakpoints = Object.entries(breakpoints).sort((a, b) => b[1].breakpoint - a[1].breakpoint);
 
     for (const [bpName, bpEntry] of sortedBreakpoints) {
       const scaledVars: string[] = [];
 
       for (const variable of userVariables) {
         // Per-variable override takes priority — stored string is the CSS value
-        if (variable.scales && variable.scales[bpName]) {
+        if (variable.scales?.[bpName]) {
           const overrideValue = variable.scales[bpName];
           if (overrideValue !== variable.value) {
             scaledVars.push(`    ${variable.cssVar}: ${overrideValue};`);
@@ -158,13 +150,10 @@ export function generateVariablesCSS(
       }
 
       if (scaledVars.length > 0) {
-        cssBlocks.push(
-          `@media (max-width: ${bpEntry.breakpoint}px) {\n  :root {\n${scaledVars.join('\n')}\n  }\n}`
-        );
+        cssBlocks.push(`@media (max-width: ${bpEntry.breakpoint}px) {\n  :root {\n${scaledVars.join('\n')}\n  }\n}`);
       }
     }
   }
 
   return cssBlocks.join('\n');
 }
-