Use glamor flavored CSS with jss under the hood…
yarn add glamor-jss- 📦 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
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: fast object hashing 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.
API wise for now it supports:
cssobject spreadingcssas class namescss.keyframes- Babel hoisting (
glamor-jss/hoist) renderToStringServer side rendering
This is all I needed for now, but I am happy to extend it further or accept PRs
There's a codeshift which will replace all glamor imports with glamor-jss imports.
Be aware that only a limited set of the glamor API is available (see above).
Just run
jscodeshift -t glamor-jss/codeshift.js src🎊 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.
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>`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' )} />
)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)
})// .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>
)