Skip to content

Bug: Global svg[fill=none] rule in design-mode CSS leaks into host app (regression of #58) #181

@jrizo0

Description

@jrizo0

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

  1. App with lucide-react + a Radix RadioGroup (shadcn pattern) using <Circle className="fill-current ..." /> as the checked indicator.
  2. Mount <Agentation /> in development.
  3. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions