npm install glamor --save
import css from 'glamor'// make css ruleslet rule =// add as data attributes<div >zomg</div>// or as classes<div =>zomg</div>// merge rules for great justicelet mono =let bolder =<div >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.
- fast / efficient, with a fluent api
- framework independent
- adds vendor prefixes / fallback values
- supports all the pseudo :classes/::elements
- escape hatches for parent / child / contextual selectors
- dev helper to simulate pseudo classes like
- server side / static rendering
- tests / coverage
- experimental - write real css, with syntax highlighting and linting
(thanks to BrowserStack for providing the infrastructure that allows us to run our build in real browsers.)
- api documentation
- howto - a comparison of css techniques in glamor
- server side rendering
- performance tips
- what happens when I call css(...rules)?
glamor/reset- include a css reset
- use a
cssprop on all your react elements
glamor/react- helpers for themes,
glamor/jsxstyle- react integration, à la jsxstyle
glamor/aphrodite- shim for aphrodite stylesheets
glamor/utils- a port of postcss-utilities
glamor/ous- a port of the skeleton css framework
glamor/styled- an experimental port of styled-components
there are two methods by which the library adds styles to the document -
- by appending css 'rules' to a browser backed stylesheet. This is really fast, but has the disadvantage of making the styles uneditable in the devtools sidebar.
- by appending text nodes to a style tag. This is fairly slow, but doesn't have the editing drawback.
as a compromise, we enable the former 'speedy' mode
NODE_ENV=production, and disable it otherwise. You can manually toggle this with the
while glamor shares most common attributes of other inline style / css-in-js systems, here are some key differences -
- uses 'real' stylesheets, so you can use all css features.
- rules can be used as data-attributes or classNames.
- simulate pseudo-classes with the
simulatehelper. very useful, especially when combined when hot-loading and/or editing directly in devtools.
- really fast, by way of deduping rules, and using insertRule in production.
- redo all the docs
- planned enhancements
- notes on composition
I get it