glamor-jss v1.4.1
glamor-jss
Use glamor flavored CSS with jss under the hood…
Install
yarn add glamor-jssFeatures
- 📦 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/perfif you're interested) to cache the 💩 out of it.memoize-weak: combined with the hoisting plugin for babel this produces even better caching possibilites (usesWeakMapif 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
import css from 'glamor-jss'
// oldschool require:
// const css = require('glamor-jss').default
const myClass = css({ color: 'red' })
document.body.innerHTML = `<div class="${myClass}">RED 🎈</div>`🔋 React
import React from 'react'
import { css } from 'glamor-jss'
const AwesomeComponent = () => (
<div {...css({ color: 'red' )}>RED 🎈</div>
// or as CSS class:
// <div className={css({ color: 'red' )} />
)💁♀️ Server side rendering (SSR)
It's easy to add the generated styles on the server side (see example/src/server.js):
// …
import ReactDOMServer from 'react-dom/server'
import { renderToString } from 'glamor-jss'
// … eventually
const html = ReactDOMServer.renderToString(<App />)
response.send(`
<!doctype html>
<html>
<style id="ssr">${renderToString()}</style>
<div id="root">${html}</div>
</html>
`)On client side you can then easily remove this style tag (see example/src/client.js):
ReactDOM.hydrate(<App />, document.getElementById('root'), () => {
const ssr = document.getElementById('ssr')
ssr.parentNode.removeChild(ssr)
})🐠 Babel plugin
// .babelrc
{
"plugins": ["glamor-jss/hoist"]
}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
import css from 'glamor-jss'
const Component = props => (
<div {...css({ width: 100, height: 100 })}>
<div {...css({ ':after': { content: "'*'" } })} />
<div {...css({ background: props.background })} />
</div>
)Out
import css from 'glamor-jss'
var _ref = { width: 100, height: 100 };
var _ref2 = { ':after': { content: "'*'" } };
const Component = props => (
<div {...css(_ref)}>
<div {...css(_ref2)} />
<div {...css({ background: props.background })} />
</div>
)