glamor

css in your javascript

hand rolled by @threepointone, @donaldpipowitch, @otbe, and @ChristopherBiscardi

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



  zomg




// or as classes



  zomg




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

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




  bold code!

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
• ~8k gz, including the prefixer
• 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
• performance tips
• what happens when I call css(...rules)?

extras

Every extra is available as a standalone package. - glamor-reset - include a css reset - glamor-react - helpers for themes, @vars - use a css prop on all your react elements - glamor-jsxstyle - react integration, à la jsxstyle - glamor-aphrodite - shim for aphrodite stylesheets - glamor-utils - a port of postcss-utilities - glamor-server - server side rendering - glamor-raw-css - write real css - glamor-ous - a port of the skeleton css framework - glamor-styled - an experimental port of styled-components - jest-glamor-react - get glamor's styles in your Jest snapshots

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
• ie8 compat

profit, profit

I get it