diff --git a/src/packages/chakra-integration/Provider.tsx b/src/packages/chakra-integration/Provider.tsx index 45d546e..5a0e6ce 100644 --- a/src/packages/chakra-integration/Provider.tsx +++ b/src/packages/chakra-integration/Provider.tsx @@ -27,13 +27,14 @@ export type CustomChakraProviderProps = PropsWithChildren<{ theme?: Record; }>; +const appRoot = ".pioneer-root"; const system = createSystem( defaultConfig, defineConfig({ preflight: { - scope: ".pioneer-root" + scope: appRoot }, - cssVarsRoot: ":host", + cssVarsRoot: appRoot, conditions: redirectLightCondition(defaultConfig.conditions), globalCss: redirectHtmlProps(defaultConfig.globalCss) }) @@ -49,7 +50,7 @@ function redirectHtmlProps( // Take default html styles and apply them to the host element instead return { ...rest, - ":host": html + [appRoot]: html }; } @@ -60,58 +61,28 @@ function redirectLightCondition( return { ...conditions, // Before: ":root &, .light &" - light: ":host &, .light &" + light: `${appRoot} &, .light &` }; } -// https://github.com/chakra-ui/chakra-ui/issues/2439 export const CustomChakraProvider: FC = ({ container, children }) => { - /* - Chakra integration internals: + /* + Setup chakra integration: - 1. Setting the emotion cache to render into 'container' instead of the document by default. - This encapsulates the styles in the shadow root and ensures that components in the shadow dom - are rendered correctly. + 1. Mount styles into the shadow root via emotion + 2. Use chakra's EnvironmentProvider to tell it about the shadow root context + 3. Setup global styles correctly (selectors etc.) via chakra's system object + 4. Render the rest of the application - 2. Handling the color mode on our own. Chakra's default behavior will inject class names & data - globally into the document's html / body nodes. - - NOTE: Color mode is not initialized from the system automatically right now, this can be added in the future. - - 3. Changing the location for toasts to render inside the shadow root instead of the host document (via ToastProvider etc). - - 4. Changing the default container for and components using (e.g. Modal, Drawer) to render inside the shadow dom. - This happens in the PortalFix.ts module (all components receive the chakraHost div via PortalRootProvider). - - NOTE: - For reference: - https://github.dev/chakra-ui/chakra-ui/blob/80971001d7b77d02d5f037487a37237ded315480/packages/components/provider/src/chakra-provider.tsx#L89-L102 - and - https://github.dev/chakra-ui/chakra-ui/blob/80971001d7b77d02d5f037487a37237ded315480/packages/components/react/src/chakra-provider.tsx#L31-L33 - - Essentially, we do pretty much the same thing as the ChakraProvider, but manually. - - The integration is rather complex already, but did not justify forking the chakra-ui project as of yet. - Should it grow even more bothersome, chakra should be forked and the steps above should then be made to the chakra's source code, - which would be somewhat easier: - - 1. Accept a top level `rootContainer` element (optional) and provide it down the component tree. - 2. Use `rootContainer` (if present) as the fallback location for , if no containerRef has been set (automatically fixes Modal, Drawer, and possibly Toasts). - 3. Pass `rootContainer` to the emotion cache for css mounting. - 4. Set color mode on the root container instead of html and body. - + TODO: Force a specific portal container? */ - const cache = useEmotionCache(container); return ( - /** TODO: Consider removing the chakra host altogether */ -
- - - {children} - - -
+ + + {children} + + ); };