feat(system): extract attrs and props from higher-level component

Author: codebender828

package.json

@@ -19,7 +19,6 @@
     "c-alert": "yarn workspace @chakra-ui/c-alert",
     "c-box": "yarn workspace @chakra-ui/c-box",
     "c-button": "yarn workspace @chakra-ui/c-button",
-    
     "system": "yarn workspace @chakra-ui/system-vue",
     "nuxt": "yarn workspace @chakra-ui/nuxt-next"
   },
@@ -35,7 +34,10 @@
     "@typescript-eslint/eslint-plugin": "^2.34.0",
     "@typescript-eslint/parser": "4.0.1",
     "@vitejs/plugin-vue": "^1.0.6",
+    "@vue/compiler-sfc": "^3.0.5",
     "@vue/eslint-config-typescript": "^5.1.0",
+    "@vuedx/typecheck": "^0.4.1",
+    "@vuedx/typescript-plugin-vue": "^0.4.1",
     "concurrently": "^5.3.0",
     "consola": "^2.15.0",
     "cross-env": "^7.0.2",
@@ -55,9 +57,6 @@
     "recursive-readdir": "^2.2.2",
     "ts-node": "^9.0.0",
     "typescript": "^4.1.2",
-    "@vue/compiler-sfc": "^3.0.5",
-    "@vuedx/typecheck": "^0.4.1",
-    "@vuedx/typescript-plugin-vue": "^0.4.1",
     "vite": "^2.0.0-beta.12",
     "vue": "^3.0.5",
     "vue-router": "4.0.0-beta.10"
@@ -66,11 +65,15 @@
     "@chakra-ui/styled-system": "^1.4.1",
     "@emotion/css": "^11.1.3",
     "@emotion/server": "^11.0.0",
+    "@types/lodash.camelcase": "^4.3.6",
+    "@types/lodash.kebabcase": "^4.1.6",
     "@types/lodash.mergewith": "^4.6.6",
     "@types/tinycolor2": "^1.4.2",
     "change-case": "^4.1.1",
     "css-get-unit": "^1.0.1",
     "csstype": "^3.0.5",
+    "lodash.camelcase": "^4.3.0",
+    "lodash.kebabcase": "^4.1.1",
     "lodash.mergewith": "^4.6.2",
     "object-assign": "^4.1.1",
     "react": "^17.0.1",

packages/c-alert/examples/base-alert.vue

@@ -1,5 +1,14 @@
 <template>
-  <c-alert> HELLO ALERT </c-alert>
+  <c-alert
+    font-weight="bold"
+    px="4"
+    py="3"
+    bg="yellow.300"
+    aria-role="alert"
+    rounded="md"
+  >
+    HELLO ALERT
+  </c-alert>
   <p>Alert paragraph</p>
 </template>
 

packages/c-alert/src/index.ts

@@ -1,8 +1,4 @@
 import { h, defineComponent, PropType } from 'vue'
-
-import { css } from '@chakra-ui/styled-system'
-import { css as emotionCss, cx } from '@emotion/css'
-import theme from '@chakra-ui/vue-theme'
 import { chakra } from '@chakra-ui/system-vue'
 import { DOMElements } from '@chakra-ui/system-vue/dist/types/system.utils'
 
@@ -15,23 +11,12 @@ const CAlert = defineComponent({
     },
   },
   setup(props, { slots, attrs }) {
-    const alertStyles = css({
-      bg: 'blue.400',
-      p: 4,
-      color: 'white',
-      _hover: {
-        bg: 'green.400',
-      },
-    })({ theme })
-
-    const className = emotionCss(alertStyles)
-
     return () =>
       h(
         chakra[props.as],
         {
           ...attrs,
-          class: cx('chakra-alert', className),
+          class: 'chakra-alert',
           role: 'alert',
         },
         slots

packages/system/package.json

@@ -20,6 +20,8 @@
     "watch:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch"
   },
   "dependencies": {
-    "@chakra-ui/vue-styled-system": "^1.0.0"
+    "@chakra-ui/vue-styled-system": "^1.0.0",
+    "lodash.camelcase": "^4.3.0",
+    "lodash.kebabcase": "^4.1.1"
   }
 }

packages/system/src/index.ts

@@ -1,4 +1,8 @@
 import { defineComponent, h } from 'vue'
+import { css } from '@chakra-ui/styled-system'
+import theme from '@chakra-ui/vue-theme'
+import { css as _css, cx } from '@emotion/css'
+import { extractStyleAttrs } from './system.attrs'
 import { domElements, DOMElements } from './system.utils'
 
 /**
@@ -15,12 +19,18 @@ export const chakra: IChakraFactory = (
     inheritAttrs: false,
     props: componentProps,
     setup(props, { slots, attrs }) {
+      const { class: inheritedClass, ...rest } = attrs
+      const { styles, attrs: _attrs } = extractStyleAttrs(rest)
+
+      console.log(styles, attrs)
+      const className = _css(css(styles)({ theme }))
       return () =>
         h(
           tag,
           {
+            class: cx(inheritedClass as string, className),
             ...props,
-            ...attrs,
+            ..._attrs,
           },
           slots
         )

packages/system/src/system.attrs.ts

@@ -0,0 +1,50 @@
+import kebabCase from 'lodash.kebabcase'
+import camelCase from 'lodash.camelcase'
+import { propNames, StyleObjectOrFn } from '@chakra-ui/styled-system'
+import { HTMLAttributes } from 'vue'
+
+type StyleAndHTMLAttibutes = StyleObjectOrFn &
+  Record<string, string | number | boolean | unknown> &
+  HTMLAttributes
+
+export const allStylePropNames = propNames.reduce(
+  (acc: StyleAndHTMLAttibutes, curr: string) => {
+    acc[curr] = true
+    acc[kebabCase(curr)] = true
+    return acc
+  },
+  {}
+)
+
+interface ExtractedStyleAttrs {
+  styles: Partial<StyleAndHTMLAttibutes>
+  attrs: Partial<HTMLAttributes>
+}
+
+/** Extracts CSS style properties and HTML attributes from merged component attributs */
+export const extractStyleAttrs = <
+  T extends StyleAndHTMLAttibutes,
+  U extends Partial<HTMLAttributes> | Record<string, string | number | boolean>
+>(
+  styleProps: T
+): ExtractedStyleAttrs => {
+  const styles = {} as T
+  const attrs = {} as U
+
+  for (const prop in styleProps) {
+    // TODO: Cache style prop names so that that camelCases is only computed once for eahc property
+    const _attr = camelCase(prop)
+    if (_attr in allStylePropNames) {
+      // @ts-expect-error Not sure how to cast returned string into typeof key of U
+      styles[_attr] = styleProps[prop]
+    } else {
+      // @ts-expect-error Not sure how to cast returned string into typeof key of U
+      attrs[prop] = styleProps[prop]
+    }
+  }
+
+  return {
+    styles,
+    attrs,
+  }
+}