Version: agentation@3.0.2
Summary
The CSS for design-mode contains an unscoped svg[fill="none"] { fill: none !important; } rule that gets injected globally into document.head. It overrides fill on every host-page SVG that uses fill="none" as an attribute and relies on a CSS class (e.g. Tailwind's fill-current) to be filled. This is the exact regression #58 originally tracked — PR #136 fixed it in page-toolbar-css and annotation-popup-css, but design-mode/styles.module.scss was not included and still leaks.
Where
In the bundled dist/index.mjs the offending block is the first rule of var css4 (the design-mode/styles.module.scss block):
svg[fill=none] {
fill: none !important;
}
All sibling SCSS files (page-toolbar-css, annotation-popup-css, markers-layer, etc.) already have this rule scoped under their container class after #136. Only design-mode is unscoped.
Repro
- App with
lucide-react + a Radix RadioGroup (shadcn pattern) using <Circle className="fill-current ..." /> as the checked indicator.
- Mount
<Agentation /> in development.
- Select a radio — the indicator renders as an empty outlined circle (double-ring look) instead of a filled dot.
The same effect appears on any Lucide / Figma-exported SVG that relies on <svg fill="none"> + a CSS class for fill (Tailwind fill-current, raw fill: currentColor, etc.).
Expected
The fill protection rule should be scoped to design-mode's own container, the same way #136 scoped the others — e.g.:
.overlay svg[fill="none"],
.rearrangeOverlay svg[fill="none"] {
fill: none !important;
}
(Class names per the existing scope classes in design-mode/styles.module.scss.)
Notes
Happy to send a PR if useful.
Version:
agentation@3.0.2Summary
The CSS for design-mode contains an unscoped
svg[fill="none"] { fill: none !important; }rule that gets injected globally intodocument.head. It overridesfillon every host-page SVG that usesfill="none"as an attribute and relies on a CSS class (e.g. Tailwind'sfill-current) to be filled. This is the exact regression #58 originally tracked — PR #136 fixed it inpage-toolbar-cssandannotation-popup-css, butdesign-mode/styles.module.scsswas not included and still leaks.Where
In the bundled
dist/index.mjsthe offending block is the first rule ofvar css4(thedesign-mode/styles.module.scssblock):All sibling SCSS files (
page-toolbar-css,annotation-popup-css,markers-layer, etc.) already have this rule scoped under their container class after #136. Onlydesign-modeis unscoped.Repro
lucide-react+ a Radix RadioGroup (shadcn pattern) using<Circle className="fill-current ..." />as the checked indicator.<Agentation />in development.The same effect appears on any Lucide / Figma-exported SVG that relies on
<svg fill="none">+ a CSS class for fill (Tailwindfill-current, rawfill: currentColor, etc.).Expected
The fill protection rule should be scoped to design-mode's own container, the same way #136 scoped the others — e.g.:
(Class names per the existing scope classes in
design-mode/styles.module.scss.)Notes
design-modewas missed and now leaks in v3.0.x.bun patch agentation@3.0.2adding the scope.Happy to send a PR if useful.