fix(wip-styled): use emotion theme provider

Author: codebender828

packages/styled/src/theming.tsx

@@ -17,6 +17,7 @@ let createCacheWithTheme = /* #__PURE__ */ weakMemoize(outerTheme => {
 function EmotionThemeProvider (theme: object | ((Obj: object) => Object)) {
   let _theme = useEmotionTheme()
   if (theme !== _theme) {
+    // @ts-ignore
     _theme = createCacheWithTheme(_theme)(theme)
   }
   _EmotionThemeProvider(_theme)

packages/styled/tests/__snapshots__/styled.test.tsx.snap

@@ -155,7 +155,6 @@ exports[`styled composition 2`] = `
 
 <h1
     class="legacy__class emotion-0"
-    scale="2"
   >
     hello world final
   </h1>
@@ -203,7 +202,6 @@ exports[`styled function in expression 1`] = `
 
 <h1
     class="legacy__class emotion-0"
-    scale="2"
   >
     hello world
   </h1>
@@ -226,8 +224,6 @@ exports[`styled glamorous style api & composition 1`] = `
 
 <h1
     class="emotion-0"
-    flex="1"
-    fontsize="20"
   >
     hello world
   </h1>
@@ -255,7 +251,6 @@ exports[`styled handles more than 10 dynamic properties 1`] = `
 
 <h1
     class="legacy__class emotion-0"
-    theme="[object Object]"
   >
     hello world
   </h1>
@@ -490,7 +485,6 @@ exports[`styled objects 1`] = `
 
 <h1
     class="emotion-0"
-    display="flex"
   >
     hello world
   </h1>
@@ -522,16 +516,16 @@ exports[`styled prop filtering 1`] = `
 <a
     a="true"
     aria-label="some label"
+    arialabel="some label"
     b="true"
     class="emotion-0"
     cool="true"
     data-wow="value"
+    datawow="value"
     filtering="true"
     href="link"
     is="true"
-    m="3"
     prop="true"
-    pt="4"
     wow="true"
   >
     hello world

packages/test-utils/src/render.ts

@@ -1,5 +1,5 @@
-import { ComponentOptions } from "@vue/runtime-core"
 import theme from "@chakra-ui/vue-theme"
+import { EmotionThemeContextSymbol } from "@chakra-ui/vue-styled"
 import "@testing-library/jest-dom"
 import "@testing-library/jest-dom/extend-expect"
 import * as vtl from "@testing-library/vue"
@@ -14,6 +14,7 @@ const useDefaultProviders = () => {
   provide("$chakraTheme", theme)
   provide("$chakraColorMode", "light")
   provide("$chakraIcons", {})
+  provide(EmotionThemeContextSymbol, theme)
 }
 
 export type TestRenderProps = {