refactor(react-portal): remove Griffel dependency from usePortalMountNode#35994
Merged
dmytrokirpa merged 12 commits intomasterfrom Apr 16, 2026
Merged
refactor(react-portal): remove Griffel dependency from usePortalMountNode#35994dmytrokirpa merged 12 commits intomasterfrom
dmytrokirpa merged 12 commits intomasterfrom
Conversation
📊 Bundle size report
Unchanged fixtures
|
|
Pull request demo site: URL |
dmytrokirpa
changed the title
…Element in value Agent-Logs-Url: https://github.com/microsoft/fluentui/sessions/1388006f-49a7-4046-98e1-183a3df92ed0 Co-authored-by: layershifter <14183168+layershifter@users.noreply.github.com>
…ule for style injection Agent-Logs-Url: https://github.com/microsoft/fluentui/sessions/eb7347c6-eac4-4401-8a91-75a630f87ca6 Co-authored-by: layershifter <14183168+layershifter@users.noreply.github.com>
…unter type, head.querySelector Agent-Logs-Url: https://github.com/microsoft/fluentui/sessions/eb7347c6-eac4-4401-8a91-75a630f87ca6 Co-authored-by: layershifter <14183168+layershifter@users.noreply.github.com>
…getDocument Agent-Logs-Url: https://github.com/microsoft/fluentui/sessions/46eebcbb-9695-4cee-953d-5b71aab87cab Co-authored-by: layershifter <14183168+layershifter@users.noreply.github.com>
Agent-Logs-Url: https://github.com/microsoft/fluentui/sessions/46eebcbb-9695-4cee-953d-5b71aab87cab Co-authored-by: layershifter <14183168+layershifter@users.noreply.github.com>
…ement Agent-Logs-Url: https://github.com/microsoft/fluentui/sessions/46eebcbb-9695-4cee-953d-5b71aab87cab Co-authored-by: layershifter <14183168+layershifter@users.noreply.github.com>
…d use in test cleanup Agent-Logs-Url: https://github.com/microsoft/fluentui/sessions/05960f41-5ea6-4363-9fe0-70657b13acca Co-authored-by: layershifter <14183168+layershifter@users.noreply.github.com>
layershifter
approved these changes
Apr 16, 2026
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
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
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.
Context
Portal is used in many Fluent UI components (Dialog, Tooltip, Popover, etc.) as part of their render methods. We are introducing headless components that need to be re-usable in non-Fluent environments — environments that may not have Griffel set up. Because Portal was previously importing
@griffel/reactto apply styles to its mount node, it was pulling Griffel in as a transitive dependency of every component that uses Portal. This change removes that dependency.Previous Behavior
usePortalMountNodeused a GriffelmakeStyles()hook to applyposition: absolute,top/left/right: 0, andz-index: 1000000to the portal mount node via a generated atomic CSS class. This required@griffel/reactat runtime.New Behavior
The portal mount node styles are now applied via a dynamically injected
<style>element using a stable, using the existing attribute[data-portal-node]. The injection logic lives in the newusePortalMountNodeStyleshook, which:<style>element per document (supporting iframes) using aWeakMap-based reference count<style>element when the last portal using that document unmountsclassNamealongside theme and consumer classesThis is not a breaking change:
position: fixed) via their own class names passed throughmountNode={{ className: '...' }}mountNodewith custom styles confirms the override behavior works correctlyz-index,position, and other properties are all still appliedRelated Issue(s)