Skip to content

Fix component CSS leaking page-wide in snapshots (nested :hover/:focus)

Pre-release
Pre-release

Choose a tag to compare

@Sriram567 Sriram567 released this 29 Jun 14:39
f2029c1

What's Changed

🏗 Maintenance

  • Release 1.32.3-beta.2 by @github-actions[bot] in #2327
  • Release 1.32.3-beta.3 by @github-actions[bot] in #2328
  • Nested interactive-state styles no longer leak to the whole page (#2324, PER-9775)
    Snapshots of pages built with CSS-in-JS / native CSS nesting (e.g., Emotion) could render with the wrong colors—such as a page-wide background tint, dark backgrounds behind SVGs, or incorrect button colors—across all browsers. Component-scoped &:hover / &:focus / &:focus-within rules were being flattened into the captured DOM without their parent selector, meaning a top-level & resolved to :root and applied the styles to the entire document. These rules are now correctly scoped to their parent (&:is(<parent>)), ensuring interactive-state styles stay contained to their component.
  • Sync Automate snapshots no longer fail with "upload is not async iterable" (#2314, PER-9706)
    Fixes an error that could break synchronous Automate snapshot uploads.

Full Changelog: v1.32.3-beta.2...v1.32.3-beta.3