Style Helper is a small utility for CSS-in-JS functions.
npm install style-helper --save
import { quote, url, objectify, merge } from 'style-helper'Wrap a string in quotes (useful for the psuedo-element content property).
css({
'&:before': {
content: quote('Hello World') //=> `"Hello World"`
}
})Wrap a string in the CSS url() function.
css({
backgroundImage: url('image.png') //=> `url("image.png")`
})Merge CSS objects recursively.
import { ellipsis } from './styles'
css(merge({ padding: 10 }, ellipsis)) //=> { padding: 10, ... }Repeats the same style for multiple selectors (reference issue).
css(multi(['& .a', '& .b'], { margin: 10 }))Turn a list of arguments into an object (...[key, value]).
// Simple properties.
css(objectify(
['padding', 10],
['margin', 10]
)) //=> { padding: 10, margin: 10 }
// Array key for repeating property values.
css(objectify(
[
['& .a', '& .b'],
{ margin: 10 }
]
)) //=> { '& .a': { margin: 10 }, '& .b': { margin: 10 } }MIT license
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent