Skip to content

Commit

Permalink
Breaking change: keep just only curried interface
Browse files Browse the repository at this point in the history
  • Loading branch information
lttb committed May 9, 2017
1 parent 531c927 commit 9724370
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 18 deletions.
13 changes: 4 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,25 +25,20 @@ Install peer dependencies `react` and `react-dom` in your project.
```js
import styled from 'styled-jss'

const Button = styled('button', {
fontSize: 12,
color: (props) => props.theme.textColor
})

// Curried interface.
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'
})
```
Expand Down Expand Up @@ -71,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'
})

Expand Down
9 changes: 4 additions & 5 deletions src/createStyled.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,6 @@ 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
Expand All @@ -41,15 +39,16 @@ const createStyled = (jss: Function) => (baseStyles: BaseStylesType = {}): Style
return {staticSheet, dynamicSheet}
}

return Object.assign(curry1((
tagNameOrStyledElement: TagNameOrStyledElementType,
return Object.assign((
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
7 changes: 3 additions & 4 deletions src/tests/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react'
import type {StyledType} from '../types'

export default (styled: StyledType) => {
const App = styled('div', {
const App = styled('div')({
margin: 50,
})

Expand All @@ -22,16 +22,15 @@ export default (styled: StyledType) => {
color: 'yellow',
})

const Title = styled('h1', {
const Title = styled('h1')({
color: 'red',
})

// function value
const Button = styled('button', {
const Button = styled('button')({
margin: ({margin = 0}) => margin,
})


return () => (
<App>
<Header>
Expand Down

0 comments on commit 9724370

Please sign in to comment.