glamor

css for component systems

npm install glamor --save

(or)

<script src='https://unpkg.com/glamor/umd/index.min.js'></script>

usage

import { style, hover } from 'glamor'
// ...
<div 
  {...style({ color: 'red' })} 
  {...hover({ color: 'pink' })}>
  zomg
</div>

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

really small / fast / efficient, with a fluent api
framework independent
adds vendor prefixes / fallback values
supports all the pseudo :classes/::elements
@media queries
@font-face / @keyframes
escape hatches for parent and child selectors
dev helper to simulate pseudo classes like :hover, etc
server side / static rendering
tests / coverage

(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

extras

glamor/reset - include a css reset
glamor/react - helpers for themes, inline 'css' prop, @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

characteristics

while glamor shares most common attributes of other inline style / css-in-js systems, here are some key differences -

it does not touch class/style attributes, neither does it not generate pretty classnames; instead we use data-* attributes and jsx attribute spread (some implications). This lets you define styles 'inline', yet globally optimize as one unit.
in dev mode, you can simulate pseudo classes on elements by using the simulate() helper (or adding a [data-simulate-<pseudo>] attribute manually). very useful, especially when combined when hot-loading and/or editing directly in your browser devtools.
in production, we switch to a much faster method of appending styles to the document, able to add 10s of 1000s of rules in milliseconds. the caveat with this approach is that those styles will not be editable in chrome/firefox devtools (which is fine, for prod?). advanced users may use speedy(true/false) to toggle this setting manually.

todo

planned enhancements
notes on composition
ie8 compat

profit, profit

I get it

vdanchenkov / glamor