A function which flattens a nested object tree by recursively joining and
camelcasing keys. Useful as a utility for css-in-js frameworks.
import { css } from 'glamor';
import nested from 'nested-camel';
const rule = css(nested({
font: {
family: 'fantasy',
size: '30em',
weight: 'bold',
},
border: {
top: {
style: 'dashed',
color: 'red',
width: 'thick',
},
bottom: {
style: 'light',
color: 'blue',
width: 'thin',
},
},
}));
const rule2 = css({
background: 'blue',
...nested({
font: {
family: 'fantasy',
size: '30em',
weight: 'bold',
},
}),
});
import { compose } from 'ramda';
const ncss = compose(css, nested);
const rule3 = ncss({
font: {
family: 'fantasy',
size: '30em',
weight: 'bold',
},
border: {
top: {
style: 'dashed',
color: 'red',
width: 'thick',
},
bottom: {
style: 'solid',
color: 'blue',
width: 'thin',
},
},
});