Update integration of styles, remove chakra-host node

src/packages/chakra-integration/Provider.tsx

@@ -27,13 +27,14 @@ export type CustomChakraProviderProps = PropsWithChildren<{
     theme?: Record<string, unknown>;
 }>;
 
+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<CustomChakraProviderProps> = ({ 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 <Portal /> and components using <Portal /> (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 <Portal />, 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 */
-        <div className="chakra-host">
-            <CacheProvider value={cache}>
-                <EnvironmentProvider value={container}>
-                    <ChakraProvider value={system}>{children}</ChakraProvider>
-                </EnvironmentProvider>
-            </CacheProvider>
-        </div>
+        <CacheProvider value={cache}>
+            <EnvironmentProvider value={container}>
+                <ChakraProvider value={system}>{children}</ChakraProvider>
+            </EnvironmentProvider>
+        </CacheProvider>
     );
 };