Merge pull request #274 from chakra-ui/develop

release: `@chakra-ui/[email protected]`

Author: codebender828

.changeset/beige-ants-beg.md

@@ -0,0 +1,21 @@
+---
+"@chakra-ui/c-visually-hidden": patch
+"@chakra-ui/c-close-button": patch
+"@chakra-ui/c-accordion": patch
+"@chakra-ui/c-pin-input": patch
+"@chakra-ui/c-checkbox": patch
+"@chakra-ui/c-skip-nav": patch
+"@chakra-ui/c-avatar": patch
+"@chakra-ui/c-popper": patch
+"@chakra-ui/c-input": patch
+"@chakra-ui/c-code": patch
+"@chakra-ui/c-icon": patch
+"@chakra-ui/vue-layout": patch
+"@chakra-ui/vue-styled": patch
+"@chakra-ui/vue-system": patch
+"@chakra-ui/c-tag": patch
+"@chakra-ui/nuxt-next": patch
+"@chakra-ui/vue-next": patch
+---
+
+Normalize emotion cache options

.changeset/blue-penguins-swim.md

@@ -0,0 +1,10 @@
+---
+"@chakra-ui/c-visually-hidden": patch
+"@chakra-ui/vue-accessibilty": patch
+"@chakra-ui/vue-styled": patch
+"@chakra-ui/vue-system": patch
+"@chakra-ui/nuxt-next": patch
+"@chakra-ui/vue-next": patch
+---
+
+Resolve @emotion/css package dependency

.github/composite-actions/install/action.yml

@@ -49,6 +49,6 @@ runs:
     - name: Install dependencies
       shell: bash
       run: |
-        pnpm install --frozen-lockfile
+        pnpm install --no-frozen-lockfile
         npx cypress verify
         npx cypress info

@types/components.d.ts

@@ -6,7 +6,7 @@
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2023-02-25T05:49:19.660Z
+ * This file was generated on 2023-02-25T15:12:13.221Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"

components.d.ts

@@ -6,7 +6,7 @@
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2023-02-25T05:49:19.660Z
+ * This file was generated on 2023-02-25T15:12:13.221Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"

modules/nuxt/src/module.ts

@@ -8,12 +8,14 @@ import {
 import type * as NuxtSchema from "@nuxt/schema"
 import type * as Theme from "@chakra-ui/theme"
 import type * as ChakraUI from "@chakra-ui/vue-next"
-import * as Chakra from "@chakra-ui/vue-next"
+import {
+  ChakraComponents,
+  extendTheme as _extendTheme,
+} from "@chakra-ui/vue-next"
 import mergeWith from "lodash.mergewith"
 import { defu } from "defu"
 
-const { extendTheme: _extendTheme } = Chakra
-const ChakraPlugin = Chakra.default
+// const { extendTheme: _extendTheme } = Chakra
 
 /** Chakra UI Vue SSR Context State */
 export interface ChakraUISSRContext {
@@ -77,26 +79,29 @@ export default defineNuxtModule<ChakraModuleOptions>({
 
     // Transpile
     nuxt.options.build.transpile.push("@chakra-ui/vue-next")
+    nuxt.options.build.transpile.push("@emotion/server")
+    nuxt.options.build.transpile.push("@emotion/css")
+    nuxt.options.build.transpile.push("@emotion/css/create-instance")
 
     // Auto-import components
-    for (const component in Chakra) {
+    for (const component in ChakraComponents) {
       /**
        * Group of strict checks to make sure that
        * we only generate types for components.
        */
       if (
         component.startsWith("C") &&
         // @ts-ignore
-        Chakra[component]?.name &&
+        ChakraComponents[component]?.name &&
         // @ts-ignore
-        Chakra[component]?.setup &&
+        ChakraComponents[component]?.setup &&
         // @ts-ignore
-        typeof Chakra[component]?.setup === "function"
+        typeof ChakraComponents[component]?.setup === "function"
       ) {
         addComponent({
           name: component,
           // @ts-ignore
-          export: Chakra[component]?.name,
+          export: ChakraComponents[component]?.name,
           filePath: "@chakra-ui/vue-next",
         })
       }
@@ -121,7 +126,13 @@ export default defineNuxtModule<ChakraModuleOptions>({
     const viteConfig = nuxt.options.vite || {}
     const extendedViteConfigOptions = {
       optimizeDeps: {
-        include: ["lodash.mergewith", "lodash.camelcase", "lodash.memoize"],
+        include: [
+          "lodash.mergewith",
+          "lodash.camelcase",
+          "lodash.memoize",
+          "@emotion/server",
+          "@emotion/css",
+        ],
       },
     }
     const finalViteConfig = defu(viteConfig, extendedViteConfigOptions)

modules/nuxt/src/runtime/chakra.ts

@@ -1,13 +1,11 @@
 import type * as NuxtAppTypes from "nuxt/app"
 import { defineNuxtPlugin, useAppConfig } from "#imports"
-import Chakra, {
-  chakra,
+import {
   cookieStorageManagerSSR,
-  extendChakra,
   ColorModeConstants,
   extendTheme,
   ColorModeScriptProps,
-  domElements,
+  createChakra,
 } from "@chakra-ui/vue-next"
 import { parseCookies } from "h3"
 import type { ChakraModuleOptions } from "../module"
@@ -45,36 +43,30 @@ export default defineNuxtPlugin((nuxtApp) => {
     }
   }
 
-  // Install plugin
-  app.use(
-    // TODO: Fix type for Chakra plugin
-    Chakra as any,
-    extendChakra({
-      ...(chakraConfig.emotionCacheOptions && {
-        emotionCacheOptions: chakraConfig.emotionCacheOptions,
-      }),
-      ...(chakraConfig.cssReset && {
-        cssReset: chakraConfig.cssReset,
-      }),
-      extendTheme: extendTheme({
-        ...(chakraConfig.extendTheme && chakraConfig.extendTheme),
-        config: {
-          ...(chakraConfig.extendTheme?.config && {
-            extendTheme: chakraConfig.extendTheme.config,
-          }),
-          initialColorMode: isBrowser
-            ? window.$chakraSSRContext?.theme?.ssrColorMode
-            : ssrColorMode,
-        },
-      }),
-      colorModeManager: cookieStorageManagerSSR(
-        ColorModeConstants.CookieStorageKey
-      ),
-      icons: chakraConfig.icons,
-    })
-  )
-
-  domElements.forEach((tag) => {
-    app.component(`chakra.${tag}`, chakra(tag))
+  const chakra = createChakra({
+    ...(chakraConfig.emotionCacheOptions && {
+      emotionCacheOptions: chakraConfig.emotionCacheOptions,
+    }),
+    ...(chakraConfig.cssReset && {
+      cssReset: chakraConfig.cssReset,
+    }),
+    extendTheme: extendTheme({
+      ...(chakraConfig.extendTheme && chakraConfig.extendTheme),
+      config: {
+        ...(chakraConfig.extendTheme?.config && {
+          extendTheme: chakraConfig.extendTheme.config,
+        }),
+        initialColorMode: isBrowser
+          ? window.$chakraSSRContext?.theme?.ssrColorMode
+          : ssrColorMode,
+      },
+    }),
+    colorModeManager: cookieStorageManagerSSR(
+      ColorModeConstants.CookieStorageKey
+    ),
+    icons: chakraConfig.icons,
   })
+
+  // Install plugin
+  app.use(chakra)
 })

modules/nuxt/src/runtime/emotion.client.ts

@@ -1,4 +1,4 @@
-import { hydrate } from "@emotion/css"
+import { hydrate } from "@chakra-ui/vue-system"
 import { defineNuxtPlugin } from "#imports"
 
 export default defineNuxtPlugin((_) => {

modules/nuxt/src/runtime/emotion.server.ts

@@ -1,6 +1,10 @@
-import { extractCritical } from "@emotion/server"
 import { NitroApp } from "nitropack"
 
+import createEmotionServer from "@emotion/server/create-instance"
+import { cache } from "@chakra-ui/vue-system"
+
+const { extractCritical } = createEmotionServer(cache)
+
 /**
  * Why are we declaring types for  `defineNitroPlugin`?
  *

package.json

@@ -82,7 +82,6 @@
     "@chakra-ui/utils": "2.0.15",
     "@chakra-ui/vue-auto-import": "workspace:*",
     "@chakra-ui/vue-next": "workspace:*",
-    "@chakra-ui/vue-styled": "workspace:*",
     "@chakra-ui/vue-system": "workspace:*",
     "@chakra-ui/vue-test-utils": "workspace:*",
     "@changesets/changelog-github": "^0.3.0",