/glam

crazy good css in your js

Primary LanguageJavaScript

glam

[work in progress]

“It's like giving a glass of ice water to somebody in hell"

yarn add glam or npm install glam

// copy paste this at the top of your file
/* @jsx glam */
import glam from 'glam'

// and then write css as inline objects

<div css={{
  color: 'red',
  ':hover': {
    color: 'blue'
  }
}}>
  hello world!
</div>

motivation

I made it for me. You might like it. It's the core experience of glamor, trimmed down and optimised for react.

  • fast, small
  • great for prototyping / design systems
  • objects everywhere
  • compose with arrays
  • easy to migrate to/from another system

object format

  • key: value
  • key : [...fallbacks]
  • <selector> : {...}
  • @media <query>: {...}
  • @supports: {...}
  • nest it however you want
  • (todo) @keyframes: {...}
  • (todo) @font-face: {...}

composition

  • objects everywhere
  • nested selectors
  • arrays to join efficiently
  • whatever pattern you want on top - bem, itcss, oocss, sc, jsxstyle, whatever

debugging / tools / dx

[todo]

tradeoffs

  • memory - glam maintains a hierarchical WeakMap cache for the parser, and a Set of inserted ids.
  • runtime - about 8k gz
  • added bundle size of having your styles as objects
  • learning curve

how does it work?

[todo]

how is it different

  • typed
  • streaming ssr support
  • (todo) iframes
  • (todo) wc (via skate?)
  • (todo) safe

server rendering

glam should 'just work' with react v16, streaming and all.

[todo] - when hydrating on the client side, use glam/hydrate.

[todo - v15 shim]

[maybe?]

  • global
  • react-native/ vr
  • static extraction
  • scoped
  • 'virtual'
  • parser/generator plugins
  • houdini
  • reset.css