glamor


!build status

css in your javascript

npm install glamor --save

usage
``jsx
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


// or as classes


// merge rules for great justice
let mono = css({
fontFamily: 'monospace'
})

let bolder = css({
fontWeight: 'bolder'
})

`

motivation
---

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.

features
---

- fast / efficient, with a fluent api
- framework independent
- adds vendor prefixes / fallback values
- supports all the pseudo :classes/::elements
- @media queries
- @supports statements
- @font-face / @keyframes
- escape hatches for parent / child / contextual selectors
- dev helper to simulate pseudo classes like :hover, etc
- 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.)

docs
---
- api documentation
- howto - a comparison of css techniques in glamor
- plugins
- server side rendering
- performance tips
- what happens when I call css(...rules)?

extras
---

- glamor/reset - include a css reset
- use a css prop on all your react elements
- glamor/react - helpers for themes, @vars
- 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


speedy mode
---

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 speedy() function.

characteristics
---

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 simulate` helper. 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.


todo
---

- redo all the docs
- planned enhancements
- notes on composition

profit, profit
---

I get it