Merge pull request #19 from cssinjs/feature/curry

Implement currying interface, resolve #18
cssinjs · May 9, 2017 · c3f6f11 · c3f6f11
2 parents e80e66a + 9724370
commit c3f6f11
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -25,13 +25,20 @@ Install peer dependencies `react` and `react-dom` in your project.
 ```js
 import styled from 'styled-jss'
 
-const Button = styled('button', {
+const Button = styled('button')({
   fontSize: 12,
   color: (props) => props.theme.textColor
 })
 
+// You can also use curried interface this way.
+const div = styled('div')
+
+const Container = div({
+  padding: 20
+})
+
 // Composition.
-const PrimaryButton = styled(Button, {
+const PrimaryButton = styled(Button)({
   color: 'red'
 })
 ```
@@ -59,14 +66,14 @@ const styled = Styled({
   }
 })
 
-const NormalButton = styled('button', {
+const NormalButton = styled('button')({
   composes: '$baseButton',
   border: [1, 'solid', 'grey'],
   color: 'black'
 })
 
 // Composition - same way.
-const PrimaryButton = styled(NormalButton, {
+const PrimaryButton = styled(NormalButton)({
   color: 'red'
 })
 

diff --git a/src/createStyled.js b/src/createStyled.js
@@ -40,7 +40,8 @@ const createStyled = (jss: Function) => (baseStyles: BaseStylesType = {}): Style
   }
 
   return Object.assign((
-    tagNameOrStyledElement: TagNameOrStyledElementType,
+    tagNameOrStyledElement: TagNameOrStyledElementType
+  ) => (
     ownStyle: ComponentStyleType
   ): StyledElementType => {
     const {tagName, style} = getStyledArgs(tagNameOrStyledElement)

diff --git a/src/tests/App.jsx b/src/tests/App.jsx
@@ -2,31 +2,35 @@ import React from 'react'
 import type {StyledType} from '../types'
 
 export default (styled: StyledType) => {
-  const App = styled('div', {
+  const App = styled('div')({
     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', {
+  const Title = styled('h1')({
     color: 'red',
   })
 
-  const Button = styled('button', {
+  // function value
+  const Button = styled('button')({
     margin: ({margin = 0}) => margin,
   })
 
-
   return () => (
     <App>
       <Header>