glamor-jss
Use glamor
flavored CSS with jss
under the hood…
Install
yarn add glamor-jss
Features
- 📦 Zero configuration (just like glamor).
- ⚡️ Server side rendering ready.
- 💭 Caching mechanisms
- 🕸 Hoist static style rules with babel plugin.
- 🏎💨 Blazing fast, thanks to JSS behind scenes.
- 📝 Well tested
Reasoning
I'm a big fan of glamor
.
Unfortunately it seems like a stale project, but I don't want to give up on it just yet. my idea was to keep the simple and hands on usage of glamor and back it up with something bigger in the background.
That's why I created glamor-jss
. It's not a plugin but more kind of like a wrapper around it.
I wanted it to be fast. And I wanted it to be smart.
Of course I couldn't lift these heavy tasks all alone. I did some thorough research to back up this project with a bunch of great other projects:
hash-it
: blazing fast hash calculations for objects (check/perf
if you're interested) to cache the 💩 out of it.memoize-weak
: combined with the hoisting plugin for babel this produces even better caching possibilites (usesWeakMap
if possible).
and of course, let's not forget
jss
: Does all the heavy lifting in theCSSOM
This is by no means feature complete and only supports the CSS object definition (e.g.: css({ width: 100 })
) for now. I don't plan to support string templates.
Usage
🎊 See the demo 🎉 (and the according source)
For further documentation on how to declare styles, I'd like to refer to the glamor API guidelines.
🍨 Vanilla
// oldschool require:// const css = require('glamor-jss').default const myClass = documentbodyinnerHTML = `RED 🎈`
🔋 React
import React from 'react'import css from 'glamor-jss' const AwesomeComponent = <div
💁♀️ Server side rendering (SSR)
It's easy to add the generated styles on the server side (see example/src/server.js
):
// … // … eventuallyconst html = ReactDOMServerresponse
On client side you can then easily remove this style tag (see example/src/client.js
):
ReactDOM
🐠 Babel plugin
// .babelrc
What does it do? 🤔
Every statically declared rule will be moved to the outermost scope. This opens up the possibility for heavy caching.
For example:
In
const Component = <div ...> <div ... /> <div ... /> </div>
Out
var _ref = width: 100 height: 100 ;var _ref2 = ':after': content: "'*'" ; const Component = <div ...> <div ... /> <div ... /> </div>