feat(wip-styled): completed tests for styled function api

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-02-15T20:12:51.041Z
+ * This file was generated on 2022-03-03T13:59:03.450Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"
@@ -191,8 +191,8 @@ declare module "@vue/runtime-core" {
   /* Component custom props types for JSX and TSX auto complete */
   export interface ComponentCustomProps
     extends JsxComponentCustomProps,
+      ComponentCustomProps,
       ChakraProps {
-    onClick?: () => any
     vSlots?: {
       [eleName: string]: JSX.Element
     }

package.json

@@ -154,9 +154,9 @@
     "tinycolor2": "^1.4.2",
     "ts-jest": "^26.5.0",
     "ts-node": "^9.0.0",
-    "typescript": "^4.5.4",
+    "typescript": "^4.6.2",
     "unplugin-vue-components": "^0.14.0",
-    "vite": "^2.7.4",
+    "vite": "^2.8.6",
     "vite-plugin-mdx-vue": "^1.6.0",
     "vite-plugin-pages": "^0.20.1",
     "vite-plugin-vue-layouts": "^0.5.0",

packages/core/package.json

@@ -46,9 +46,11 @@
     "@chakra-ui/vue-a11y": "0.1.0-alpha.9",
     "@chakra-ui/vue-composables": "0.1.0-alpha.9",
     "@chakra-ui/vue-layout": "0.1.0-alpha.11",
+    "@chakra-ui/vue-styled": "0.0.0-alpha.0",
     "@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"
+    "@chakra-ui/vue-theme-tools": "0.1.0-alpha.10",
+    "@emotion/cache": "^11.7.1"
   },
   "devDependencies": {
     "vue": "^3.2.29"
@@ -59,4 +61,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

packages/core/src/helpers/plugin.types.ts

@@ -1,6 +1,7 @@
 import { ColorModeRef } from "@chakra-ui/c-color-mode"
 import { UnwrapRef } from "vue"
 import { ThemeOverride } from "../extend-theme"
+import { Options } from "@emotion/cache"
 
 interface ExtendIconsPath {
   path: string
@@ -17,4 +18,5 @@ export interface ChakraPluginOptions {
   extendTheme?: ThemeOverride
   icons?: IconsOptions
   defaultColorMode?: UnwrapRef<ColorModeRef>
+  emotionCacheOptions?: Options
 }

packages/core/src/index.ts

@@ -3,18 +3,30 @@ import defaultTheme from "@chakra-ui/vue-theme"
 import type { ColorModeRef } from "@chakra-ui/c-color-mode"
 import { toCSSVar, WithCSSVar } from "@chakra-ui/styled-system"
 import { chakra, injectGlobal } from "@chakra-ui/vue-system"
+import {
+  EmotionThemeContextSymbol,
+  EmotionCacheInjectionSymbol,
+} from "@chakra-ui/vue-styled"
+import createCache from "@emotion/cache"
 import internalIcons from "./icon.internals"
 import { extendTheme, ThemeOverride } from "./extend-theme"
 import { MergedIcons, parseIcons } from "./parse-icons"
 import { injectResetStyles, injectThemeGlobalStyles } from "./helpers/css-reset"
 import { mode } from "@chakra-ui/vue-theme-tools"
 import { ChakraPluginOptions } from "./helpers/plugin.types"
 
+/**
+ * 1. Support passing cache options from plugin
+ * 2. Provide emotion theme directly from plugin
+ * 3.
+ */
+
 /**
  * Helper function to extend Chakra plugin with options
  * It just returns its arguments with typescript types added
  */
-export function chakraOptions(
+
+export function extendChakra(
   options: ChakraPluginOptions = { cssReset: true }
 ) {
   return options
@@ -56,8 +68,16 @@ const ChakraUIVuePlugin: Plugin = {
 
     // Bind theme to application global properties and provide to application
     app.config.globalProperties.$chakraTheme = computedTheme.value
+    app.config.globalProperties.$chakraTheme = computedTheme.value
+    app.provide(EmotionThemeContextSymbol, computedTheme.value)
     app.provide("$chakraTheme", computedTheme.value as ThemeOverride)
 
+    // Provide emotion cache
+    if (options.emotionCacheOptions) {
+      const emotionCache = createCache(options.emotionCacheOptions)
+      app.provide(EmotionCacheInjectionSymbol, emotionCache)
+    }
+
     libraryIcons = parseIcons(libraryIcons)
 
     // Merge internal icons and library icons

packages/layout/src/kbd.tsx

@@ -1,11 +1,10 @@
-import { vueThemingProps } from "@chakra-ui/vue-utils"
+import { vueThemingProps, extractStyleAttrs } from "@chakra-ui/vue-utils"
 import {
   chakra,
   DOMElements,
   ThemingProps,
   useStyleConfig,
   HTMLChakraProps,
-  extractStyleAttrs,
   ComponentWithProps,
   DeepPartial,
 } from "@chakra-ui/vue-system"

packages/styled/examples/styled.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <div>Hello world</div>
+    <Button>Button</Button>
+    <chakra.button
+      aria-label="Dope button"
+      :bg="['pink.500', 'yellow.500', 'orange.500', 'green.500']"
+      color="white"
+      px="4"
+      py="2"
+      @click="handleClick"
+      :layer-style="{
+        bg: 'black',
+        color: 'white',
+      }"
+    >
+      Hot pink
+    </chakra.button>
+  </div>
+</template>
+
+<script lang="tsx" setup>
+import { defineComponent, h } from "vue"
+import styled from "../src"
+import { _chakra as chakra } from "@chakra-ui/vue-system"
+
+const Button = chakra("button", {
+  baseStyle: {
+    bg: "blue.700",
+    color: "white",
+    fontWeight: "bold",
+    px: 4,
+    py: 3,
+  },
+})
+
+function handleClick(e: MouseEvent) {
+  console.log("Clicked", e)
+}
+
+const CButton = defineComponent({
+  setup() {
+    return () => (
+      <Button height="32px" onClick={handleClick}>
+        Main Button
+      </Button>
+    )
+  },
+})
+</script>

packages/styled/package.json

@@ -27,7 +27,11 @@
     "@emotion/utils": "^1.0.0",
     "@emotion/weak-memoize": "^0.2.5",
     "clsx": "^1.1.1",
-    "lodash.camelcase": "^4.3.0"
+    "lodash.camelcase": "^4.3.0",
+    "lodash.memoize": "^4.1.2"
+  },
+  "devDependencies": {
+    "@types/lodash.memoize": "^4.1.6"
   },
   "peerDependencies": {
     "vue": "^3.2.31"

packages/styled/src/cache.tsx

@@ -11,7 +11,7 @@ import {
   SetupContext
 } from "vue"
 
-const [EmotionCacheProvider, useEmotionCache] = createContext<EmotionCache>({
+const [EmotionCacheProvider, useEmotionCache, EmotionCacheInjectionSymbol] = createContext<EmotionCache>({
   strict: false,
   name: "EmotionCacheContext",
 })
@@ -50,4 +50,4 @@ if (canUseDOM()) {
   }
 }
 
-export { withEmotionCache, EmotionCacheProvider }
+export { withEmotionCache, EmotionCacheProvider, EmotionCacheInjectionSymbol }

packages/styled/src/index.ts renamed to packages/styled/src/index.tsx

@@ -2,6 +2,7 @@ import { createStyled } from "./styled"
 import { tags } from "./tags"
 
 export * from "./cache"
+export * from "./theming"
 
 // bind it to avoid mutating the original function
 const styled = createStyled.bind()
@@ -11,4 +12,4 @@ tags.forEach((tagName) => {
   styled[tagName] = styled(tagName)
 })
 
-export default styled
+export default styled