fix/nuxt module cache

.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",

packages/c-accordion/src/index.tsx

@@ -4,7 +4,6 @@ export {
   CAccordionIcon,
   CAccordionItem,
   CAccordionPanel,
-  ExpandedValues,
 } from "./accordion"
 
 export type {
@@ -15,4 +14,5 @@ export type {
   CAccordionItemProps,
   CAccordionPanelProps,
   CAccordionProps,
+  ExpandedValues,
 } from "./accordion"

packages/c-accordion/tests/__snapshots__/accordion.test.tsx.snap

@@ -3,15 +3,15 @@
 exports[`<CAccordion /> component should render properly 1`] = `
 <DocumentFragment>
   <div
-    class="css-rcmwhh"
+    class="chakra-rcmwhh"
   >
     <div
       data-part="root"
       data-scope="accordion"
       id="accordion:EMPTY_STRING"
     >
       <div
-        class="css-17mg6aq"
+        class="chakra-17mg6aq"
         data-part="item"
         data-scope="accordion"
         id="accordion:EMPTY_STRING:item:accordion-item-undefined"
@@ -20,7 +20,7 @@ exports[`<CAccordion /> component should render properly 1`] = `
           aria-controls="accordion:EMPTY_STRING:content:accordion-item-undefined"
           aria-disabled="false"
           aria-expanded="false"
-          class="css-1oqzxfr"
+          class="chakra-1oqzxfr"
           data-ownedby="accordion:EMPTY_STRING"
           data-part="trigger"
           data-scope="accordion"
@@ -44,7 +44,7 @@ exports[`<CAccordion /> component should render properly 1`] = `
           </c-v-stack>
           <svg
             aria-hidden="true"
-            class="chakra-icon css-iyv31w"
+            class="chakra-icon chakra-iyv31w"
             element="c-accordion-item"
             focusable="false"
             viewBox="0 0 24 24"
@@ -56,12 +56,12 @@ exports[`<CAccordion /> component should render properly 1`] = `
           </svg>
         </button>
         <div
-          class="css-0"
+          class="chakra-0"
           style="transform: translateZ(0px); overflow: hidden; height: 0px; opacity: 0;"
         >
           <div
             aria-labelledby="accordion:EMPTY_STRING:trigger:accordion-item-undefined"
-            class="css-13d8nyx"
+            class="chakra-13d8nyx"
             data-part="content"
             data-scope="accordion"
             id="accordion:EMPTY_STRING:content:accordion-item-undefined"
@@ -72,7 +72,7 @@ exports[`<CAccordion /> component should render properly 1`] = `
         </div>
       </div>
       <div
-        class="css-17mg6aq"
+        class="chakra-17mg6aq"
         data-part="item"
         data-scope="accordion"
         id="accordion:EMPTY_STRING:item:accordion-item-1"
@@ -81,7 +81,7 @@ exports[`<CAccordion /> component should render properly 1`] = `
           aria-controls="accordion:EMPTY_STRING:content:accordion-item-1"
           aria-disabled="false"
           aria-expanded="false"
-          class="css-1oqzxfr"
+          class="chakra-1oqzxfr"
           data-ownedby="accordion:EMPTY_STRING"
           data-part="trigger"
           data-scope="accordion"
@@ -105,7 +105,7 @@ exports[`<CAccordion /> component should render properly 1`] = `
           </c-v-stack>
           <svg
             aria-hidden="true"
-            class="chakra-icon css-iyv31w"
+            class="chakra-icon chakra-iyv31w"
             focusable="false"
             viewBox="0 0 24 24"
           >
@@ -116,12 +116,12 @@ exports[`<CAccordion /> component should render properly 1`] = `
           </svg>
         </button>
         <div
-          class="css-0"
+          class="chakra-0"
           style="transform: translateZ(0px); overflow: hidden; height: 0px; opacity: 0;"
         >
           <div
             aria-labelledby="accordion:EMPTY_STRING:trigger:accordion-item-1"
-            class="css-13d8nyx"
+            class="chakra-13d8nyx"
             data-part="content"
             data-scope="accordion"
             id="accordion:EMPTY_STRING:content:accordion-item-1"
@@ -132,7 +132,7 @@ exports[`<CAccordion /> component should render properly 1`] = `
         </div>
       </div>
       <div
-        class="css-17mg6aq"
+        class="chakra-17mg6aq"
         data-part="item"
         data-scope="accordion"
         id="accordion:EMPTY_STRING:item:accordion-item-2"
@@ -141,7 +141,7 @@ exports[`<CAccordion /> component should render properly 1`] = `
           aria-controls="accordion:EMPTY_STRING:content:accordion-item-2"
           aria-disabled="false"
           aria-expanded="false"
-          class="css-1oqzxfr"
+          class="chakra-1oqzxfr"
           data-ownedby="accordion:EMPTY_STRING"
           data-part="trigger"
           data-scope="accordion"
@@ -165,7 +165,7 @@ exports[`<CAccordion /> component should render properly 1`] = `
           </c-v-stack>
           <svg
             aria-hidden="true"
-            class="chakra-icon css-iyv31w"
+            class="chakra-icon chakra-iyv31w"
             focusable="false"
             viewBox="0 0 24 24"
           >
@@ -176,12 +176,12 @@ exports[`<CAccordion /> component should render properly 1`] = `
           </svg>
         </button>
         <div
-          class="css-0"
+          class="chakra-0"
           style="transform: translateZ(0px); overflow: hidden; height: 0px; opacity: 0;"
         >
           <div
             aria-labelledby="accordion:EMPTY_STRING:trigger:accordion-item-2"
-            class="css-13d8nyx"
+            class="chakra-13d8nyx"
             data-part="content"
             data-scope="accordion"
             id="accordion:EMPTY_STRING:content:accordion-item-2"