fix(site-builder): editor canvas renders content with the published base reset
Published pages/Preview ship a head reset (*{margin:0;padding:0}, img block,
a inherit, body line-height 1.6 / #1f2937 / 16px); the editor canvas had none,
so h1-h6/p margins, line-height and inherited size/colour differed.
- editor.css: one commented block scoping the reset to .canvas-device-frame,
every selector zero-specificity (:where) so inline styles / class rules win
exactly as when published; editor chrome untouched (snapshot identical).
- tokens.ts: canvas heading/link token rules made zero-specificity too.
- utils/css-reset.ts: single source for the reset declarations (html-export
imports it; test asserts byte-identity with the backend head and that the
editor.css block carries the same declarations).
- scripts/e2e-canvas-parity.mjs (npm run test:browser:canvas): real editor vs
published HTML in Firefox + Chromium, boxes within 1px + computed styles.
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
76f0ba9ca1
commit
dc415db2d3
15 files changed
+774
-6
No files matched your search
@@ -0,0 +1,21 @@
|
||||
/**
|
||||
* The page-level base reset shared by the PUBLISHED/Preview document head
|
||||
* (html-export.ts `wrapInDocument`, mirrored by the backend's
|
||||
* `generateCompiledHTML` in web-files/api/site-builder.php) and the editor
|
||||
* CANVAS (the "canvas = published reset" block in styles/editor.css).
|
||||
*
|
||||
* The declaration strings live here once so the two cannot drift;
|
||||
* css-reset.test.ts asserts html-export's CSS_RESET is byte-identical to the
|
||||
* published head text and that the editor.css block carries every one of
|
||||
* these declarations.
|
||||
*/
|
||||
export const RESET_ALL_DECLS = 'box-sizing:border-box;margin:0;padding:0';
|
||||
export const BODY_BASE_DECLS =
|
||||
"font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1.6;color:#1f2937;-webkit-font-smoothing:antialiased";
|
||||
export const IMG_DECLS = 'max-width:100%;height:auto;display:block';
|
||||
export const LINK_DECLS = 'color:inherit';
|
||||
|
||||
/** Minified published reset (document head). Must stay byte-identical to the backend's `$reset`. */
|
||||
export const CSS_RESET =
|
||||
`*,*::before,*::after{${RESET_ALL_DECLS}}html,body{overflow-x:clip}` +
|
||||
`body{${BODY_BASE_DECLS}}img{${IMG_DECLS}}a{${LINK_DECLS}}`;
|
||||
Reference in new issue
Block a user