glamor

css for component systems

npm install glamor --save

usage

import { style, hover } from 'glamor'

// make css rules 
let rule = style({ 
  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>

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

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

<div {...merge(mono, bolder)}>
  bold code!
</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 -

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

planned enhancements
notes on composition
ie8 compat

profit, profit

I get it

cortesa / glamor