crazy good css in your js
Clone or download
Latest commit 9fdabd4 Oct 9, 2017
Permalink
Failed to load latest commit information.
bench port over glamr Oct 8, 2017
docs readme Oct 9, 2017
packages readme Oct 9, 2017
.babelrc port over glamr Oct 8, 2017
.gitignore cover hash Jun 7, 2017
.travis.yml - Add travis.yml Jun 7, 2017
.watchmanconfig - preserve css- prefix even with readable classnames Jun 17, 2017
README.md Update README.md Oct 9, 2017
package.json port over glamr Oct 8, 2017
yarn.lock port over glamr Oct 8, 2017

README.md

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