Implement currying interface, resolve #18

README.md

@@ -30,6 +30,18 @@ const Button = styled('button', {
   color: (props) => props.theme.textColor
 })
 
+// Curried interface.
+const Button = styled('button')({
+  fontSize: 12,
+  color: (props) => props.theme.textColor
+})
+
+const div = styled('div')
+
+const Container = div({
+  padding: 20
+})
+
 // Composition.
 const PrimaryButton = styled(Button, {
   color: 'red'

src/createStyled.js

@@ -20,6 +20,8 @@ const getStyledArgs = (
   return {tagName, style}
 }
 
+const curry1 = (fn: Function) => (a: *, b?: *) => (b !== undefined ? fn(a, b) : b2 => fn(a, b2))
+
 const createStyled = (jss: Function) => (baseStyles: BaseStylesType = {}): StyledType => {
   let staticSheet
   let dynamicSheet
@@ -39,15 +41,15 @@ const createStyled = (jss: Function) => (baseStyles: BaseStylesType = {}): Style
     return {staticSheet, dynamicSheet}
   }
 
-  return Object.assign((
+  return Object.assign(curry1((
     tagNameOrStyledElement: TagNameOrStyledElementType,
     ownStyle: ComponentStyleType
   ): StyledElementType => {
     const {tagName, style} = getStyledArgs(tagNameOrStyledElement)
     const elementStyle = {...style, ...ownStyle}
 
     return styled({tagName, baseStyles, elementStyle, mountSheets})
-  }, {mountSheets, styles: baseStyles})
+  }), {mountSheets, styles: baseStyles})
 }
 
 export default createStyled

src/tests/App.jsx

@@ -6,22 +6,27 @@ export default (styled: StyledType) => {
     margin: 50,
   })
 
-  const Header = styled('header', {
+  const Header = styled('header')({
     padding: 10,
   })
 
-  const Section = styled('section', {
+  // curried
+  const section = styled('section')
+
+  const Section = section({
     color: 'red',
   })
 
-  const AnotherSection = styled(Section, {
+  // composition
+  const AnotherSection = styled(Section)({
     color: 'yellow',
   })
 
   const Title = styled('h1', {
     color: 'red',
   })
 
+  // function value
   const Button = styled('button', {
     margin: ({margin = 0}) => margin,
   })