fix(ssg): fix white header on dark theme and resolve critters CSP block (#66)
## Summary - **Critters preload**: Set `preload: false` in `ssgPlugin` to eliminate `onload="this.media='all'"` event handlers on external stylesheets, which violated Content Security Policy (`script-src 'self'` / `require-trusted-types-for 'script'`) and left the compiled stylesheet permanently blocked in `media="print"`. - **Dark theme selector retention**: Added `allowRules: [/\.dark/]` to Critters options so dark theme selectors and palette variables are preserved during critical CSS inlining. - **Immediate theme variables**: Initialized `--rb-background`, `--rb-base`, and `--rb-text` in `THEME_INIT_STYLES` for `:root` and `.dark` alongside background color to ensure components like `PageHead` instantly reflect the active theme. ## Verification - `pnpm typecheck`: Passed (0 errors) - `pnpm lint`: Passed (0 warnings) - `pnpm test`: Passed (all suites passed) - `pnpm build`: Passed (clean SSG generation) - Local Playwright browser test with dark color scheme verified `headerBg` is `rgb(20, 20, 20)` and zero CSP inline handler violations.
This commit is contained in:
1 parent
c1a17a262a
commit
968f41d68d
2 files changed
+6
-4
No files matched your search
@@ -10,7 +10,7 @@ export const THEME_INIT_SCRIPT = `(function(){try{var k='ermnvldmr/ui/lib/theme'
|
||||
* These align with the main palette in styles.css.
|
||||
*/
|
||||
export const THEME_INIT_STYLES = `
|
||||
:root { background-color: #fafafa; color: #262626; }
|
||||
.dark { background-color: #141414; color: #f6f6f6; }
|
||||
:root { --rb-background: #fafafa; --rb-base: #f6f6f6; --rb-text: #262626; background-color: #fafafa; color: #262626; }
|
||||
.dark { --rb-background: #141414; --rb-base: #262626; --rb-text: #f6f6f6; background-color: #141414; color: #f6f6f6; }
|
||||
body { margin: 0; transition: background-color 0.2s ease; }
|
||||
`;
|
||||
Reference in new issue
Block a user