refactor(system): extract style attrs form isStyleProp func

Author: codebender828

packages/system/package.json

@@ -20,7 +20,7 @@
     "watch:types": "cross-env tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch --incremental"
   },
   "dependencies": {
-    "@chakra-ui/styled-system": "^1.4.1",
+    "@chakra-ui/styled-system": "^1.9.0",
     "@chakra-ui/vue-theme": "*",
     "@chakra-ui/vue-utils": "*",
     "@emotion/css": "^11.1.3",

packages/system/src/system.attrs.ts

@@ -2,42 +2,22 @@ import kebabCase from 'lodash.kebabcase'
 import camelCase from 'lodash.camelcase'
 import {
   propNames,
-  pseudoPropNames,
   StyleObjectOrFn,
+  isStyleProp,
 } from '@chakra-ui/styled-system'
 import { HTMLAttributes } from 'vue'
 
 export type StyleAndHTMLAttibutes = StyleObjectOrFn &
   Record<string, string | number | boolean | unknown> &
   HTMLAttributes
 
-export const baseStylePropNames = propNames.reduce(
-  (acc: StyleAndHTMLAttibutes, curr: string) => {
-    acc[curr] = true
-    acc[kebabCase(curr)] = true
-    return acc
-  },
-  {}
-)
-
-export const pseudoStylePropNames = pseudoPropNames.reduce(
-  (acc: StyleAndHTMLAttibutes, curr: string) => {
-    acc[curr] = curr
-    return acc
-  },
-  {}
-)
-
-export const allStylePropNames: StyleAndHTMLAttibutes = {
-  ...baseStylePropNames,
-  ...pseudoStylePropNames,
-}
-
 interface ExtractedStyleAttrs {
   styles: Partial<StyleAndHTMLAttibutes>
   attrs: Partial<HTMLAttributes>
 }
 
+const camelCaseCache: any = {}
+
 /** Extracts CSS style properties and HTML attributes from merged component attributs */
 export const extractStyleAttrs = <
   T extends StyleAndHTMLAttibutes,
@@ -49,10 +29,15 @@ export const extractStyleAttrs = <
   const attrs = {} as U
 
   for (const prop in styleProps) {
-    // TODO: Cache style prop names so that that camelCases is only computed once for each property
-    // TODO: Is there another way to detect
-    const _attr = (pseudoStylePropNames[prop] as string) || camelCase(prop)
-    if (_attr in allStylePropNames) {
+    const _isStyledProp = isStyleProp(prop)
+    if (_isStyledProp) {
+      let _attr: string
+      if (camelCaseCache[prop]) {
+        _attr = camelCaseCache[prop]
+      } else {
+        _attr = camelCase(prop)
+        camelCaseCache[prop] = _attr
+      }
       // @ts-expect-error Not sure how to cast returned string into typeof key of U
       styles[_attr] = styleProps[prop]
     } else {
@@ -61,6 +46,11 @@ export const extractStyleAttrs = <
     }
   }
 
+  console.log({
+    styles,
+    attrs,
+  })
+
   return {
     styles,
     attrs,