fix(css-reset): attach variable to :host as well (#7456)

* fix(css-reset): attach variable to :host as well * docs: add changelog --------- Co-authored-by: Segun Adebayo <joseshegs@gmail.com>
chakra-ui · Mar 17, 2023 · e5255d8 · e5255d8 · vercel · Mar 17, 2023
1 parent 01c0a84
commit e5255d8
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/.changeset/loud-socks-sing.md b/.changeset/loud-socks-sing.md
@@ -0,0 +1,5 @@
+---
+"@chakra-ui/css-reset": patch
+---
+
+Attach `--chakra-vh` variable to :host as well
diff --git a/packages/components/css-reset/src/css-reset.tsx b/packages/components/css-reset/src/css-reset.tsx
@@ -1,24 +1,24 @@
 import { Global } from "@emotion/react"
 
 const vhPolyfill = `
-  :root {
+  :root, :host {
     --chakra-vh: 100vh;
   }
 
   @supports (height: -webkit-fill-available) {
-    :root {
+    :root, :host {
       --chakra-vh: -webkit-fill-available;
     }
   }
 
   @supports (height: -moz-fill-available) {
-    :root {
+    :root, :host {
       --chakra-vh: -moz-fill-available;
     }
   }
 
   @supports (height: 100dvh) {
-    :root {
+    :root, :host {
       --chakra-vh: 100dvh;
     }
   }