https://github.com/threepointone/glam

crazy good css in your js
https://github.com/threepointone/glam

babel-plugin css

Last synced: 4 days ago
JSON representation

crazy good css in your js

• Host: GitHub
• URL: https://github.com/threepointone/glam
• Owner: threepointone
• Created: 2017-04-25T17:35:48.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-04-25T15:36:20.000Z (over 6 years ago)
• Last Synced: 2024-12-16T20:08:40.268Z (11 days ago)
• Topics: babel-plugin, css
• Language: JavaScript
• Homepage:
• Size: 1.21 MB
• Stars: 509
• Watchers: 11
• Forks: 18
• Open Issues: 13
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-css-in-js - glam

README

        
glam

---

[work in progress]

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

`yarn add glam` or `npm install glam`

```jsx

// copy paste this at the top of your file

/* @jsx glam */

import glam from 'glam'

// and then write css as inline objects



  hello world!



```


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]`

- ` : {...}`

- `@media : {...}`

- `@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