meno-core 1.1.0 → 1.1.2

package/lib/server/index.ts

@@ -98,5 +98,24 @@ export { SERVE_PORT, SERVER_PORT, HMR_ROUTE, MAX_PORT_ATTEMPTS } from '../shared
 // CSS generators
 export { generateVariablesCSS } from './cssGenerator';
 
+// theme.css codec + store (design-token source of truth: src/styles/theme.css)
+export {
+  parseThemeCss,
+  serializeThemeCss,
+  groupForSectionLabel,
+  inferGroup,
+  isColorValue,
+  type ThemeModel,
+  type ScaleConfig,
+} from './themeCssCodec';
+export {
+  themeCssPath,
+  isThemeCssProject,
+  loadThemeModel,
+  saveColors,
+  saveVariables,
+  regenerateThemeCss,
+} from './themeCssStore';
+
 // Runtime abstraction
 export * from './runtime';

package/lib/server/services/ColorService.ts

@@ -3,6 +3,7 @@
  * Manages loading and caching of color variables and themes from colors.json
  */
 
+import { existsSync } from 'node:fs';
 import { loadJSONFile, parseJSON } from '../jsonLoader';
 import { projectPaths } from '../projectContext';
 import type { ColorVariables, ColorVariableEntry, ThemeConfig, ThemeEntry } from '../../shared/types';
@@ -10,6 +11,7 @@ import { resolvePaletteColor } from '../../shared/types';
 import { CachedConfigLoader } from './CachedConfigLoader';
 import { writeFile } from '../runtime';
 import { createLogger } from '../../shared/logger';
+import { isThemeCssProject, loadThemeModel, saveColors, themeCssPath } from '../themeCssStore';
 
 const log = createLogger('ColorService');
 
@@ -22,9 +24,19 @@ export class ColorService extends CachedConfigLoader<ThemeConfig> {
   }
 
   /**
-   * Perform the actual loading from file
+   * Perform the actual loading from file.
+   * Astro projects read colors from `src/styles/theme.css` (the token source of truth);
+   * legacy JSON projects read `colors.json`.
    */
   protected async performLoad(): Promise<ThemeConfig> {
+    if (isThemeCssProject()) {
+      try {
+        return (await loadThemeModel()).themes;
+      } catch (error) {
+        log.warn('Failed to load colors from theme.css:', error);
+        return this.getDefaultThemeConfig();
+      }
+    }
     try {
       const content = await loadJSONFile(projectPaths.colors());
       if (content) {
@@ -124,6 +136,23 @@ export class ColorService extends CachedConfigLoader<ThemeConfig> {
     error?: string;
     filePath: string;
   }> {
+    if (isThemeCssProject()) {
+      const filePath = themeCssPath();
+      if (!existsSync(filePath)) {
+        return { status: 'missing', config: this.getMinimalConfig(), filePath };
+      }
+      try {
+        const model = await loadThemeModel();
+        return { status: 'valid', config: model.themes, filePath };
+      } catch (error) {
+        return {
+          status: 'invalid',
+          config: this.getMinimalConfig(),
+          error: error instanceof Error ? error.message : 'Parse error',
+          filePath,
+        };
+      }
+    }
     const filePath = projectPaths.colors();
     try {
       const content = await loadJSONFile(filePath);
@@ -177,7 +206,7 @@ export class ColorService extends CachedConfigLoader<ThemeConfig> {
     const config = await this.loadThemeConfig();
     return Object.entries(config.themes).map(([name, theme]) => ({
       name,
-      label: theme.label,
+      label: theme.label ?? name,
     }));
   }
 
@@ -216,13 +245,15 @@ export class ColorService extends CachedConfigLoader<ThemeConfig> {
   }
 
   /**
-   * Save theme configuration to colors.json
+   * Save theme configuration. Astro projects write the colors half of
+   * `src/styles/theme.css` (preserving variables); legacy JSON projects write `colors.json`.
    */
   async saveThemeConfig(config: ThemeConfig): Promise<void> {
-    const colorsPath = projectPaths.colors();
-    const content = JSON.stringify(config, null, 2);
-    await writeFile(colorsPath, content);
-
+    if (isThemeCssProject()) {
+      await saveColors(config);
+    } else {
+      await writeFile(projectPaths.colors(), JSON.stringify(config, null, 2));
+    }
     // Update cache with new config
     this.setCache(config);
   }

package/lib/server/services/VariableService.ts

@@ -3,12 +3,14 @@
  * Manages loading and caching of CSS variables from variables.json
  */
 
+import { existsSync } from 'node:fs';
 import { loadJSONFile, parseJSON } from '../jsonLoader';
 import { projectPaths } from '../projectContext';
 import type { VariablesConfig } from '../../shared/types';
 import { CachedConfigLoader } from './CachedConfigLoader';
 import { writeFile } from '../runtime';
 import { createLogger } from '../../shared/logger';
+import { isThemeCssProject, loadThemeModel, saveVariables, themeCssPath } from '../themeCssStore';
 
 const log = createLogger('VariableService');
 
@@ -21,6 +23,14 @@ export class VariableService extends CachedConfigLoader<VariablesConfig> {
   }
 
   protected async performLoad(): Promise<VariablesConfig> {
+    if (isThemeCssProject()) {
+      try {
+        return { variables: (await loadThemeModel()).variables };
+      } catch (error) {
+        log.warn('Failed to load variables from theme.css:', error);
+        return this.getDefaultConfig();
+      }
+    }
     try {
       const content = await loadJSONFile(projectPaths.variables());
       if (content) {
@@ -46,7 +56,7 @@ export class VariableService extends CachedConfigLoader<VariablesConfig> {
   private migrateConfig(config: VariablesConfig): VariablesConfig {
     for (const variable of config.variables) {
       if ((variable.group as string) === 'spacing') {
-        const lower = `${variable.cssVar} ${variable.name}`.toLowerCase();
+        const lower = `${variable.cssVar} ${variable.name ?? ''}`.toLowerCase();
         if (lower.includes('margin')) {
           variable.group = 'margin';
         } else if (lower.includes('gap')) {
@@ -68,6 +78,22 @@ export class VariableService extends CachedConfigLoader<VariablesConfig> {
     error?: string;
     filePath: string;
   }> {
+    if (isThemeCssProject()) {
+      const filePath = themeCssPath();
+      if (!existsSync(filePath)) {
+        return { status: 'missing', config: this.getDefaultConfig(), filePath };
+      }
+      try {
+        return { status: 'valid', config: { variables: (await loadThemeModel()).variables }, filePath };
+      } catch (error) {
+        return {
+          status: 'invalid',
+          config: this.getDefaultConfig(),
+          error: error instanceof Error ? error.message : 'Parse error',
+          filePath,
+        };
+      }
+    }
     const filePath = projectPaths.variables();
     try {
       const content = await loadJSONFile(filePath);
@@ -95,12 +121,15 @@ export class VariableService extends CachedConfigLoader<VariablesConfig> {
   }
 
   /**
-   * Save variables configuration to variables.json
+   * Save variables configuration. Astro projects write the variables half of
+   * `src/styles/theme.css` (preserving colors); legacy JSON projects write `variables.json`.
    */
   async saveConfig(config: VariablesConfig): Promise<void> {
-    const variablesPath = projectPaths.variables();
-    const content = JSON.stringify(config, null, 2);
-    await writeFile(variablesPath, content);
+    if (isThemeCssProject()) {
+      await saveVariables(config.variables);
+    } else {
+      await writeFile(projectPaths.variables(), JSON.stringify(config, null, 2));
+    }
     this.setCache(config);
   }
 }

package/lib/server/ssr/htmlGenerator.ts

@@ -442,8 +442,6 @@ export async function generateSSRHTML(
   // Include component CSS (no longer generating inline style classes)
   const componentCSS = rendered.componentCSS || '';
 
-  // Extract and generate utility CSS from rendered HTML
-  const usedUtilityClasses = extractUtilityClassesFromHTML(rendered.html);
   const breakpointConfig = await loadBreakpointConfig();
   const responsiveScalesConfig = configService.getResponsiveScales();
 
@@ -451,11 +449,29 @@ export async function generateSSRHTML(
   const variablesConfig = await variableService.loadConfig();
   const variablesCSS = generateVariablesCSS(variablesConfig, breakpointConfig, responsiveScalesConfig);
   const remConversionConfig = configService.getRemConversion();
+
+  // Named design-token classes (`text-muted` → color: var(--muted), `bg-<token>`, …) only resolve to a
+  // CSS rule when the generator knows which token names are DEFINED — without that set, `text-muted` is
+  // indistinguishable from a typo and is dropped, both at extraction (filtered by parseUtilityClass) and
+  // at generation. Build it from the project's theme colors + variables — mirroring the Astro build's
+  // readKnownTokensSync and the canvas client's loadKnownTokens — so an instance-level color class that
+  // renders in a real Astro build also renders in the SSR design canvas.
+  const knownTokens = new Set<string>();
+  for (const theme of Object.values(themeConfig.themes)) {
+    for (const name of Object.keys(theme.colors)) knownTokens.add(name);
+  }
+  for (const variable of variablesConfig.variables) {
+    if (variable.cssVar) knownTokens.add(variable.cssVar.replace(/^--/, ''));
+  }
+
+  // Extract and generate utility CSS from rendered HTML
+  const usedUtilityClasses = extractUtilityClassesFromHTML(rendered.html, knownTokens);
   const utilityCSS = generateUtilityCSS(
     usedUtilityClasses,
     breakpointConfig,
     responsiveScalesConfig,
     remConversionConfig,
+    knownTokens,
   );
 
   // Generate interactive styles CSS from map collected during render

package/lib/server/ssr/ssrRenderer.test.ts

@@ -1115,6 +1115,31 @@ describe('ssrRenderer', () => {
       expect(html).toContain('<div');
     });
 
+    test('component instance class-STRING override lands on the root element', async () => {
+      // The class-based instance seam (`<Heading class="text-muted text-[#ff0000]" />`): the instance's
+      // `class` prop must be applied onto the component root, mirroring real Astro's
+      // cx(style(...), variants(...), className). Without it, instance-level colors render in a real
+      // build but vanish in the SSR design canvas.
+      const componentDef: ComponentDefinition = {
+        component: {
+          structure: { type: 'node', tag: 'h1', children: '{{text}}' },
+          interface: { text: { type: 'string', default: 'Hi' } },
+        },
+      };
+
+      const node = {
+        type: 'component',
+        component: 'Heading',
+        props: { text: 'Hi', class: 'text-muted text-[#ff0000]' },
+      };
+
+      const html = await render(node, { globalComponents: { Heading: componentDef } });
+      const classMatch = html.match(/<h1[^>]*\sclass="([^"]*)"/);
+      expect(classMatch).not.toBeNull();
+      expect(classMatch?.[1]).toContain('text-muted');
+      expect(classMatch?.[1]).toContain('text-[#ff0000]');
+    });
+
     test('component with defineVars: true adds data attributes', async () => {
       const componentDef: ComponentDefinition = {
         component: {

package/lib/server/ssr/ssrRenderer.ts

@@ -1850,8 +1850,18 @@ async function renderNode(
   delete nodeAttributesWithoutClass.className;
   delete nodeAttributesWithoutClass.class;
 
-  // Merge classNames: element class (first for specificity) + attribute classes + utility classes
-  const allClassNames = [elementClass, attrClassName, ...utilityClasses].filter(Boolean);
+  // A component INSTANCE carries its class-string override as a prop (`<Heading class="text-muted" />`
+  // → nodeProps.class) — the class-based equivalent of the legacy instance style object. Real Astro
+  // applies it onto the component root via cx(style(...), variants(...), className); the SSR canvas
+  // must too, or instance-level classes (named colors like `text-muted`/`text-text`, arbitrary
+  // `text-[#ff0000]`) silently vanish in design mode while rendering correctly in a real build. Last in
+  // the list so it wins source order, matching cx's instance-last precedence. Empty for HTML nodes
+  // (nodeProps is {} there), so this only affects component instances.
+  const instanceClassName = typeof nodeProps.class === 'string' ? nodeProps.class : '';
+
+  // Merge classNames: element class (first for specificity) + attribute classes + utility classes +
+  // the component instance's class-string override (last → wins)
+  const allClassNames = [elementClass, attrClassName, ...utilityClasses, instanceClassName].filter(Boolean);
   const mergedClassName = allClassNames.length > 0 ? allClassNames.join(' ') : '';
 
   const propsWithStyleAndAttrs = {

package/lib/server/themeCssCodec.test.ts

@@ -0,0 +1,154 @@
+import { describe, expect, test } from 'bun:test';
+import { parseThemeCss, serializeThemeCss, type ScaleConfig, type ThemeModel } from './themeCssCodec';
+import type { BreakpointConfig } from '../shared/breakpoints';
+import { DEFAULT_RESPONSIVE_SCALES } from '../shared/responsiveScaling';
+
+const BREAKPOINTS: BreakpointConfig = {
+  tablet: { breakpoint: 1024, previewPoint: 768 },
+  mobile: { breakpoint: 540, previewPoint: 375 },
+};
+
+const NO_SCALE: ScaleConfig = {
+  breakpoints: BREAKPOINTS,
+  responsiveScales: { ...DEFAULT_RESPONSIVE_SCALES, enabled: false },
+};
+
+const SCALE_ON: ScaleConfig = {
+  breakpoints: BREAKPOINTS,
+  responsiveScales: { ...DEFAULT_RESPONSIVE_SCALES, enabled: true, baseReference: 16 },
+};
+
+describe('parseThemeCss', () => {
+  test('reads colors (default on :root, others on [theme]) and variables by section', () => {
+    const css = `:root {
+  /* Colors: light */
+  --text: #050505;
+  --background: #ffffff;
+
+  /* Font Size */
+  --h1-size-1: 48px;
+
+  /* Padding */
+  --section-pad: 64px;
+}
+
+[theme="dark"] {
+  --text: #ffffff;
+  --background: #111111;
+}`;
+    const model = parseThemeCss(css, BREAKPOINTS);
+    expect(model.themes.default).toBe('light');
+    expect(model.themes.themes.light?.colors).toEqual({ text: '#050505', background: '#ffffff' });
+    expect(model.themes.themes.dark?.colors).toEqual({ text: '#ffffff', background: '#111111' });
+
+    const fs = model.variables.find((v) => v.cssVar === '--h1-size-1');
+    expect(fs).toMatchObject({ value: '48px', group: 'font-size', type: 'fontSize' });
+    const pad = model.variables.find((v) => v.cssVar === '--section-pad');
+    expect(pad).toMatchObject({ value: '64px', group: 'padding', type: 'padding' });
+  });
+
+  test('override @media maps to per-variable scales; auto region is discarded', () => {
+    const css = `:root {
+  /* Font Size */
+  --h1: 48px;
+}
+
+/* === Responsive scaling — auto-generated from project.config.json; regenerated on save === */
+@media (max-width: 1024px) {
+  :root {
+    --h1: 40px;
+  }
+}
+
+/* === Responsive overrides — per-variable; preserved across regen === */
+@media (max-width: 540px) {
+  :root {
+    --h1: 28px;
+  }
+}`;
+    const model = parseThemeCss(css, BREAKPOINTS);
+    const h1 = model.variables.find((v) => v.cssVar === '--h1');
+    // auto (tablet 40px) discarded; override (mobile 28px) preserved
+    expect(h1?.scales).toEqual({ mobile: '28px' });
+  });
+
+  test('preserves unmodeled CSS verbatim in raw', () => {
+    const css = `:root {
+  /* Colors: light */
+  --text: #000;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url("/fonts/inter.woff2") format("woff2");
+}`;
+    const model = parseThemeCss(css, BREAKPOINTS);
+    expect(model.raw.join('\n')).toContain('@font-face');
+    expect(model.raw.join('\n')).toContain('inter.woff2');
+  });
+});
+
+describe('serializeThemeCss', () => {
+  test('emits grouped :root with colors + variable sections', () => {
+    const model: ThemeModel = {
+      themes: { default: 'light', themes: { light: { label: 'Light', colors: { text: '#050505' } } } },
+      variables: [{ cssVar: '--h1', value: '48px', type: 'fontSize', group: 'font-size' }],
+      raw: [],
+    };
+    const css = serializeThemeCss(model, NO_SCALE);
+    expect(css).toContain('/* Colors: light */');
+    expect(css).toContain('--text: #050505;');
+    expect(css).toContain('/* Font Size */');
+    expect(css).toContain('--h1: 48px;');
+  });
+
+  test('regenerates auto @media from scale config when enabled', () => {
+    const model: ThemeModel = {
+      themes: { default: 'light', themes: { light: { colors: {} } } },
+      variables: [{ cssVar: '--h1', value: '48px', type: 'fontSize', group: 'font-size' }],
+      raw: [],
+    };
+    const css = serializeThemeCss(model, SCALE_ON);
+    expect(css).toContain('Responsive scaling');
+    expect(css).toMatch(/@media \(max-width: 1024px\)/);
+  });
+});
+
+describe('round-trip', () => {
+  const model: ThemeModel = {
+    themes: {
+      default: 'light',
+      themes: {
+        light: { label: 'Light', colors: { text: '#050505', background: '#ffffff' } },
+        dark: { label: 'Dark', colors: { text: '#ffffff', background: '#111111' } },
+      },
+    },
+    variables: [
+      { cssVar: '--h1-size-1', value: '48px', type: 'fontSize', group: 'font-size', scales: { mobile: '28px' } },
+      { cssVar: '--section-pad', value: '64px', type: 'padding', group: 'padding' },
+      { cssVar: '--brand-font', value: 'Inter, sans-serif', type: 'none', group: 'font-family' },
+    ],
+    raw: ['@font-face {\n  font-family: "Inter";\n  src: url("/x.woff2");\n}'],
+  };
+
+  test('css → model → css is stable', () => {
+    const css1 = serializeThemeCss(model, SCALE_ON);
+    const model2 = parseThemeCss(css1, BREAKPOINTS);
+    const css2 = serializeThemeCss(model2, SCALE_ON);
+    expect(css2).toBe(css1);
+  });
+
+  test('persisted model fields survive a round-trip', () => {
+    const css = serializeThemeCss(model, SCALE_ON);
+    const back = parseThemeCss(css, BREAKPOINTS);
+    expect(back.themes.default).toBe('light');
+    expect(Object.keys(back.themes.themes).sort()).toEqual(['dark', 'light']);
+    expect(back.themes.themes.dark?.colors.text).toBe('#ffffff');
+
+    const h1 = back.variables.find((v) => v.cssVar === '--h1-size-1');
+    expect(h1).toMatchObject({ value: '48px', group: 'font-size', scales: { mobile: '28px' } });
+    const font = back.variables.find((v) => v.cssVar === '--brand-font');
+    expect(font).toMatchObject({ value: 'Inter, sans-serif', group: 'font-family', type: 'none' });
+    expect(back.raw.join('\n')).toContain('@font-face');
+  });
+});