fix: update types

Author: codebender828

components.d.ts

@@ -6,7 +6,7 @@
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2022-03-03T13:59:03.450Z
+ * This file was generated on 2022-03-05T09:54:15.061Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"
@@ -191,7 +191,6 @@ declare module "@vue/runtime-core" {
   /* Component custom props types for JSX and TSX auto complete */
   export interface ComponentCustomProps
     extends JsxComponentCustomProps,
-      ComponentCustomProps,
       ChakraProps {
     vSlots?: {
       [eleName: string]: JSX.Element

packages/core/package.json

@@ -50,7 +50,10 @@
     "@chakra-ui/vue-system": "0.1.0-alpha.10",
     "@chakra-ui/vue-theme": "1.0.0-alpha.10",
     "@chakra-ui/vue-theme-tools": "0.1.0-alpha.10",
-    "@emotion/cache": "^11.7.1"
+    "@emotion/cache": "^11.7.1",
+    "@emotion/serialize": "^1.0.2",
+    "@emotion/sheet": "^1.1.0",
+    "@emotion/utils": "^1.1.0"
   },
   "devDependencies": {
     "vue": "^3.2.29"

packages/core/src/extend-theme.ts

@@ -17,8 +17,7 @@ type DeepThemeExtension<ThemeObject, TypeHints> = {
     | (ThemeObject[Key] extends (...args: any[]) => any
         ? Partial<ReturnType<ThemeObject[Key]>>
         : Partial<ThemeObject[Key]>) // allow function or object
-} &
-  Partial<TypeHints> &
+} & Partial<TypeHints> &
   Record<string, any> // escape hatch
 
 export type ThemeOverride = DeepThemeExtension<Theme, ThemeExtensionTypeHints>

packages/core/src/helpers/css-reset.ts

@@ -3,7 +3,11 @@ import { cssResetStyles } from "@chakra-ui/c-reset"
 import { ThemeOverride } from "../extend-theme"
 import { get, runIfFn } from "@chakra-ui/utils"
 import { ColorModeRef } from "@chakra-ui/c-color-mode"
-import { computed, ref, watch } from "vue"
+import { serializeStyles } from "@emotion/serialize"
+import { StyleSheet } from "@emotion/sheet"
+import { computed, getCurrentInstance, ref, watch, watchEffect } from "vue"
+import createCache, { EmotionCache } from "@emotion/cache"
+import { insertStyles, SerializedStyles } from "@emotion/utils"
 
 /** Injects CSS reset styles */
 export function injectResetStyles() {
@@ -13,6 +17,7 @@ export function injectResetStyles() {
 /** Injects styles from `theme.styles.global` property */
 export function injectThemeGlobalStyles(
   theme: ThemeOverride,
+  _cache: EmotionCache,
   colorMode: ColorModeRef
 ) {
   const styleObjectOrFn = get(theme, "styles.global")
@@ -23,15 +28,83 @@ export function injectThemeGlobalStyles(
     })
   )
   if (!globalStyles.value) return undefined
+
+  const cache = createCache({
+    key: "chakra-global",
+    nonce: "__chakra__",
+  })
+
+  const _globalStyles = computed(() => css(globalStyles.value)(theme))
+
+  const serializedStyles = computed<SerializedStyles>(() =>
+    serializeStyles([_globalStyles.value], cache.registered, theme)
+  )
+
   const id = ref(0)
+  const sheetRef = ref<[sheet: StyleSheet, hydrating: boolean]>()
+
+  console.log(cache)
+
   watch(
-    colorMode,
+    () => cache,
     () => {
-      const styles = css(globalStyles.value)(theme)
-      injectGlobal(styles)
+      const key = `${cache.key}`
+
+      let sheet = new StyleSheet({
+        key: `${key} ${serializedStyles.value.name}`,
+        nonce: cache.sheet.nonce,
+        container: cache.sheet.container,
+        // @ts-expect-error `isSpeedy` is not typed
+        speedy: cache.sheet.isSpeedy,
+      })
+
+      let rehydrating = false
+      let node: HTMLStyleElement | null = document.querySelector(
+        `style[data-emotion="${key} ${serializedStyles.value.name}"]`
+      )
+
+      if (cache.sheet.tags.length) {
+        sheet.before = cache.sheet.tags[0]
+      }
+
+      if (node !== null) {
+        rehydrating = true
+        // clear the hash so this node won't be recognizable as rehydratable by other <Global/>s
+        node.setAttribute(
+          "data-emotion",
+          `${key} ${serializedStyles.value.name}`
+        )
+        sheet.hydrate([node])
+      }
+
+      sheetRef.value = [sheet, rehydrating]
     },
     {
       immediate: true,
     }
   )
+
+  watchEffect((_) => {
+    const [sheet, rehydrating] = sheetRef.value!
+
+    if (rehydrating) {
+      sheetRef.value![1] = false
+    }
+
+    if (serializedStyles.value.next !== undefined) {
+      // insert keyframes
+      insertStyles(cache, serializedStyles.value.next, true)
+    }
+
+    if (sheet.tags.length) {
+      // if this doesn't exist then it will be
+      // null so the style element will be appended
+      let element = sheet.tags[sheet.tags.length - 1].nextElementSibling
+      console.log({ element })
+      sheet.before = element
+      sheet.flush()
+    }
+
+    cache.insert(``, serializedStyles.value, sheet, false)
+  })
 }

packages/core/src/index.ts

@@ -7,7 +7,7 @@ import {
   EmotionThemeContextSymbol,
   EmotionCacheInjectionSymbol,
 } from "@chakra-ui/vue-styled"
-import createCache from "@emotion/cache"
+import createCache, { EmotionCache } from "@emotion/cache"
 import internalIcons from "./icon.internals"
 import { extendTheme, ThemeOverride } from "./extend-theme"
 import { MergedIcons, parseIcons } from "./parse-icons"
@@ -60,8 +60,6 @@ const ChakraUIVuePlugin: Plugin = {
     if (options.cssReset) {
       injectResetStyles()
     }
-    // Inject `styles.global` in document
-    injectThemeGlobalStyles(computedTheme.value, colorModeRef)
 
     let libraryIcons = options.icons?.library || {}
     let extendedIcons = options.icons?.extend || {}
@@ -72,12 +70,23 @@ const ChakraUIVuePlugin: Plugin = {
     app.provide(EmotionThemeContextSymbol, computedTheme.value)
     app.provide("$chakraTheme", computedTheme.value as ThemeOverride)
 
+    let emotionCache: EmotionCache | null = null
     // Provide emotion cache
     if (options.emotionCacheOptions) {
-      const emotionCache = createCache(options.emotionCacheOptions)
+      emotionCache = createCache(options.emotionCacheOptions)
       app.provide(EmotionCacheInjectionSymbol, emotionCache)
     }
 
+    if (!emotionCache) {
+      emotionCache = createCache({
+        key: "chakra",
+        nonce: `chakra-global-cache-${Date.now()}`,
+      })
+    }
+
+    // Inject `styles.global` in document
+    injectThemeGlobalStyles(computedTheme.value, emotionCache, colorModeRef)
+
     libraryIcons = parseIcons(libraryIcons)
 
     // Merge internal icons and library icons

packages/test-utils/package.json

@@ -20,11 +20,12 @@
     "clean": "rimraf dist"
   },
   "dependencies": {
+    "@chakra-ui/vue-styled": "^0.0.0-alpha.2",
     "@chakra-ui/vue-theme": "1.0.0-alpha.10",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/user-event": "^13.2.1",
     "@testing-library/vue": "^6.4.2",
     "jest-axe": "^5.0.1",
     "vue": "^3.2.29"
   }
-}
+}

playground/src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <c-reset />
-  <chakra.section d="flex" transition="all 0.2s" height="inherit" w="inherit" :sx="rootStyles">
+  <chakra.section d="flex" transition="all 0.2s" height="inherit" w="inherit">
     <perfect-scrollbar>
       <chakra.div pb="12">
         <sidebar :stories="routes" />
@@ -33,11 +33,10 @@ export default defineComponent({
     const { colorMode, toggleColorMode } = useColorMode()
 
     const rootStyles = computed(() => {
-
       const styles = {
         light: {
           bg: 'white',
-          // color: 'blackAlpha.800',
+          color: 'blackAlpha.800',
           'a.router-link-active': {
             color: 'teal.500',
             fontSize: '0.9rem',
@@ -47,12 +46,12 @@ export default defineComponent({
         },
         dark: {
           bg: 'gray.800',
-          // color: 'whiteAlpha.800',
+          color: 'whiteAlpha.800',
           'a.router-link-active': {
             color: 'teal.200',
             fontSize: '0.9rem',
             fontWeight: 'bold',
-            textDecoration: 'underline'
+            textDecoration: 'underline',
           }
         },
       }
@@ -63,6 +62,10 @@ export default defineComponent({
       }
     })
 
+    watchEffect(() => {
+      console.log("rootStyles", rootStyles.value)
+    })
+
     return {
       routes,
       colorMode,

playground/src/main.ts

@@ -11,6 +11,7 @@ import PerfectScrollbar from "vue3-perfect-scrollbar"
 import { MotionPlugin } from "@vueuse/motion"
 import App from "./App.vue"
 import router from "./router"
+import { mode } from "@chakra-ui/vue-theme-tools"
 
 console.log({ router })
 
@@ -34,7 +35,7 @@ const app = createApp(App)
         },
       },
       emotionCacheOptions: {
-        key: "css",
+        key: "chakra",
       },
       extendTheme: extendTheme({
         config: {},
@@ -52,7 +53,14 @@ const app = createApp(App)
           global: (props: any) => {
             return {
               body: {
-                // color: mode('gray.700', 'whiteAlpha.900')(props),
+                bg: mode("white", "gray.800")(props),
+                color: mode("blackAlpha.800", "whiteAlpha.800")(props),
+                "a.router-link-active": {
+                  color: mode("teal.500", "teal.200")(props),
+                  fontSize: mode("0.9rem", "0.9rem")(props),
+                  fontWeight: mode("bold", "bold")(props),
+                  textDecoration: mode("underline", "underline")(props),
+                },
               },
             }
           },

tsconfig.json

@@ -26,7 +26,7 @@
     "forceConsistentCasingInFileNames": true,  /* Disallow inconsistently-cased references to the same file. */
   },
   "include": [
-    "components.d.ts",
+    "./components.d.ts",
     "packages",
     "playground/**/*.ts",
     "playground/**/*.d.ts",

yarn.lock

@@ -1268,6 +1268,30 @@
     framesync "5.3.0"
     lodash.mergewith "4.6.2"
 
+"@chakra-ui/vue-styled@^0.0.0-alpha.2":
+  version "0.0.0-alpha.2"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/vue-styled/-/vue-styled-0.0.0-alpha.2.tgz#046aeff8f521d4da0bc33964f6728f64a0784b3d"
+  integrity sha512-iB6+hl60knaASd4HuV7HcHcZ2GUMAcyN9eFjtbpRCxdhMQWDVbvMZM0AWNsgi2F5ReRmUsvwwqyMaF5T6+V0aQ==
+  dependencies:
+    "@chakra-ui/vue-utils" "0.1.0-alpha.12"
+    "@emotion/cache" "^11.7.1"
+    "@emotion/css" "^11.7.1"
+    "@emotion/serialize" "^1.0.2"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    clsx "^1.1.1"
+    lodash.camelcase "^4.3.0"
+
+"@chakra-ui/[email protected]":
+  version "0.1.0-alpha.12"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/vue-utils/-/vue-utils-0.1.0-alpha.12.tgz#d0cd4de1688d07452d82e7055891a9fefbbe0f11"
+  integrity sha512-nANxYyZbA3lbSlGVZJNLb1T6O8nlSa6tgk9N31xvCzKvttFgDp/KOXxodDQaK+YwwpzU1qrSHzy6IDf6VKP/wQ==
+  dependencies:
+    "@chakra-ui/utils" "^1.9.1"
+    css-box-model "1.2.1"
+    lodash.mergewith "^4.6.2"
+    object-assign "^4.1.1"
+
 "@changesets/apply-release-plan@^5.0.4":
   version "5.0.4"
   resolved "https://registry.yarnpkg.com/@changesets/apply-release-plan/-/apply-release-plan-5.0.4.tgz#fefffecf73b59dbee7ae905b3c6a2e64c489f0cb"
@@ -1848,6 +1872,11 @@
   resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af"
   integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==
 
+"@emotion/utils@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.1.0.tgz#86b0b297f3f1a0f2bdb08eeac9a2f49afd40d0cf"
+  integrity sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ==
+
 "@emotion/weak-memoize@^0.2.5":
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"