Fix design-mode svg[fill="none"] leaking into host page (#181)#185
Open
pcamarajr wants to merge 1 commit into
Open
Fix design-mode svg[fill="none"] leaking into host page (#181)#185pcamarajr wants to merge 1 commit into
pcamarajr wants to merge 1 commit into
Conversation
The unscoped reset in design-mode/styles.module.scss leaked into host page SVGs that rely on fill="none" with CSS-based fills (e.g. Tailwind fill-current, Lucide icons). PR benjitaylor#136 fixed the same regression in page-toolbar and annotation-popup but missed design-mode. Scope the rule under `.overlay` and `.rearrangeOverlay` — the two top-level wrappers that contain all design-mode SVGs — matching the existing pattern. Fixes benjitaylor#181
|
@pcamarajr is attempting to deploy a commit to the Benji Taylor's Projects Team on Vercel. A member of the Team first needs to authorize it. |
4 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #181.
What
Scope the
svg[fill="none"] { fill: none !important }reset indesign-mode/styles.module.scssunder.overlayand.rearrangeOverlayinstead of leaving it global.Why
The unscoped rule overrides host page SVGs that use
fill="none"with CSS-based fills (Tailwindfill-current, Lucide icons, shadcn radio dots, etc.) — exactly the regression #58 was meant to close. #136 scoped this protection inpage-toolbar-cssandannotation-popup-cssbut misseddesign-mode, so the leak still ships in v3.0.x.How
Matches the existing pattern from #136 — nests the
svg[fill="none"](and:not([fill])variant) under the two top-level design-mode wrappers. Verified in the compileddist/index.mjsthat the rule now compiles to.styles-module__overlay___… svg[fill=none], .styles-module__rearrangeOverlay___… svg[fill=none], mirroringcss5(toolbar) andcss(popup).No portals are used inside design-mode, so every SVG it renders sits under one of these two containers — coverage is complete.
How to test
pnpm install && pnpm --filter agentation buildpnpm --filter agentation test— 83 tests pass.<Circle className="fill-current" />): the radio indicator renders as a filled dot again, not the empty double-ring.dist/index.mjs→ no unscopedsvg[fill=none]selectors remain.