meno-core 1.1.1 → 1.1.3

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/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');
+  });
+});