Skip to content

Instantly share code, notes, and snippets.

@johno

johno/style-lift.js

Last active November 14, 2017 16:12
Show Gist options
  • Save johno/d2b05b816ef9852e2913e527f11f4a65 to your computer and use it in GitHub Desktop.
Save johno/d2b05b816ef9852e2913e527f11f4a65 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
style-lift.js
const styles = ['radii', 'borderStyle', 'borderWidth', 'space']
const theme = {
radii: [0, 1, 2],
borderStyle: ['solid', 'dotted'],
borderWidth: [3, 4, 5, 6],
space: [0, 2, 4, 8, 16, 32]
}
const possibilities = styles.reduce((acc, style) =>
acc.concat([theme[style].map(v => ({ [style]: v }))])
, [])
const themeLift = R.lift((radii, borderStyle, borderWidth, space) =>
Object.assign({}, radii, borderStyle, borderWidth, space)
)
themeLift.apply(null, possibilities)
Raw
styled-lift-hoc.js
const React = require('react')
const lift = require('styled-lift')
const Button = lift(
'borderWidth',
'backgroundColor',
'color',
'boxShadow',
'margin'
)
<Button mt={3}>Foo</Button>
Raw
x-output.js
[
{
borderStyle: "solid",
borderWidth: 3,
radii: 0,
space: 0
},
{
borderStyle: "solid",
borderWidth: 3,
radii: 0,
space: 2
},
{
borderStyle: "solid",
borderWidth: 3,
radii: 0,
space: 4
},
{
borderStyle: "solid",
borderWidth: 3,
radii: 0,
space: 8
},
{
borderStyle: "solid",
borderWidth: 3,
radii: 0,
space: 16
},
{
borderStyle: "solid",
borderWidth: 3,
radii: 0,
space: 32
},
{
borderStyle: "solid",
borderWidth: 4,
radii: 0,
space: 0
},
{
borderStyle: "solid",
borderWidth: 4,
radii: 0,
space: 2
},
{
borderStyle: "solid",
borderWidth: 4,
radii: 0,
space: 4
},
{
borderStyle: "solid",
borderWidth: 4,
radii: 0,
space: 8
},
{
borderStyle: "solid",
borderWidth: 4,
radii: 0,
space: 16
},
{
borderStyle: "solid",
borderWidth: 4,
radii: 0,
space: 32
},
{
borderStyle: "solid",
borderWidth: 5,
radii: 0,
space: 0
},
{
borderStyle: "solid",
borderWidth: 5,
radii: 0,
space: 2
},
{
borderStyle: "solid",
borderWidth: 5,
radii: 0,
space: 4
},
{
borderStyle: "solid",
borderWidth: 5,
radii: 0,
space: 8
},
{
borderStyle: "solid",
borderWidth: 5,
radii: 0,
space: 16
},
{
borderStyle: "solid",
borderWidth: 5,
radii: 0,
space: 32
},
{
borderStyle: "solid",
borderWidth: 6,
radii: 0,
space: 0
},
{
borderStyle: "solid",
borderWidth: 6,
radii: 0,
space: 2
},
{
borderStyle: "solid",
borderWidth: 6,
radii: 0,
space: 4
},
{
borderStyle: "solid",
borderWidth: 6,
radii: 0,
space: 8
},
{
borderStyle: "solid",
borderWidth: 6,
radii: 0,
space: 16
},
{
borderStyle: "solid",
borderWidth: 6,
radii: 0,
space: 32
},
{
borderStyle: "dotted",
borderWidth: 3,
radii: 0,
space: 0
},
{
borderStyle: "dotted",
borderWidth: 3,
radii: 0,
space: 2
},
{
borderStyle: "dotted",
borderWidth: 3,
radii: 0,
space: 4
},
{
borderStyle: "dotted",
borderWidth: 3,
radii: 0,
space: 8
},
{
borderStyle: "dotted",
borderWidth: 3,
radii: 0,
space: 16
},
{
borderStyle: "dotted",
borderWidth: 3,
radii: 0,
space: 32
},
{
borderStyle: "dotted",
borderWidth: 4,
radii: 0,
space: 0
},
{
borderStyle: "dotted",
borderWidth: 4,
radii: 0,
space: 2
},
{
borderStyle: "dotted",
borderWidth: 4,
radii: 0,
space: 4
},
{
borderStyle: "dotted",
borderWidth: 4,
radii: 0,
space: 8
},
{
borderStyle: "dotted",
borderWidth: 4,
radii: 0,
space: 16
},
{
borderStyle: "dotted",
borderWidth: 4,
radii: 0,
space: 32
},
{
borderStyle: "dotted",
borderWidth: 5,
radii: 0,
space: 0
},
{
borderStyle: "dotted",
borderWidth: 5,
radii: 0,
space: 2
},
{
borderStyle: "dotted",
borderWidth: 5,
radii: 0,
space: 4
},
{
borderStyle: "dotted",
borderWidth: 5,
radii: 0,
space: 8
},
{
borderStyle: "dotted",
borderWidth: 5,
radii: 0,
space: 16
},
{
borderStyle: "dotted",
borderWidth: 5,
radii: 0,
space: 32
},
{
borderStyle: "dotted",
borderWidth: 6,
radii: 0,
space: 0
},
{
borderStyle: "dotted",
borderWidth: 6,
radii: 0,
space: 2
},
{
borderStyle: "dotted",
borderWidth: 6,
radii: 0,
space: 4
},
{
borderStyle: "dotted",
borderWidth: 6,
radii: 0,
space: 8
},
{
borderStyle: "dotted",
borderWidth: 6,
radii: 0,
space: 16
},
{
borderStyle: "dotted",
borderWidth: 6,
radii: 0,
space: 32
},
{
borderStyle: "solid",
borderWidth: 3,
radii: 1,
space: 0
},
{
borderStyle: "solid",
borderWidth: 3,
radii: 1,
space: 2
},
{
borderStyle: "solid",
borderWidth: 3,
radii: 1,
space: 4
},
{
borderStyle: "solid",
borderWidth: 3,
radii: 1,
space: 8
},
{
borderStyle: "solid",
borderWidth: 3,
radii: 1,
space: 16
},
{
borderStyle: "solid",
borderWidth: 3,
radii: 1,
space: 32
},
{
borderStyle: "solid",
borderWidth: 4,
radii: 1,
space: 0
},
{
borderStyle: "solid",
borderWidth: 4,
radii: 1,
space: 2
},
{
borderStyle: "solid",
borderWidth: 4,
radii: 1,
space: 4
},
{
borderStyle: "solid",
borderWidth: 4,
radii: 1,
space: 8
},
{
borderStyle: "solid",
borderWidth: 4,
radii: 1,
space: 16
},
{
borderStyle: "solid",
borderWidth: 4,
radii: 1,
space: 32
},
{
borderStyle: "solid",
borderWidth: 5,
radii: 1,
space: 0
},
{
borderStyle: "solid",
borderWidth: 5,
radii: 1,
space: 2
},
{
borderStyle: "solid",
borderWidth: 5,
radii: 1,
space: 4
},
{
borderStyle: "solid",
borderWidth: 5,
radii: 1,
space: 8
},
{
borderStyle: "solid",
borderWidth: 5,
radii: 1,
space: 16
},
{
borderStyle: "solid",
borderWidth: 5,
radii: 1,
space: 32
},
{
borderStyle: "solid",
borderWidth: 6,
radii: 1,
space: 0
},
{
borderStyle: "solid",
borderWidth: 6,
radii: 1,
space: 2
},
{
borderStyle: "solid",
borderWidth: 6,
radii: 1,
space: 4
},
{
borderStyle: "solid",
borderWidth: 6,
radii: 1,
space: 8
},
{
borderStyle: "solid",
borderWidth: 6,
radii: 1,
space: 16
},
{
borderStyle: "solid",
borderWidth: 6,
radii: 1,
space: 32
},
{
borderStyle: "dotted",
borderWidth: 3,
radii: 1,
space: 0
},
{
borderStyle: "dotted",
borderWidth: 3,
radii: 1,
space: 2
},
{
borderStyle: "dotted",
borderWidth: 3,
radii: 1,
space: 4
},
{
borderStyle: "dotted",
borderWidth: 3,
radii: 1,
space: 8
},
{
borderStyle: "dotted",
borderWidth: 3,
radii: 1,
space: 16
},
{
borderStyle: "dotted",
borderWidth: 3,
radii: 1,
space: 32
},
{
borderStyle: "dotted",
borderWidth: 4,
radii: 1,
space: 0
},
{
borderStyle: "dotted",
borderWidth: 4,
radii: 1,
space: 2
},
{
borderStyle: "dotted",
borderWidth: 4,
radii: 1,
space: 4
},
{
borderStyle: "dotted",
borderWidth: 4,
radii: 1,
space: 8
},
{
borderStyle: "dotted",
borderWidth: 4,
radii: 1,
space: 16
},
{
borderStyle: "dotted",
borderWidth: 4,
radii: 1,
space: 32
},
{
borderStyle: "dotted",
borderWidth: 5,
radii: 1,
space: 0
},
{
borderStyle: "dotted",
borderWidth: 5,
radii: 1,
space: 2
},
{
borderStyle: "dotted",
borderWidth: 5,
radii: 1,
space: 4
},
{
borderStyle: "dotted",
borderWidth: 5,
radii: 1,
space: 8
},
{
borderStyle: "dotted",
borderWidth: 5,
radii: 1,
space: 16
},
{
borderStyle: "dotted",
borderWidth: 5,
radii: 1,
space: 32
},
{
borderStyle: "dotted",
borderWidth: 6,
radii: 1,
space: 0
},
{
borderStyle: "dotted",
borderWidth: 6,
radii: 1,
space: 2
},
{
borderStyle: "dotted",
borderWidth: 6,
radii: 1,
space: 4
},
{
borderStyle: "dotted",
borderWidth: 6,
radii: 1,
space: 8
},
{
borderStyle: "dotted",
borderWidth: 6,
radii: 1,
space: 16
},
{
borderStyle: "dotted",
borderWidth: 6,
radii: 1,
space: 32
},
{
borderStyle: "solid",
borderWidth: 3,
radii: 2,
space: 0
},
{
borderStyle: "solid",
borderWidth: 3,
radii: 2,
space: 2
},
{
borderStyle: "solid",
borderWidth: 3,
radii: 2,
space: 4
},
{
borderStyle: "solid",
borderWidth: 3,
radii: 2,
space: 8
},
{
borderStyle: "solid",
borderWidth: 3,
radii: 2,
space: 16
},
{
borderStyle: "solid",
borderWidth: 3,
radii: 2,
space: 32
},
{
borderStyle: "solid",
borderWidth: 4,
radii: 2,
space: 0
},
{
borderStyle: "solid",
borderWidth: 4,
radii: 2,
space: 2
},
{
borderStyle: "solid",
borderWidth: 4,
radii: 2,
space: 4
},
{
borderStyle: "solid",
borderWidth: 4,
radii: 2,
space: 8
},
{
borderStyle: "solid",
borderWidth: 4,
radii: 2,
space: 16
},
{
borderStyle: "solid",
borderWidth: 4,
radii: 2,
space: 32
},
{
borderStyle: "solid",
borderWidth: 5,
radii: 2,
space: 0
},
{
borderStyle: "solid",
borderWidth: 5,
radii: 2,
space: 2
},
{
borderStyle: "solid",
borderWidth: 5,
radii: 2,
space: 4
},
{
borderStyle: "solid",
borderWidth: 5,
radii: 2,
space: 8
},
{
borderStyle: "solid",
borderWidth: 5,
radii: 2,
space: 16
},
{
borderStyle: "solid",
borderWidth: 5,
radii: 2,
space: 32
},
{
borderStyle: "solid",
borderWidth: 6,
radii: 2,
space: 0
},
{
borderStyle: "solid",
borderWidth: 6,
radii: 2,
space: 2
},
{
borderStyle: "solid",
borderWidth: 6,
radii: 2,
space: 4
},
{
borderStyle: "solid",
borderWidth: 6,
radii: 2,
space: 8
},
{
borderStyle: "solid",
borderWidth: 6,
radii: 2,
space: 16
},
{
borderStyle: "solid",
borderWidth: 6,
radii: 2,
space: 32
},
{
borderStyle: "dotted",
borderWidth: 3,
radii: 2,
space: 0
},
{
borderStyle: "dotted",
borderWidth: 3,
radii: 2,
space: 2
},
{
borderStyle: "dotted",
borderWidth: 3,
radii: 2,
space: 4
},
{
borderStyle: "dotted",
borderWidth: 3,
radii: 2,
space: 8
},
{
borderStyle: "dotted",
borderWidth: 3,
radii: 2,
space: 16
},
{
borderStyle: "dotted",
borderWidth: 3,
radii: 2,
space: 32
},
{
borderStyle: "dotted",
borderWidth: 4,
radii: 2,
space: 0
},
{
borderStyle: "dotted",
borderWidth: 4,
radii: 2,
space: 2
},
{
borderStyle: "dotted",
borderWidth: 4,
radii: 2,
space: 4
},
{
borderStyle: "dotted",
borderWidth: 4,
radii: 2,
space: 8
},
{
borderStyle: "dotted",
borderWidth: 4,
radii: 2,
space: 16
},
{
borderStyle: "dotted",
borderWidth: 4,
radii: 2,
space: 32
},
{
borderStyle: "dotted",
borderWidth: 5,
radii: 2,
space: 0
},
{
borderStyle: "dotted",
borderWidth: 5,
radii: 2,
space: 2
},
{
borderStyle: "dotted",
borderWidth: 5,
radii: 2,
space: 4
},
{
borderStyle: "dotted",
borderWidth: 5,
radii: 2,
space: 8
},
{
borderStyle: "dotted",
borderWidth: 5,
radii: 2,
space: 16
},
{
borderStyle: "dotted",
borderWidth: 5,
radii: 2,
space: 32
},
{
borderStyle: "dotted",
borderWidth: 6,
radii: 2,
space: 0
},
{
borderStyle: "dotted",
borderWidth: 6,
radii: 2,
space: 2
},
{
borderStyle: "dotted",
borderWidth: 6,
radii: 2,
space: 4
},
{
borderStyle: "dotted",
borderWidth: 6,
radii: 2,
space: 8
},
{
borderStyle: "dotted",
borderWidth: 6,
radii: 2,
space: 16
},
{
borderStyle: "dotted",
borderWidth: 6,
radii: 2,
space: 32
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment