refactor(components): use composeSystem over systemProps function

Author: codebender828

packages/chakra-ui-core/src/utils/components.js

@@ -1,7 +1,7 @@
 import { css } from 'emotion'
 import __css from '@styled-system/css'
 import { parsePseudoStyles } from '../CPseudoBox/utils'
-import { systemProps } from './styled-system'
+import { composeSystem } from './styled-system'
 import { hasOwn, extractChakraAttrs } from './object'
 
 export const isVueComponent = (value) => {
@@ -74,14 +74,14 @@ export const createStyledAttrsMixin = (name, isPseudo) => ({
       const { styleAttrs } = this.splitProps
       if (isPseudo) {
         const { pseudoStyles, baseStyles } = parsePseudoStyles(styleAttrs)
-        const _baseStyles = systemProps({ ...baseStyles, theme: this.theme })
+        const _baseStyles = composeSystem(baseStyles, this.theme)
         const _pseudoStyles = __css(pseudoStyles)(this.theme)
         return css({
           ..._baseStyles,
           ..._pseudoStyles
         })
       }
-      const boxStylesObject = systemProps({ ...styleAttrs, theme: this.theme })
+      const boxStylesObject = composeSystem(styleAttrs, this.theme)
       return css(boxStylesObject)
     },
     /** Computed attributes object */

packages/chakra-ui-core/src/utils/styled-system.js

@@ -1,4 +1,5 @@
 import { background, border, color, borderRadius, flexbox, grid, layout, position, shadow, space, typography, compose } from 'styled-system'
+import _css from '@styled-system/css'
 import { propsConfig } from '../config/props'
 
 /**
@@ -78,3 +79,9 @@ export const systemProps = compose(
   truncate,
   clamp
 )
+
+/** Composes all styled-system css and theme props and returns resolved styles */
+export const composeSystem = (props = {}, theme = {}) => ({
+  ..._css(props)(theme),
+  ...systemProps({ ...props, theme })
+})