Fix function values in composition

Author: lttb

src/tests/__snapshots__/functional.spec.jsx.snap

@@ -135,6 +135,7 @@ exports[`functional tests composable styles should merge and compose all styles
   padding: 20px;
 }
 .button-2-id {
+  font-weight: 400;
   border-radius: 100%;
   color: red;
   background-color: green;
@@ -147,9 +148,11 @@ exports[`functional tests composable styles should merge and compose all styles
   padding: 20px;
 }
 .button-2-id {
+  font-weight: 400;
   border-radius: 100%;
   color: black;
   background-color: white;
+  font-size: 15px;
 }"
 `;
 

src/tests/functional.spec.jsx

@@ -281,11 +281,11 @@ describe('functional tests', () => {
       const Button = styled('button')(
         (props => props.theme === 'action' && ({
           color: 'red',
-          'background-color': 'green'
+          backgroundColor: 'green'
         })),
         (props => props.theme === 'normal' && ({
           color: 'white',
-          'background-color': 'black'
+          backgroundColor: 'black'
         })),
         (() => ({
           margin: 20,
@@ -312,26 +312,27 @@ describe('functional tests', () => {
       const theme = props => ({
         action: {
           color: 'red',
-          'background-color': 'green',
+          backgroundColor: 'green',
         },
         normal: {
           color: 'black',
-          'background-color': 'white',
+          backgroundColor: 'white',
         },
       })[props.theme]
 
       const Button = styled('button')({
         margin: 20,
-        padding: 20
-      }, round, theme)
+        padding: 20,
+        fontWeight: () => 400,
+      }, round, theme, {fontSize: ({fontSize}) => fontSize})
 
       const wrapper = mount(
         <Button theme="action" round />
       )
       const {sheet} = styled
 
       assertSheet(sheet)
-      wrapper.setProps({theme: 'normal', round: false})
+      wrapper.setProps({theme: 'normal', fontSize: 15, round: false})
       assertSheet(sheet)
       wrapper.unmount()
     })

src/types/index.js

@@ -3,7 +3,7 @@ export type JssStyle = Object
 export type JssSheet = Object
 
 export type BaseStylesType = JssStyles
-export type ComponentStyleType = JssStyle | (props: Object) => ?JssStyle
+export type ComponentStyleType = JssStyle
 export type StyledType = Function & {
   mountSheet: Function,
   styles: JssStyles

src/utils/getSeparatedStyles.js

@@ -5,14 +5,38 @@ import {type ComponentStyleType} from '../types'
 const isObject = value =>
   typeof value === 'object' && value !== null && !Array.isArray(value)
 
-type separatedStyles = {dynamicStyle?: ComponentStyleType, staticStyle?: Object}
+const separateStyles = (styles: Object): {
+  dynamicStyle?: ComponentStyleType,
+  staticStyle?: ComponentStyleType
+} => {
+  const result = {}
+  const keys = Object.keys(styles)
+
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i]
+    const value = styles[key]
+    const itemStyles = Object.create(null)
+
+    if (typeof value === 'function' || isObservable(value)) itemStyles.dynamicStyle = value
+    else if (isObject(value)) Object.assign(itemStyles, separateStyles(value))
+    else itemStyles.staticStyle = value
+
+    for (const styleType in itemStyles) {
+      result[styleType] = result[styleType] || {}
+      result[styleType][key] = itemStyles[styleType]
+    }
+  }
+
+  return result
+}
 
 /**
  * Extracts static and dynamic styles objects separately
  */
-const getSeparatedStyles = (...initialStyles: ComponentStyleType[]): separatedStyles => {
-  const result = {}
-
+const getSeparatedStyles = (...initialStyles: ComponentStyleType[]): {
+  dynamicStyle?: ComponentStyleType | (props: Object) => ?ComponentStyleType,
+  staticStyle?: ComponentStyleType,
+} => {
   const styles = {}
   const fns = []
 
@@ -27,34 +51,25 @@ const getSeparatedStyles = (...initialStyles: ComponentStyleType[]): separatedSt
     }
   }
 
-  const keys = Object.keys(styles)
-
-  for (let i = 0; i < keys.length; i++) {
-    const key = keys[i]
-    const value = styles[key]
-    const itemStyles = Object.create(null)
-
-    if (typeof value === 'function' || isObservable(value)) itemStyles.dynamicStyle = value
-    else if (isObject(value)) Object.assign(itemStyles, getSeparatedStyles(value))
-    else itemStyles.staticStyle = value
-
-    for (const styleType in itemStyles) {
-      result[styleType] = result[styleType] || {}
-      result[styleType][key] = itemStyles[styleType]
-    }
-  }
+  const result = separateStyles(styles)
 
   if (fns.length) {
-    const {dynamicStyle} = result
+    const {dynamicStyle = {}} = result
 
     result.dynamicStyle = (props) => {
       const fnObjects = []
+      const dynamicResult = {}
 
       for (let i = 0; i < fns.length; i++) {
         fnObjects.push(fns[i](props))
       }
 
-      return Object.assign({}, dynamicStyle, ...fnObjects)
+      const keys = Object.keys(dynamicStyle)
+      for (let i = 0; i < keys.length; i++) {
+        dynamicResult[keys[i]] = dynamicStyle[keys[i]](props)
+      }
+
+      return Object.assign(dynamicResult, ...fnObjects)
     }
   }