docs: add html2canvas export notes - #5
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates the AGENTS.md documentation to include specific styling guidelines for ensuring compatibility with html2canvas during PDF export, specifically regarding CSS color functions and SVG usage. A review comment suggests broadening the restriction on modern CSS color functions to all export-visible content, rather than just pseudo-elements, to prevent parsing errors with functions like color-mix() and oklch().
| ## `src/styles/` | ||
|
|
||
| - `global.css`: Global styles, theme variables, slide layout, reusable block styling, top-right abstract mark styling, and export canvas styling. | ||
| - Avoid modern CSS color functions in export-visible pseudo-elements because `html2canvas` cannot reliably parse computed values such as `color(srgb ...)`; use `rgb(...)`, `rgba(...)`, or hex instead. |
There was a problem hiding this comment.
The restriction on modern CSS color functions should be applied to all export-visible elements, not just pseudo-elements. While exportPdf.js attempts to normalize color() functions for standard elements, it does not currently handle color-mix() (which is used in .slide-canvas in global.css) or other modern syntaxes like oklch(). Since html2canvas cannot reliably parse these computed values, it is safer to avoid them in any content intended for export.
| - Avoid modern CSS color functions in export-visible pseudo-elements because `html2canvas` cannot reliably parse computed values such as `color(srgb ...)`; use `rgb(...)`, `rgba(...)`, or hex instead. | |
| - Avoid modern CSS color functions (such as `color()`, `color-mix()`, or `oklch()`) in export-visible content because `html2canvas` cannot reliably parse these computed values; use `rgb(...)`, `rgba(...)`, or hex instead. |
There was a problem hiding this comment.
Pull request overview
Updates contributor/project documentation with guidance for making slide visuals export-safe when generating PDFs via html2canvas.
Changes:
- Added notes about avoiding modern CSS color functions in export-visible pseudo-elements to improve
html2canvascompatibility. - Added guidance to prefer full-region SVG overlays over small standalone SVG connector graphics for more reliable PDF export.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @@ -70,6 +70,8 @@ This is the reusable content component layer. | |||
| ## `src/styles/` | |||
|
|
|||
| - `global.css`: Global styles, theme variables, slide layout, reusable block styling, top-right abstract mark styling, and export canvas styling. | |||
Summary
Tests