glam: A JavaScript repository from threepointone

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