meno-core 1.1.1 → 1.1.2

package/dist/lib/shared/index.js

@@ -51,7 +51,7 @@ import {
   setLogSink,
   slugify,
   translatePath
-} from "../../chunks/chunk-QWTQZHG3.js";
+} from "../../chunks/chunk-FQBIC2OB.js";
 import {
   NETLIFY_LOCALE_404_BEGIN,
   NETLIFY_LOCALE_404_END,

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