[codex] Fix font panel globals CSS setup

apps/web/client/src/components/store/editor/font/css-theme.ts

@@ -0,0 +1,98 @@
+import { addFontToCssTheme, removeFontFromCssTheme } from '@onlook/fonts';
+import type { Font, RouterConfig } from '@onlook/models';
+import type { EditorEngine } from '@/components/store/editor/engine';
+import type { SandboxManager } from '@/components/store/editor/sandbox';
+import { normalizePath } from '@/components/store/editor/sandbox/helpers';
+
+const GLOBAL_CSS_FILE = 'globals.css';
+
+function rankGlobalCssPath(path: string, routerConfig: RouterConfig): number {
+    const normalizedPath = normalizePath(path);
+
+    if (normalizedPath === normalizePath(`${routerConfig.basePath}/${GLOBAL_CSS_FILE}`)) {
+        return 0;
+    }
+
+    if (normalizedPath === normalizePath(`src/${GLOBAL_CSS_FILE}`)) {
+        return 1;
+    }
+
+    if (normalizedPath === GLOBAL_CSS_FILE) {
+        return 2;
+    }
+
+    return 3;
+}
+
+export const getGlobalCssPath = async (sandbox: SandboxManager): Promise<string | null> => {
+    const routerConfig = await sandbox.getRouterConfig();
+    if (!routerConfig) {
+        return null;
+    }
+
+    const files = await sandbox.listAllFiles();
+    const globalCssFiles = files
+        .filter(
+            (file) =>
+                file.type === 'file' &&
+                (file.path === GLOBAL_CSS_FILE || file.path.endsWith(`/${GLOBAL_CSS_FILE}`)),
+        )
+        .sort(
+            (a, b) =>
+                rankGlobalCssPath(a.path, routerConfig) - rankGlobalCssPath(b.path, routerConfig),
+        );
+
+    return globalCssFiles[0]?.path ?? null;
+};
+
+const updateGlobalCss = async (
+    editorEngine: EditorEngine,
+    transform: (css: string) => string,
+    errorLabel: string,
+): Promise<boolean> => {
+    try {
+        const sandbox = editorEngine.activeSandbox;
+        const cssPath = await getGlobalCssPath(sandbox);
+        if (!cssPath) {
+            return false;
+        }
+
+        const file = await sandbox.readFile(cssPath);
+        if (typeof file !== 'string') {
+            return false;
+        }
+
+        const result = transform(file);
+        if (result === file) {
+            return true;
+        }
+
+        await sandbox.writeFile(cssPath, result);
+        return true;
+    } catch (error) {
+        console.error(errorLabel, error);
+        return false;
+    }
+};
+
+export const addFontToGlobalCss = async (
+    font: Font,
+    editorEngine: EditorEngine,
+): Promise<boolean> => {
+    return updateGlobalCss(
+        editorEngine,
+        (css) => addFontToCssTheme(font, css),
+        'Error adding font to global CSS:',
+    );
+};
+
+export const removeFontFromGlobalCss = async (
+    fontId: string,
+    editorEngine: EditorEngine,
+): Promise<boolean> => {
+    return updateGlobalCss(
+        editorEngine,
+        (css) => removeFontFromCssTheme(fontId, css),
+        'Error removing font from global CSS:',
+    );
+};

apps/web/client/src/components/store/editor/font/index.ts

@@ -4,6 +4,7 @@ import { type CodeDiff, type FontUploadFile } from '@onlook/models';
 import type { Font } from '@onlook/models/assets';
 import { generate } from '@onlook/parser';
 import { makeAutoObservable } from 'mobx';
+import { addFontToGlobalCss, removeFontFromGlobalCss } from '@/components/store/editor/font/css-theme';
 import type { EditorEngine } from '../engine';
 import { addFontToConfig, ensureFontConfigFileExists, getFontConfigPath, readFontConfigFile, removeFontFromConfig, scanExistingFonts, scanFontConfig } from './font-config';
 import { FontSearchManager } from './font-search-manager';
@@ -101,8 +102,20 @@ export class FontManager {
                 console.error('No font config path found');
                 return false;
             }
+            await this.ensureConfigFilesExist();
             const success = await addFontToConfig(font, fontConfigPath, this.editorEngine);
             if (success) {
+                const [tailwindUpdated, layoutUpdated, globalCssUpdated] = await Promise.all([
+                    addFontToTailwindConfig(font, this.editorEngine.activeSandbox),
+                    addFontVariableToRootLayout(font.id, this.editorEngine),
+                    addFontToGlobalCss(font, this.editorEngine),
+                ]);
+
+                if (!tailwindUpdated || !layoutUpdated || !globalCssUpdated) {
+                    console.error('Failed to apply font to one or more project config files');
+                    return false;
+                }
+
                 // Update the fonts array
                 this._fonts.push(font);
 
@@ -137,6 +150,17 @@ export class FontManager {
             const result = await removeFontFromConfig(font, fontConfigPath, this.editorEngine);
 
             if (result) {
+                const [layoutUpdated, tailwindUpdated, globalCssUpdated] = await Promise.all([
+                    removeFontVariableFromRootLayout(font.id, this.editorEngine),
+                    removeFontFromTailwindConfig(font, this.editorEngine.activeSandbox),
+                    removeFontFromGlobalCss(font.id, this.editorEngine),
+                ]);
+
+                if (!layoutUpdated || !tailwindUpdated || !globalCssUpdated) {
+                    console.error('Failed to remove font from one or more project config files');
+                    return false;
+                }
+
                 // Remove from fonts array
                 this._fonts = this._fonts.filter((f) => f.id !== font.id);
 
@@ -147,12 +171,6 @@ export class FontManager {
                     this._defaultFont = null;
                 }
 
-                // Remove font variable and font class from layout file
-                await removeFontVariableFromRootLayout(font.id, this.editorEngine);
-
-                // Remove font from Tailwind config
-                await removeFontFromTailwindConfig(font, this.editorEngine.activeSandbox);
-
                 return result;
             }
             return false;
@@ -247,6 +265,7 @@ export class FontManager {
                     fontConfigPath,
                     code,
                 );
+                await this.syncFontsWithConfigs();
             }
 
             return result.success;
@@ -348,13 +367,15 @@ export class FontManager {
                 for (const font of removedFonts) {
                     await removeFontFromTailwindConfig(font, sandbox);
                     await removeFontVariableFromRootLayout(font.id, this.editorEngine);
+                    await removeFontFromGlobalCss(font.id, this.editorEngine);
                 }
             }
 
             if (addedFonts.length > 0) {
                 for (const font of addedFonts) {
                     await addFontToTailwindConfig(font, sandbox);
                     await addFontVariableToRootLayout(font.id, this.editorEngine);
+                    await addFontToGlobalCss(font, this.editorEngine);
                 }
             }
 

apps/web/client/src/components/store/editor/font/layout-manager.ts

@@ -109,7 +109,7 @@ export const removeFontVariableFromRootLayout = async (
             await editorEngine.activeSandbox.writeFile(layoutPath, newContent);
             return true;
         }
-        return false;
+        return true;
     } catch (error) {
         console.error(`Error removing font variable`, error);
         return false;

packages/fonts/src/helpers/css-theme.ts

@@ -0,0 +1,93 @@
+import type { Font } from '@onlook/models';
+
+const THEME_BLOCK_REGEX = /@theme(?:\s+inline)?\s*\{/g;
+
+function findThemeBlock(content: string): { bodyStart: number; bodyEnd: number } | null {
+    const match = THEME_BLOCK_REGEX.exec(content);
+    THEME_BLOCK_REGEX.lastIndex = 0;
+
+    if (!match) {
+        return null;
+    }
+
+    const bodyStart = match.index + match[0].length;
+    let depth = 1;
+
+    for (let index = bodyStart; index < content.length; index++) {
+        const char = content[index];
+        if (char === '{') {
+            depth++;
+        } else if (char === '}') {
+            depth--;
+            if (depth === 0) {
+                return {
+                    bodyStart,
+                    bodyEnd: index,
+                };
+            }
+        }
+    }
+
+    return null;
+}
+
+function escapeRegExp(value: string): string {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function getThemeFontVariableName(fontId: string): string {
+    return `--font-${fontId}`;
+}
+
+function getFontThemeDeclaration(font: Font): string {
+    const themeVariable = getThemeFontVariableName(font.id);
+    const fontVariable = font.variable || themeVariable;
+
+    return `${themeVariable}: var(${fontVariable});`;
+}
+
+/**
+ * Adds or updates a Tailwind CSS `@theme` font token for an Onlook-managed font.
+ */
+export function addFontToCssTheme(font: Font, content: string): string {
+    const declaration = getFontThemeDeclaration(font);
+    const themeVariable = getThemeFontVariableName(font.id);
+
+    const block = findThemeBlock(content);
+    if (!block) {
+        const separator = content.endsWith('\n') ? '\n' : '\n\n';
+        return `${content}${separator}@theme inline {\n    ${declaration}\n}\n`;
+    }
+
+    const beforeBody = content.slice(0, block.bodyStart);
+    const body = content.slice(block.bodyStart, block.bodyEnd);
+    const afterBody = content.slice(block.bodyEnd);
+    const escapedThemeVariable = escapeRegExp(themeVariable);
+    const existingDeclarationRegex = new RegExp(`(^\\s*)${escapedThemeVariable}\\s*:[^;]+;`, 'm');
+
+    if (existingDeclarationRegex.test(body)) {
+        return `${beforeBody}${body.replace(existingDeclarationRegex, `$1${declaration}`)}${afterBody}`;
+    }
+
+    const trimmedBody = body.replace(/\s*$/, '');
+    return `${beforeBody}${trimmedBody}\n    ${declaration}\n${afterBody}`;
+}
+
+/**
+ * Removes a Tailwind CSS `@theme` font token for an Onlook-managed font.
+ */
+export function removeFontFromCssTheme(fontId: string, content: string): string {
+    const block = findThemeBlock(content);
+    if (!block) {
+        return content;
+    }
+
+    const themeVariable = getThemeFontVariableName(fontId);
+    const escapedThemeVariable = escapeRegExp(themeVariable);
+    const declarationRegex = new RegExp(`\\n?\\s*${escapedThemeVariable}\\s*:[^;]+;`, 'g');
+    const beforeBody = content.slice(0, block.bodyStart);
+    const body = content.slice(block.bodyStart, block.bodyEnd);
+    const afterBody = content.slice(block.bodyEnd);
+
+    return `${beforeBody}${body.replace(declarationRegex, '')}${afterBody}`;
+}

packages/fonts/src/helpers/index.ts

@@ -1,6 +1,7 @@
 export * from './class-utils';
 export * from './ast-generators';
 export * from './ast-manipulators';
+export * from './css-theme';
 export * from './font-extractors';
 export * from './validators';
 export * from './import-export-manager';

packages/fonts/test/css-theme.test.ts

@@ -0,0 +1,47 @@
+import { describe } from 'bun:test';
+import type { Font } from '@onlook/models';
+import { addFontToCssTheme, removeFontFromCssTheme } from '../src/helpers/css-theme';
+import { runDataDrivenTests } from './test-utils';
+import path from 'path';
+
+const __dirname = import.meta.dir;
+
+describe('addFontToCssTheme', () => {
+    runDataDrivenTests(
+        {
+            casesDir: path.resolve(__dirname, 'data/css-theme/add-font-to-css-theme'),
+            inputFileName: 'config',
+            expectedFileName: 'expected',
+        },
+        async (input: { font: Font; content: string }) => {
+            return addFontToCssTheme(input.font, input.content);
+        },
+        async (content: string, filePath?: string) => {
+            const config = JSON.parse(content);
+            const inputContent = await Bun.file(
+                path.resolve(path.dirname(filePath || ''), 'input.css'),
+            ).text();
+            return { font: config.font, content: inputContent };
+        },
+    );
+});
+
+describe('removeFontFromCssTheme', () => {
+    runDataDrivenTests(
+        {
+            casesDir: path.resolve(__dirname, 'data/css-theme/remove-font-from-css-theme'),
+            inputFileName: 'config',
+            expectedFileName: 'expected',
+        },
+        async (input: { fontId: string; content: string }) => {
+            return removeFontFromCssTheme(input.fontId, input.content);
+        },
+        async (content: string, filePath?: string) => {
+            const config = JSON.parse(content);
+            const inputContent = await Bun.file(
+                path.resolve(path.dirname(filePath || ''), 'input.css'),
+            ).text();
+            return { fontId: config.fontId, content: inputContent };
+        },
+    );
+});

packages/fonts/test/data/css-theme/add-font-to-css-theme/existing-theme/config.json

@@ -0,0 +1,11 @@
+{
+    "font": {
+        "id": "inter",
+        "family": "Inter",
+        "variable": "--font-inter",
+        "subsets": ["latin"],
+        "weight": ["400"],
+        "styles": ["normal"],
+        "type": "google"
+    }
+}

packages/fonts/test/data/css-theme/add-font-to-css-theme/existing-theme/expected.css

@@ -0,0 +1,6 @@
+@import 'tailwindcss';
+
+@theme {
+    --color-background: #ffffff;
+    --font-inter: var(--font-inter);
+}

packages/fonts/test/data/css-theme/add-font-to-css-theme/existing-theme/input.css

@@ -0,0 +1,5 @@
+@import 'tailwindcss';
+
+@theme {
+    --color-background: #ffffff;
+}

packages/fonts/test/data/css-theme/add-font-to-css-theme/no-theme/config.json

@@ -0,0 +1,11 @@
+{
+    "font": {
+        "id": "open-sans",
+        "family": "Open Sans",
+        "variable": "--font-open-sans",
+        "subsets": ["latin"],
+        "weight": ["400"],
+        "styles": ["normal"],
+        "type": "google"
+    }
+}

packages/fonts/test/data/css-theme/add-font-to-css-theme/no-theme/expected.css

@@ -0,0 +1,9 @@
+@import 'tailwindcss';
+
+body {
+    margin: 0;
+}
+
+@theme inline {
+    --font-open-sans: var(--font-open-sans);
+}

packages/fonts/test/data/css-theme/add-font-to-css-theme/no-theme/input.css

@@ -0,0 +1,5 @@
+@import 'tailwindcss';
+
+body {
+    margin: 0;
+}