Compare commits

..

2 Commits

Author SHA1 Message Date
Claude
689b6f761f [AI] Dynamically build stats args, skip missing files in workflow
Only pass stats files that actually exist to bundle-stats-comment.mjs,
and gate the comment posting step on whether any stats were generated.
This prevents the script from receiving paths to missing files and
avoids posting empty comments.

https://claude.ai/code/session_015TDkitgqM2TsgFSCuGaFuF
2026-03-19 20:10:44 +00:00
Claude
7318015a1f [AI] Fix flaky Compare Sizes CI job
The job intermittently failed with "==> (not found) Artifact: build-stats"
due to a race condition: action-wait-for-check waited by commit SHA while
action-download-artifact searched by PR number, picking a newer still-running
workflow run whose artifacts hadn't been uploaded yet.

Fixes:
- Use commit SHA instead of PR number for PR artifact downloads to match
  the exact workflow run that was waited on
- Add if_no_artifact_found: warn to all download steps (defense in depth)
- Upgrade CLI download steps from v11 to v18 to support this parameter
- Add timeoutSeconds/intervalSeconds to all wait-for-check steps
- Expand failure detection to cover base branch builds and add warning
  step for incomplete builds
- Make bundle-stats-comment.mjs gracefully skip missing stats files
  instead of throwing
- Add if: !cancelled() to generate/post steps so they run after warnings

https://claude.ai/code/session_015TDkitgqM2TsgFSCuGaFuF
2026-03-19 20:09:53 +00:00
9 changed files with 154 additions and 887 deletions

View File

@@ -50,6 +50,8 @@ jobs:
token: ${{ secrets.GITHUB_TOKEN }}
checkName: web
ref: ${{github.base_ref}}
timeoutSeconds: 1200
intervalSeconds: 30
- name: Wait for ${{github.base_ref}} API build to succeed
uses: fountainhead/action-wait-for-check@5a908a24814494009c4bb27c242ea38c93c593be # v1.2.0
id: master-api-build
@@ -57,6 +59,8 @@ jobs:
token: ${{ secrets.GITHUB_TOKEN }}
checkName: api
ref: ${{github.base_ref}}
timeoutSeconds: 1200
intervalSeconds: 30
- name: Wait for ${{github.base_ref}} CLI build to succeed
uses: fountainhead/action-wait-for-check@5a908a24814494009c4bb27c242ea38c93c593be # v1.2.0
id: master-cli-build
@@ -64,6 +68,8 @@ jobs:
token: ${{ secrets.GITHUB_TOKEN }}
checkName: cli
ref: ${{github.base_ref}}
timeoutSeconds: 1200
intervalSeconds: 30
- name: Wait for PR build to succeed
uses: fountainhead/action-wait-for-check@5a908a24814494009c4bb27c242ea38c93c593be # v1.2.0
@@ -72,6 +78,8 @@ jobs:
token: ${{ secrets.GITHUB_TOKEN }}
checkName: web
ref: ${{github.event.pull_request.head.sha}}
timeoutSeconds: 1200
intervalSeconds: 30
- name: Wait for API PR build to succeed
uses: fountainhead/action-wait-for-check@5a908a24814494009c4bb27c242ea38c93c593be # v1.2.0
id: wait-for-api-build
@@ -79,6 +87,8 @@ jobs:
token: ${{ secrets.GITHUB_TOKEN }}
checkName: api
ref: ${{github.event.pull_request.head.sha}}
timeoutSeconds: 1200
intervalSeconds: 30
- name: Wait for CLI PR build to succeed
uses: fountainhead/action-wait-for-check@5a908a24814494009c4bb27c242ea38c93c593be # v1.2.0
id: wait-for-cli-build
@@ -86,12 +96,32 @@ jobs:
token: ${{ secrets.GITHUB_TOKEN }}
checkName: cli
ref: ${{github.event.pull_request.head.sha}}
timeoutSeconds: 1200
intervalSeconds: 30
- name: Report build failure
if: steps.wait-for-web-build.outputs.conclusion == 'failure' || steps.wait-for-api-build.outputs.conclusion == 'failure' || steps.wait-for-cli-build.outputs.conclusion == 'failure'
if: |
steps.wait-for-web-build.outputs.conclusion == 'failure' ||
steps.wait-for-api-build.outputs.conclusion == 'failure' ||
steps.wait-for-cli-build.outputs.conclusion == 'failure' ||
steps.master-web-build.outputs.conclusion == 'failure' ||
steps.master-api-build.outputs.conclusion == 'failure' ||
steps.master-cli-build.outputs.conclusion == 'failure'
run: |
echo "Build failed on PR branch or ${{github.base_ref}}"
exit 1
- name: Warn on incomplete builds
if: |
steps.wait-for-web-build.outputs.conclusion != 'success' ||
steps.wait-for-api-build.outputs.conclusion != 'success' ||
steps.wait-for-cli-build.outputs.conclusion != 'success' ||
steps.master-web-build.outputs.conclusion != 'success' ||
steps.master-api-build.outputs.conclusion != 'success' ||
steps.master-cli-build.outputs.conclusion != 'success'
run: |
echo "::warning::Some builds did not complete successfully. Bundle stats may be incomplete."
echo "Base branch - web: ${{ steps.master-web-build.outputs.conclusion }}, api: ${{ steps.master-api-build.outputs.conclusion }}, cli: ${{ steps.master-cli-build.outputs.conclusion }}"
echo "PR - web: ${{ steps.wait-for-web-build.outputs.conclusion }}, api: ${{ steps.wait-for-api-build.outputs.conclusion }}, cli: ${{ steps.wait-for-cli-build.outputs.conclusion }}"
- name: Download web build artifact from ${{github.base_ref}}
uses: dawidd6/action-download-artifact@1f8785ff7a5130826f848e7f72725c85d241860f # v18
@@ -102,6 +132,7 @@ jobs:
workflow_conclusion: '' # ignore the conclusion of the workflow, since we already checked it
name: build-stats
path: base
if_no_artifact_found: warn
- name: Download API build artifact from ${{github.base_ref}}
uses: dawidd6/action-download-artifact@1f8785ff7a5130826f848e7f72725c85d241860f # v18
id: pr-api-build
@@ -111,41 +142,46 @@ jobs:
workflow_conclusion: '' # ignore the conclusion of the workflow, since we already checked it
name: api-build-stats
path: base
if_no_artifact_found: warn
- name: Download build stats from PR
uses: dawidd6/action-download-artifact@1f8785ff7a5130826f848e7f72725c85d241860f # v18
with:
pr: ${{github.event.pull_request.number}}
commit: ${{github.event.pull_request.head.sha}}
workflow: build.yml
workflow_conclusion: '' # ignore the conclusion of the workflow, since we already checked it
name: build-stats
path: head
allow_forks: true
if_no_artifact_found: warn
- name: Download API stats from PR
uses: dawidd6/action-download-artifact@1f8785ff7a5130826f848e7f72725c85d241860f # v18
with:
pr: ${{github.event.pull_request.number}}
commit: ${{github.event.pull_request.head.sha}}
workflow: build.yml
workflow_conclusion: '' # ignore the conclusion of the workflow, since we already checked it
name: api-build-stats
path: head
allow_forks: true
if_no_artifact_found: warn
- name: Download CLI build artifact from ${{github.base_ref}}
uses: dawidd6/action-download-artifact@ac66b43f0e6a346234dd65d4d0c8fbb31cb316e5 # v11
uses: dawidd6/action-download-artifact@1f8785ff7a5130826f848e7f72725c85d241860f # v18
with:
branch: ${{github.base_ref}}
workflow: build.yml
workflow_conclusion: '' # ignore the conclusion of the workflow, since we already checked it
name: cli-build-stats
path: base
if_no_artifact_found: warn
- name: Download CLI stats from PR
uses: dawidd6/action-download-artifact@ac66b43f0e6a346234dd65d4d0c8fbb31cb316e5 # v11
uses: dawidd6/action-download-artifact@1f8785ff7a5130826f848e7f72725c85d241860f # v18
with:
pr: ${{github.event.pull_request.number}}
commit: ${{github.event.pull_request.head.sha}}
workflow: build.yml
workflow_conclusion: '' # ignore the conclusion of the workflow, since we already checked it
name: cli-build-stats
path: head
allow_forks: true
if_no_artifact_found: warn
- name: Strip content hashes from stats files
run: |
if [ -f ./head/web-stats.json ]; then
@@ -162,19 +198,31 @@ jobs:
fi
done
- name: Generate combined bundle stats comment
if: ${{ !cancelled() }}
id: generate-comment
run: |
ARGS=""
for bundle in "desktop-client=web-stats.json" "loot-core=loot-core-stats.json" "api=api-stats.json" "cli=cli-stats.json"; do
NAME="${bundle%%=*}"
FILE="${bundle#*=}"
if [ -f "./base/$FILE" ] && [ -f "./head/$FILE" ]; then
ARGS="$ARGS --base $NAME=./base/$FILE --head $NAME=./head/$FILE"
else
echo "::warning::Skipping $NAME: base or head stats file missing"
fi
done
if [ -z "$ARGS" ]; then
echo "::warning::No stats files available, skipping comment generation"
echo "has_comment=false" >> "$GITHUB_OUTPUT"
exit 0
fi
node packages/ci-actions/bin/bundle-stats-comment.mjs \
--base desktop-client=./base/web-stats.json \
--base loot-core=./base/loot-core-stats.json \
--base api=./base/api-stats.json \
--base cli=./base/cli-stats.json \
--head desktop-client=./head/web-stats.json \
--head loot-core=./head/loot-core-stats.json \
--head api=./head/api-stats.json \
--head cli=./head/cli-stats.json \
$ARGS \
--identifier combined \
--format pr-body > bundle-stats-comment.md
echo "has_comment=true" >> "$GITHUB_OUTPUT"
- name: Post combined bundle stats comment
if: ${{ !cancelled() && steps.generate-comment.outputs.has_comment == 'true' }}
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
GITHUB_REPOSITORY: ${{ github.repository }}

View File

@@ -5,7 +5,7 @@
* Heavily inspired by https://github.com/twk3/rollup-size-compare-action (MIT).
*/
import { readFile } from 'node:fs/promises';
import { access, readFile } from 'node:fs/promises';
import path from 'node:path';
import process from 'node:process';
@@ -179,8 +179,19 @@ function parseArgs(argv) {
}
async function loadStats(filePath) {
const absolutePath = path.resolve(process.cwd(), filePath);
// Check if the file exists before trying to read it
try {
await access(absolutePath);
} catch {
console.error(
`[bundle-stats] Stats file not found: "${filePath}" — skipping`,
);
return null;
}
try {
const absolutePath = path.resolve(process.cwd(), filePath);
const fileContents = await readFile(absolutePath, 'utf8');
const parsed = JSON.parse(fileContents);
@@ -196,7 +207,7 @@ async function loadStats(filePath) {
? error.message
: 'Unknown error while parsing stats file';
console.error(`[bundle-stats] Failed to parse "${filePath}": ${message}`);
throw new Error(`Failed to load stats file "${filePath}": ${message}`);
return null;
}
}
@@ -687,6 +698,13 @@ async function main() {
);
const headStats = await loadStats(section.headPath);
if (!baseStats || !headStats) {
console.error(
`[bundle-stats] Skipping section "${section.name}": missing ${!baseStats ? 'base' : 'head'} stats`,
);
continue;
}
const statsDiff = getStatsDiff(baseStats, headStats);
const chunkDiff = getChunkModuleDiff(baseStats, headStats);

View File

@@ -31,8 +31,7 @@
body,
button,
input {
font-family: var(
--font-family,
font-family:
'Inter Variable',
-apple-system,
BlinkMacSystemFont,
@@ -46,8 +45,7 @@
'Helvetica Neue',
'Helvetica',
'Arial',
sans-serif
);
sans-serif;
}
a {
@@ -69,8 +67,7 @@
input,
textarea {
font-size: 1em;
font-family: var(
--font-family,
font-family:
'Inter Variable',
-apple-system,
BlinkMacSystemFont,
@@ -84,8 +81,7 @@
'Helvetica Neue',
'Helvetica',
'Arial',
sans-serif
);
sans-serif;
font-feature-settings: 'ss01', 'ss04';
}

View File

@@ -1,10 +1,10 @@
/*
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
Content-Security-Policy: default-src 'self' blob:; img-src 'self' blob: data:; script-src 'self' 'unsafe-eval' blob:; style-src 'self' 'unsafe-inline'; font-src 'self' data:; connect-src http: https:;
Content-Security-Policy: default-src 'self' blob:; img-src 'self' blob: data:; script-src 'self' 'unsafe-eval' blob:; style-src 'self' 'unsafe-inline'; connect-src http: https:;
/kcab/*
Content-Security-Policy: default-src 'self' blob:; img-src 'self' blob: data:; script-src 'self' 'unsafe-eval' blob:; style-src 'self' 'unsafe-inline'; font-src 'self' data:; connect-src http: https:;
Content-Security-Policy: default-src 'self' blob:; img-src 'self' blob: data:; script-src 'self' 'unsafe-eval' blob:; style-src 'self' 'unsafe-inline'; connect-src http: https:;
/*.wasm
Content-Type: application/wasm

View File

@@ -17,7 +17,6 @@ import { Link } from '@desktop-client/components/common/Link';
import { FixedSizeList } from '@desktop-client/components/FixedSizeList';
import { useThemeCatalog } from '@desktop-client/hooks/useThemeCatalog';
import {
embedThemeFonts,
extractRepoOwner,
fetchThemeCss,
generateThemeId,
@@ -167,12 +166,8 @@ export function ThemeInstaller({
setSelectedCatalogTheme(theme);
const normalizedRepo = normalizeGitHubRepo(theme.repo);
// Fetch CSS and embed any referenced font files as data: URIs
const cssWithFonts = fetchThemeCss(theme.repo).then(css =>
embedThemeFonts(css, theme.repo),
);
await installTheme({
css: cssWithFonts,
css: fetchThemeCss(theme.repo),
name: theme.name,
repo: normalizedRepo,
id: generateThemeId(normalizedRepo),

View File

@@ -1,23 +1,9 @@
// oxlint-disable eslint/no-script-url
import { afterEach, describe, expect, it, vi } from 'vitest';
import { describe, expect, it } from 'vitest';
import {
embedThemeFonts,
MAX_FONT_FILE_SIZE,
parseInstalledTheme,
validateThemeCss,
} from './customThemes';
import { parseInstalledTheme, validateThemeCss } from './customThemes';
import type { InstalledTheme } from './customThemes';
// Small valid woff2 data URI for testing (actual content doesn't matter for validation)
const TINY_WOFF2_BASE64 = 'AAAAAAAAAA==';
const TINY_WOFF2_DATA_URI = `data:font/woff2;base64,${TINY_WOFF2_BASE64}`;
const FONT_FACE_BLOCK = `@font-face {
font-family: 'Test Font';
src: url('${TINY_WOFF2_DATA_URI}') format('woff2');
font-display: swap;
}`;
describe('validateThemeCss', () => {
describe('valid CSS', () => {
it('should accept valid :root with CSS variables', () => {
@@ -88,7 +74,7 @@ describe('validateThemeCss', () => {
},
])('should reject $description', ({ css }) => {
expect(() => validateThemeCss(css)).toThrow(
'Theme CSS must contain :root { ... } with CSS variable definitions. No other selectors or content allowed.',
'Theme CSS must contain exactly :root { ... } with CSS variable definitions. No other selectors or content allowed.',
);
});
});
@@ -104,7 +90,7 @@ describe('validateThemeCss', () => {
color: red;
}`,
expectedError:
'Theme CSS must contain :root { ... } with CSS variable definitions. No other selectors or content allowed.',
'Theme CSS must contain exactly :root { ... } with CSS variable definitions. No other selectors or content allowed.',
},
{
description: 'multiple selectors',
@@ -115,7 +101,7 @@ describe('validateThemeCss', () => {
--color-primary: #ffffff;
}`,
expectedError:
'Theme CSS must contain :root { ... } with CSS variable definitions. No other selectors or content allowed.',
'Theme CSS must contain exactly :root { ... } with CSS variable definitions. No other selectors or content allowed.',
},
{
description: 'media queries',
@@ -128,7 +114,7 @@ describe('validateThemeCss', () => {
}
}`,
expectedError:
'Theme CSS must contain :root { ... } with CSS variable definitions. No other selectors or content allowed.',
'Theme CSS must contain exactly :root { ... } with CSS variable definitions. No other selectors or content allowed.',
},
{
description: 'custom selector before :root',
@@ -139,7 +125,7 @@ describe('validateThemeCss', () => {
--color-primary: #007bff;
}`,
expectedError:
'Theme CSS must contain :root { ... } with CSS variable definitions. No other selectors or content allowed.',
'Theme CSS must contain exactly :root { ... } with CSS variable definitions. No other selectors or content allowed.',
},
])('should reject CSS with $description', ({ css, expectedError }) => {
expect(() => validateThemeCss(css)).toThrow(expectedError);
@@ -285,7 +271,7 @@ describe('validateThemeCss', () => {
},
])('should reject $description', ({ css }) => {
expect(() => validateThemeCss(css)).toThrow(
'Theme CSS must contain :root { ... } with CSS variable definitions. No other selectors or content allowed.',
'Theme CSS must contain exactly :root { ... } with CSS variable definitions. No other selectors or content allowed.',
);
});
});
@@ -793,6 +779,12 @@ describe('validateThemeCss', () => {
--spacing: 10px 20px;
}`,
},
{
description: 'value with comma-separated values',
css: `:root {
--font-family: Arial, sans-serif;
}`,
},
{
description: 'property name with invalid characters',
css: `:root {
@@ -876,337 +868,6 @@ describe('validateThemeCss', () => {
});
});
describe('validateThemeCss - font properties (--font-*)', () => {
describe('valid font-family values', () => {
it.each([
{
description: 'single generic family',
css: `:root { --font-family: sans-serif; }`,
},
{
description: 'single generic family (serif)',
css: `:root { --font-family: serif; }`,
},
{
description: 'single generic family (monospace)',
css: `:root { --font-family: monospace; }`,
},
{
description: 'system-ui keyword',
css: `:root { --font-family: system-ui; }`,
},
{
description: 'bundled font (Inter Variable)',
css: `:root { --font-family: Inter Variable; }`,
},
{
description: 'quoted bundled font',
css: `:root { --font-family: 'Inter Variable'; }`,
},
{
description: 'double-quoted bundled font',
css: `:root { --font-family: "Inter Variable"; }`,
},
{
description: 'web-safe font (Georgia)',
css: `:root { --font-family: Georgia; }`,
},
{
description: 'web-safe font (Times New Roman) quoted',
css: `:root { --font-family: 'Times New Roman'; }`,
},
{
description: 'comma-separated font stack',
css: `:root { --font-family: Georgia, serif; }`,
},
{
description: 'full font stack with multiple fonts',
css: `:root { --font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }`,
},
{
description: 'monospace font stack',
css: `:root { --font-mono: 'Fira Code', Consolas, Monaco, monospace; }`,
},
{
description: 'case-insensitive matching (arial)',
css: `:root { --font-family: arial; }`,
},
{
description: 'case-insensitive matching (GEORGIA)',
css: `:root { --font-family: GEORGIA; }`,
},
{
description: 'macOS system font',
css: `:root { --font-family: 'SF Pro', -apple-system, sans-serif; }`,
},
{
description: 'mixed with color variables',
css: `:root {
--color-primary: #007bff;
--font-family: Georgia, serif;
--color-secondary: #6c757d;
}`,
},
{
description: '--font-mono property',
css: `:root { --font-mono: 'JetBrains Mono', 'Fira Code', monospace; }`,
},
{
description: '--font-heading property',
css: `:root { --font-heading: Palatino, 'Book Antiqua', serif; }`,
},
])('should accept CSS with $description', ({ css }) => {
expect(() => validateThemeCss(css)).not.toThrow();
});
});
describe('invalid font-family values - security', () => {
it.each([
{
description: 'empty value',
css: `:root { --font-family: ; }`,
expectedPattern: /value must not be empty/,
},
{
description: 'url() function in font value',
css: `:root { --font-family: url('https://evil.com/font.woff2'); }`,
expectedPattern: /function calls are not allowed/,
},
{
description: 'url() with data: URI',
css: `:root { --font-family: url(data:font/woff2;base64,abc123); }`,
expectedPattern: /function calls are not allowed/,
},
{
description: 'expression() in font value',
css: `:root { --font-family: expression(alert(1)); }`,
expectedPattern: /function calls are not allowed/,
},
{
description: 'empty font name between commas',
css: `:root { --font-family: Arial, , sans-serif; }`,
expectedPattern: /empty font name/,
},
{
description: 'Google Fonts URL attempt',
css: `:root { --font-family: url(https://fonts.googleapis.com/css2?family=Roboto); }`,
expectedPattern: /function calls are not allowed/,
},
{
description: 'local() function',
css: `:root { --font-family: local(Arial); }`,
expectedPattern: /function calls are not allowed/,
},
{
description: 'format() function',
css: `:root { --font-family: format('woff2'); }`,
expectedPattern: /function calls are not allowed/,
},
{
description: 'rgb() function in font property',
css: `:root { --font-family: rgb(0, 0, 0); }`,
expectedPattern: /function calls are not allowed/,
},
])('should reject CSS with $description', ({ css, expectedPattern }) => {
expect(() => validateThemeCss(css)).toThrow(expectedPattern);
});
});
describe('any font name is valid (no allowlist)', () => {
it.each([
{
description: 'Comic Sans MS',
css: `:root { --font-family: 'Comic Sans MS'; }`,
},
{
description: 'custom font name',
css: `:root { --font-family: 'My Custom Font', sans-serif; }`,
},
{
description: 'arbitrary string',
css: `:root { --font-family: something-random; }`,
},
{ description: 'Papyrus', css: `:root { --font-family: Papyrus; }` },
])('should accept $description as a font name', ({ css }) => {
expect(() => validateThemeCss(css)).not.toThrow();
});
});
});
describe('validateThemeCss - @font-face blocks', () => {
describe('valid @font-face with data: URIs', () => {
it('should accept @font-face with data: URI and :root', () => {
const css = `${FONT_FACE_BLOCK}
:root { --font-family: 'Test Font', sans-serif; }`;
expect(() => validateThemeCss(css)).not.toThrow();
});
it('should accept multiple @font-face blocks', () => {
const css = `@font-face {
font-family: 'Test Font';
src: url('${TINY_WOFF2_DATA_URI}') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Test Font';
src: url('${TINY_WOFF2_DATA_URI}') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
:root { --font-family: 'Test Font', sans-serif; }`;
expect(() => validateThemeCss(css)).not.toThrow();
});
it('should accept @font-face with font/woff MIME type', () => {
const css = `@font-face {
font-family: 'Woff Font';
src: url('data:font/woff;base64,${TINY_WOFF2_BASE64}') format('woff');
}
:root { --font-family: 'Woff Font', sans-serif; }`;
expect(() => validateThemeCss(css)).not.toThrow();
});
it('should accept @font-face with font/ttf MIME type', () => {
const css = `@font-face {
font-family: 'TTF Font';
src: url('data:font/ttf;base64,${TINY_WOFF2_BASE64}') format('truetype');
}
:root { --font-family: 'TTF Font', sans-serif; }`;
expect(() => validateThemeCss(css)).not.toThrow();
});
it('should accept @font-face with application/font-woff2 MIME type', () => {
const css = `@font-face {
font-family: 'App Font';
src: url('data:application/font-woff2;base64,${TINY_WOFF2_BASE64}') format('woff2');
}
:root { --font-family: 'App Font', sans-serif; }`;
expect(() => validateThemeCss(css)).not.toThrow();
});
it('should accept @font-face with font-stretch', () => {
const css = `@font-face {
font-family: 'Stretch Font';
src: url('${TINY_WOFF2_DATA_URI}') format('woff2');
font-stretch: condensed;
}
:root { --font-family: 'Stretch Font', sans-serif; }`;
expect(() => validateThemeCss(css)).not.toThrow();
});
it('should accept @font-face with unicode-range', () => {
const css = `@font-face {
font-family: 'Unicode Font';
src: url('${TINY_WOFF2_DATA_URI}') format('woff2');
unicode-range: U+0000-00FF;
}
:root { --font-family: 'Unicode Font', sans-serif; }`;
expect(() => validateThemeCss(css)).not.toThrow();
});
it('should allow custom font name in --font-family after @font-face declaration', () => {
const css = `@font-face {
font-family: 'My Custom Font';
src: url('${TINY_WOFF2_DATA_URI}') format('woff2');
}
:root { --font-family: 'My Custom Font', Georgia, serif; }`;
expect(() => validateThemeCss(css)).not.toThrow();
});
it('should accept @font-face alongside color variables', () => {
const css = `${FONT_FACE_BLOCK}
:root {
--color-primary: #007bff;
--font-family: 'Test Font', sans-serif;
--color-secondary: #6c757d;
}`;
expect(() => validateThemeCss(css)).not.toThrow();
});
});
describe('invalid @font-face - security', () => {
it('should reject @font-face with remote HTTP URL', () => {
const css = `@font-face {
font-family: 'Bad Font';
src: url('https://evil.com/font.woff2') format('woff2');
}
:root { --font-family: 'Bad Font', sans-serif; }`;
expect(() => validateThemeCss(css)).toThrow(/data: URIs/);
});
it('should reject @font-face with remote HTTPS URL', () => {
const css = `@font-face {
font-family: 'Bad Font';
src: url('https://fonts.example.com/custom.woff2') format('woff2');
}
:root { --font-family: 'Bad Font', sans-serif; }`;
expect(() => validateThemeCss(css)).toThrow(/data: URIs/);
});
it('should reject @font-face with relative URL (not embedded)', () => {
const css = `@font-face {
font-family: 'Bad Font';
src: url('./fonts/custom.woff2') format('woff2');
}
:root { --font-family: 'Bad Font', sans-serif; }`;
expect(() => validateThemeCss(css)).toThrow(/data: URIs/);
});
it('should reject @font-face with javascript: protocol', () => {
const css = `@font-face {
font-family: 'Bad Font';
src: url('javascript:alert(1)');
}
:root { --font-family: 'Bad Font', sans-serif; }`;
expect(() => validateThemeCss(css)).toThrow(/data: URIs/);
});
it('should accept any font name in --font-family (no allowlist)', () => {
const css = `@font-face {
font-family: 'Declared Font';
src: url('${TINY_WOFF2_DATA_URI}') format('woff2');
}
:root { --font-family: 'Undeclared Font', sans-serif; }`;
expect(() => validateThemeCss(css)).not.toThrow();
});
it('should reject oversized font data', () => {
// Create a base64 string that would decode to > MAX_FONT_FILE_SIZE
const oversizedBase64 = 'A'.repeat(
Math.ceil((MAX_FONT_FILE_SIZE * 4) / 3) + 100,
);
const css = `@font-face {
font-family: 'Big Font';
src: url('data:font/woff2;base64,${oversizedBase64}') format('woff2');
}
:root { --font-family: 'Big Font', sans-serif; }`;
expect(() => validateThemeCss(css)).toThrow(/maximum size/);
});
});
describe('CSS without @font-face still works', () => {
it('should accept plain :root without @font-face', () => {
const css = `:root { --color-primary: #007bff; }`;
expect(() => validateThemeCss(css)).not.toThrow();
});
it('should reject other at-rules (not @font-face)', () => {
const css = `@import url('other.css');
:root { --color-primary: #007bff; }`;
expect(() => validateThemeCss(css)).toThrow();
});
it('should reject @media outside :root', () => {
const css = `@media (max-width: 600px) { :root { --color-primary: #ff0000; } }
:root { --color-primary: #007bff; }`;
expect(() => validateThemeCss(css)).toThrow();
});
});
});
describe('parseInstalledTheme', () => {
describe('valid theme JSON', () => {
it('should parse valid theme with all required fields', () => {
@@ -1472,102 +1133,3 @@ describe('parseInstalledTheme', () => {
});
});
});
describe('embedThemeFonts', () => {
const mockFetch = (
responseBody: ArrayBuffer,
ok = true,
status = 200,
): typeof globalThis.fetch =>
vi.fn().mockResolvedValue({
ok,
status,
statusText: ok ? 'OK' : 'Not Found',
arrayBuffer: () => Promise.resolve(responseBody),
} as Partial<Response>);
const tinyBuffer = new Uint8Array([0, 0, 0, 0, 0, 0, 0, 0]).buffer;
afterEach(() => {
vi.restoreAllMocks();
});
it('should rewrite url() references to data URIs', async () => {
vi.stubGlobal('fetch', mockFetch(tinyBuffer));
const css = `@font-face {
font-family: 'Test';
src: url('fonts/test.woff2') format('woff2');
}
:root { --color-primary: #007bff; }`;
const result = await embedThemeFonts(css, 'owner/repo');
expect(result).toContain('data:font/woff2;base64,');
expect(result).not.toContain('fonts/test.woff2');
expect(result).toContain(':root');
});
it('should handle quoted filenames with spaces', async () => {
vi.stubGlobal('fetch', mockFetch(tinyBuffer));
const css = `@font-face {
font-family: 'Inter';
src: url("Inter Variable.woff2") format('woff2');
}
:root { --color-primary: #007bff; }`;
const result = await embedThemeFonts(css, 'owner/repo');
expect(result).toContain('data:font/woff2;base64,');
expect(result).not.toContain('Inter Variable.woff2');
});
it('should reject path traversal with ".."', async () => {
const css = `@font-face {
font-family: 'Evil';
src: url('../escape/font.woff2') format('woff2');
}
:root { --color-primary: #007bff; }`;
await expect(embedThemeFonts(css, 'owner/repo')).rejects.toThrow(
'is not allowed',
);
});
it('should reject root-anchored paths', async () => {
const css = `@font-face {
font-family: 'Evil';
src: url('/etc/passwd') format('woff2');
}
:root { --color-primary: #007bff; }`;
await expect(embedThemeFonts(css, 'owner/repo')).rejects.toThrow(
'is not allowed',
);
});
it('should reject oversized font files', async () => {
const oversized = new ArrayBuffer(MAX_FONT_FILE_SIZE + 1);
vi.stubGlobal('fetch', mockFetch(oversized));
const css = `@font-face {
font-family: 'Big';
src: url('big.woff2') format('woff2');
}
:root { --color-primary: #007bff; }`;
await expect(embedThemeFonts(css, 'owner/repo')).rejects.toThrow(
'exceeds maximum size',
);
});
it('should return CSS unchanged when no url() refs exist', async () => {
const css = `@font-face {
font-family: 'Test';
src: url('${TINY_WOFF2_DATA_URI}') format('woff2');
}
:root { --color-primary: #007bff; }`;
const result = await embedThemeFonts(css, 'owner/repo');
expect(result).toBe(css);
});
});

View File

@@ -79,63 +79,6 @@ export async function fetchDirectCss(url: string): Promise<string> {
return response.text();
}
/** Strip surrounding single or double quotes from a string. */
function stripQuotes(s: string): string {
const t = s.trim();
if (
(t.startsWith("'") && t.endsWith("'")) ||
(t.startsWith('"') && t.endsWith('"'))
) {
return t.slice(1, -1).trim();
}
return t;
}
/**
* Validate a font-family value for a --font-* CSS variable.
*
* Any font name is allowed — referencing a font the user doesn't have
* installed simply triggers the browser's normal fallback behaviour
* (no network requests). The only things we block are function calls
* (url(), expression(), etc.) because those could load external resources
* or execute expressions.
*
* Quoted or unquoted font names are both accepted.
*
* Examples of accepted values:
* Georgia, serif
* 'Fira Code', monospace
* "My Theme Font", sans-serif
*/
function validateFontFamilyValue(value: string, property: string): void {
const trimmed = value.trim();
if (!trimmed) {
throw new Error(
`Invalid font-family value for "${property}": value must not be empty.`,
);
}
// Split on commas, then validate each font name
const families = trimmed.split(',');
for (const raw of families) {
const name = stripQuotes(raw);
if (!name) {
throw new Error(
`Invalid font-family value for "${property}": empty font name in comma-separated list.`,
);
}
// Reject anything that looks like a function call (url(), expression(), etc.)
if (/\(/.test(name)) {
throw new Error(
`Invalid font-family value for "${property}": function calls are not allowed. Only font names are permitted.`,
);
}
}
}
/** Only var(--custom-property-name) is allowed; no fallbacks. Variable name: -- then [a-zA-Z0-9_-]+ (no trailing dash). */
const VAR_ONLY_PATTERN = /^var\s*\(\s*(--[a-zA-Z0-9_-]+)\s*\)$/i;
@@ -149,15 +92,8 @@ function isValidSimpleVarValue(value: string): boolean {
/**
* Validate that a CSS property value only contains allowed content (allowlist approach).
* Allows: colors (hex, rgb/rgba, hsl/hsla), lengths, numbers, keywords, and var(--name) only (no fallbacks).
* Font properties (--font-*) are validated against a safe font family allowlist instead.
*/
function validatePropertyValue(value: string, property: string): void {
// Font properties use a dedicated validator that accepts any font name
// but rejects function calls (url(), expression(), etc.).
if (/^--font-/i.test(property)) {
validateFontFamilyValue(value, property);
return;
}
if (!value || value.length === 0) {
return; // Empty values are allowed
}
@@ -209,152 +145,79 @@ function validatePropertyValue(value: string, property: string): void {
);
}
// ─── @font-face validation ──────────────────────────────────────────────────
/** Maximum size of a single base64-encoded font (bytes of decoded data). 2 MB. */
export const MAX_FONT_FILE_SIZE = 2 * 1024 * 1024;
/** Maximum total size of all embedded font data across all @font-face blocks. 10 MB. */
export const MAX_TOTAL_FONT_SIZE = 10 * 1024 * 1024;
/**
* Extract @font-face blocks from CSS. Returns the blocks and the remaining CSS.
* Only matches top-level @font-face blocks (not nested inside other rules).
* Validate that CSS contains only :root { ... } with CSS custom property (variable) declarations.
* Must contain exactly :root { ... } and nothing else.
* Returns the validated CSS or throws an error.
*/
function extractFontFaceBlocks(css: string): {
fontFaceBlocks: string[];
remaining: string;
} {
const fontFaceBlocks: string[] = [];
let remaining = css;
export function validateThemeCss(css: string): string {
// Strip multi-line comments before validation
// Note: Single-line comments (//) are not stripped to avoid corrupting CSS values like URLs
const cleaned = css.replace(/\/\*[\s\S]*?\*\//g, '').trim();
// Extract @font-face { ... } blocks one at a time using indexOf-based
// parsing. Each iteration removes the matched block from `remaining`.
for (;;) {
const atIdx = remaining.indexOf('@font-face');
if (atIdx === -1) break;
const openBrace = remaining.indexOf('{', atIdx);
if (openBrace === -1) break;
const closeBrace = remaining.indexOf('}', openBrace + 1);
if (closeBrace === -1) break;
fontFaceBlocks.push(remaining.substring(openBrace + 1, closeBrace).trim());
remaining =
remaining.substring(0, atIdx) + remaining.substring(closeBrace + 1);
}
return { fontFaceBlocks, remaining: remaining.trim() };
}
/**
* Validate @font-face blocks: only data: URIs allowed (no remote URLs).
* Enforces size limits to prevent DoS.
*/
function validateFontFaceBlocks(fontFaceBlocks: string[]): void {
let totalSize = 0;
// Match url() with quoted or unquoted content. Quoted URLs use a non-greedy
// match up to the closing quote; unquoted URLs match non-whitespace/non-paren.
const urlRegex = /url\(\s*(?:'([^']*)'|"([^"]*)"|([^'")\s]+))\s*\)/g;
for (const block of fontFaceBlocks) {
urlRegex.lastIndex = 0;
let match;
while ((match = urlRegex.exec(block)) !== null) {
const uri = (match[1] ?? match[2] ?? match[3]).trim();
if (!uri.startsWith('data:')) {
throw new Error(
'Invalid font src: only data: URIs are allowed in @font-face. ' +
'Remote URLs (http/https) are not permitted to protect user privacy. ' +
'Font files are automatically embedded when installing from GitHub.',
);
}
// Estimate decoded size from base64 content
const base64Match = uri.match(/;base64,(.+)$/);
if (base64Match) {
const size = Math.ceil((base64Match[1].length * 3) / 4);
if (size > MAX_FONT_FILE_SIZE) {
throw new Error(
`Font file exceeds maximum size of ${MAX_FONT_FILE_SIZE / 1024 / 1024}MB.`,
);
}
totalSize += size;
}
}
}
if (totalSize > MAX_TOTAL_FONT_SIZE) {
// Must contain exactly :root { ... } and nothing else
// Find :root { ... } and extract content, then check there's nothing after
const rootMatch = cleaned.match(/^:root\s*\{/);
if (!rootMatch) {
throw new Error(
`Total embedded font data exceeds maximum of ${MAX_TOTAL_FONT_SIZE / 1024 / 1024}MB.`,
'Theme CSS must contain exactly :root { ... } with CSS variable definitions. No other selectors or content allowed.',
);
}
}
/**
* Split CSS declarations by semicolons, but respect quoted strings and url() contents.
* This is needed because data: URIs contain semicolons (e.g., "data:font/woff2;base64,...").
*/
function splitDeclarations(content: string): string[] {
const declarations: string[] = [];
let start = 0;
let inSingleQuote = false;
let inDoubleQuote = false;
let parenDepth = 0;
// Find the opening brace after :root
const rootStart = cleaned.indexOf(':root');
const openBrace = cleaned.indexOf('{', rootStart);
for (let i = 0; i < content.length; i++) {
const ch = content[i];
if (ch === "'" && !inDoubleQuote && parenDepth === 0) {
inSingleQuote = !inSingleQuote;
} else if (ch === '"' && !inSingleQuote && parenDepth === 0) {
inDoubleQuote = !inDoubleQuote;
} else if (ch === '(' && !inSingleQuote && !inDoubleQuote) {
parenDepth++;
} else if (
ch === ')' &&
!inSingleQuote &&
!inDoubleQuote &&
parenDepth > 0
) {
parenDepth--;
}
if (ch === ';' && !inSingleQuote && !inDoubleQuote && parenDepth === 0) {
const trimmed = content.substring(start, i).trim();
if (trimmed) declarations.push(trimmed);
start = i + 1;
}
if (openBrace === -1) {
throw new Error(
'Theme CSS must contain exactly :root { ... } with CSS variable definitions. No other selectors or content allowed.',
);
}
const trimmed = content.substring(start).trim();
if (trimmed) declarations.push(trimmed);
// Find the first closing brace (nested blocks will be caught by the check below)
const closeBrace = cleaned.indexOf('}', openBrace + 1);
return declarations;
}
if (closeBrace === -1) {
throw new Error(
'Theme CSS must contain exactly :root { ... } with CSS variable definitions. No other selectors or content allowed.',
);
}
// ─── :root block validation ─────────────────────────────────────────────────
// Extract content inside :root { ... }
const rootContent = cleaned.substring(openBrace + 1, closeBrace).trim();
/**
* Validate the content inside a :root { ... } block.
* Only CSS custom properties (--*) with safe values are allowed.
*/
function validateRootContent(rootContent: string): void {
// Check for forbidden at-rules inside :root
// Check for forbidden at-rules first (before nested block check, since at-rules with braces would trigger that)
// Comprehensive list of CSS at-rules that should not be allowed
// This includes @import, @media, @keyframes, @font-face, @supports, @charset,
// @namespace, @page, @layer, @container, @scope, and any other at-rules
if (/@[a-z-]+/i.test(rootContent)) {
throw new Error(
'Theme CSS contains forbidden at-rules (@import, @media, @keyframes, etc.). Only CSS variable declarations are allowed inside :root { ... }.',
);
}
// Check for nested blocks
// Check for nested blocks (additional selectors) - should not have any { after extracting :root content
if (/\{/.test(rootContent)) {
throw new Error(
'Theme CSS contains nested blocks or additional selectors. Only CSS variable declarations are allowed inside :root { ... }.',
);
}
for (const decl of splitDeclarations(rootContent)) {
// Check that there's nothing after the closing brace
const afterRoot = cleaned.substring(closeBrace + 1).trim();
if (afterRoot.length > 0) {
throw new Error(
'Theme CSS must contain exactly :root { ... } with CSS variable definitions. No other selectors or content allowed.',
);
}
// Parse declarations and validate each one
const declarations = rootContent
.split(';')
.map(d => d.trim())
.filter(d => d.length > 0);
for (const decl of declarations) {
const colonIndex = decl.indexOf(':');
if (colonIndex === -1) {
throw new Error(`Invalid CSS declaration: "${decl}"`);
@@ -408,214 +271,9 @@ function validateRootContent(rootContent: string): void {
const value = decl.substring(colonIndex + 1).trim();
validatePropertyValue(value, property);
}
}
// ─── Main validation entry point ────────────────────────────────────────────
/**
* Validate theme CSS. Accepts:
* 1. Optional @font-face blocks (with data: URI fonts only)
* 2. Exactly one :root { ... } block with CSS variable declarations
*
* @font-face blocks must appear before :root.
* Returns the validated CSS or throws an error.
*/
export function validateThemeCss(css: string): string {
// Strip multi-line comments before validation
const cleaned = css.replace(/\/\*[\s\S]*?\*\//g, '').trim();
// Extract @font-face blocks (if any) from the CSS
const { fontFaceBlocks, remaining } = extractFontFaceBlocks(cleaned);
// Validate @font-face blocks (reject remote URLs, enforce size limits)
validateFontFaceBlocks(fontFaceBlocks);
// Now validate the remaining CSS (should be exactly :root { ... })
const rootMatch = remaining.match(/^:root\s*\{/);
if (!rootMatch) {
// If there are @font-face blocks but no :root, that's an error
// If there's nothing at all, that's also an error
throw new Error(
'Theme CSS must contain :root { ... } with CSS variable definitions. No other selectors or content allowed.',
);
}
const rootStart = remaining.indexOf(':root');
const openBrace = remaining.indexOf('{', rootStart);
if (openBrace === -1) {
throw new Error(
'Theme CSS must contain :root { ... } with CSS variable definitions. No other selectors or content allowed.',
);
}
const closeBrace = remaining.indexOf('}', openBrace + 1);
if (closeBrace === -1) {
throw new Error(
'Theme CSS must contain :root { ... } with CSS variable definitions. No other selectors or content allowed.',
);
}
const rootContent = remaining.substring(openBrace + 1, closeBrace).trim();
// Validate :root content
validateRootContent(rootContent);
// Check nothing after :root
const afterRoot = remaining.substring(closeBrace + 1).trim();
if (afterRoot.length > 0) {
throw new Error(
'Theme CSS must contain :root { ... } with CSS variable definitions. No other selectors or content allowed.',
);
}
// Return the comment-stripped CSS — this is what was actually validated,
// so we inject exactly what we checked (defense-in-depth).
return cleaned;
}
// ─── Font embedding (install-time) ─────────────────────────────────────────
/** Map of file extensions to font MIME types for data: URI construction. */
const FONT_EXTENSION_MIME: Record<string, string> = {
'.woff2': 'font/woff2',
'.woff': 'font/woff',
'.ttf': 'font/ttf',
'.otf': 'font/opentype',
};
/** Convert an ArrayBuffer to a base64 string using chunked processing. */
function arrayBufferToBase64(buffer: ArrayBuffer): string {
const bytes = new Uint8Array(buffer);
const chunks: string[] = [];
// Process in 8 KB chunks to avoid excessive string concatenation
for (let i = 0; i < bytes.length; i += 8192) {
const chunk = bytes.subarray(i, Math.min(i + 8192, bytes.length));
chunks.push(String.fromCharCode(...chunk));
}
return btoa(chunks.join(''));
}
/**
* Embed fonts referenced in @font-face blocks by fetching them from a GitHub
* repo and converting to data: URIs.
*
* This runs at install time only. Relative URL references like
* `url('./fonts/MyFont.woff2')` are resolved relative to the repo's root
* directory and fetched from GitHub's raw content API.
*
* The returned CSS has all font URLs replaced with self-contained data: URIs,
* so no network requests are needed at runtime.
*
* @param css - The raw theme CSS (may contain relative url() references)
* @param repo - GitHub repo in "owner/repo" format
* @returns CSS with all font URLs replaced by data: URIs
*/
export async function embedThemeFonts(
css: string,
repo: string,
): Promise<string> {
const baseUrl = `https://raw.githubusercontent.com/${repo}/refs/heads/main/`;
// Collect all url() references that need fetching across all @font-face blocks
const urlRegex = /url\(\s*(?:(['"])([^'"]*?)\1|([^'")\s]+))\s*\)/g;
type FontRef = {
fullMatch: string;
quote: string;
path: string;
cleanPath: string;
mime: string;
};
const fontRefs: FontRef[] = [];
// Use extractFontFaceBlocks-style indexOf parsing to find @font-face blocks
// and their url() references, without duplicating the regex approach
let searchCss = css;
let offset = 0;
for (;;) {
const atIdx = searchCss.indexOf('@font-face', 0);
if (atIdx === -1) break;
const openBrace = searchCss.indexOf('{', atIdx);
if (openBrace === -1) break;
const closeBrace = searchCss.indexOf('}', openBrace + 1);
if (closeBrace === -1) break;
const blockContent = searchCss.substring(openBrace + 1, closeBrace);
// Find url() references within this block
let urlMatch;
urlRegex.lastIndex = 0;
while ((urlMatch = urlRegex.exec(blockContent)) !== null) {
const fullMatch = urlMatch[0];
const quote = urlMatch[1] || '';
const path = urlMatch[2] ?? urlMatch[3];
// Skip data: URIs — already embedded
if (path.startsWith('data:')) continue;
if (/^https?:\/\//i.test(path)) {
throw new Error(
`Remote font URL "${path}" is not allowed. Only relative paths to fonts in the same GitHub repo are supported.`,
);
}
const cleanPath = path.replace(/^\.\//, '');
if (cleanPath.startsWith('/') || cleanPath.includes('..')) {
throw new Error(
`Font path "${path}" is not allowed. Only relative paths within the repo are supported (no "/" prefix or ".." segments).`,
);
}
const ext = cleanPath.substring(cleanPath.lastIndexOf('.')).toLowerCase();
const mime = FONT_EXTENSION_MIME[ext];
if (!mime) {
throw new Error(
`Unsupported font file extension "${ext}". Supported: ${Object.keys(FONT_EXTENSION_MIME).join(', ')}.`,
);
}
fontRefs.push({ fullMatch, quote, path, cleanPath, mime });
}
offset = closeBrace + 1;
searchCss = searchCss.substring(offset);
}
if (fontRefs.length === 0) return css;
// Fetch all fonts in parallel
const fetched = await Promise.all(
fontRefs.map(async ref => {
const fontUrl = baseUrl + ref.cleanPath;
const response = await fetch(fontUrl);
if (!response.ok) {
throw new Error(
`Failed to fetch font file "${ref.cleanPath}" from ${fontUrl}: ${response.status} ${response.statusText}`,
);
}
const buffer = await response.arrayBuffer();
if (buffer.byteLength > MAX_FONT_FILE_SIZE) {
throw new Error(
`Font file "${ref.cleanPath}" exceeds maximum size of ${MAX_FONT_FILE_SIZE / 1024 / 1024}MB.`,
);
}
const base64 = arrayBufferToBase64(buffer);
return { ref, dataUri: `data:${ref.mime};base64,${base64}` };
}),
);
// Replace each url() reference with its data: URI
let result = css;
for (const { ref, dataUri } of fetched) {
const q = ref.quote || "'";
result = result.replace(ref.fullMatch, `url(${q}${dataUri}${q})`);
}
return result;
// Return the original CSS (with :root wrapper) so it can be injected properly
return css.trim();
}
/**

View File

@@ -128,10 +128,6 @@ app.get('/metrics', (_req, res) => {
app.use((req, res, next) => {
res.set('Cross-Origin-Opener-Policy', 'same-origin');
res.set('Cross-Origin-Embedder-Policy', 'require-corp');
res.set(
'Content-Security-Policy',
"default-src 'self' blob:; img-src 'self' blob: data:; script-src 'self' 'unsafe-eval' blob:; style-src 'self' 'unsafe-inline'; font-src 'self' data:; connect-src http: https:;",
);
next();
});
if (process.env.NODE_ENV === 'development') {

View File

@@ -1,6 +0,0 @@
---
category: Enhancements
authors: [MatissJanis]
---
Custom Themes: allow using a custom font