css in your javascript
npm install glamor --save
usage
import { css } from 'glamor'
// make css rules
let rule = css({
color: 'red',
':hover': {
color: 'pink'
},
'@media(min-width: 300px)': {
color: 'green',
':hover': {
color: 'yellow'
}
}
})
// add as data attributes
<div {...rule} {...another}>
zomg
</div>
// or as classes
<div className={`${rule} ${another}`}>
zomg
</div>
// merge rules for great justice
let mono = css({
fontFamily: 'monospace'
})
let bolder = css({
fontWeight: 'bolder'
})
<div {...css(mono, bolder)}>
bold code!
</div>
This expands on ideas from @vjeux's 2014 css-in-js talk. We introduce an api to annotate arbitrary dom nodes with style definitions ("rules") for, um, the greater good.
@media
queries@supports
statements@font-face
/ @keyframes
:hover
, etc(thanks to BrowserStack for providing the infrastructure that allows us to run our build in real browsers.)
glamor/reset
- include a css resetcss
prop on all your react elementsglamor/react
- helpers for themes, @vars
glamor/jsxstyle
- react integration, à la jsxstyleglamor/aphrodite
- shim for aphrodite stylesheetsglamor/utils
- a port of postcss-utilitiesglamor/ous
- a port of the skeleton css frameworkglamor/styled
- an experimental port of styled-componentsthere are two methods by which the library adds styles to the document -
as a compromise, we enable the former 'speedy' mode NODE_ENV=production
, and disable it otherwise. You can manually toggle this with the speedy()
function.
while glamor shares most common attributes of other inline style / css-in-js systems, here are some key differences -
simulate
helper. very useful, especially when combined when hot-loading and/or editing directly in devtools.I get it