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