glamor-stream
v1.0.4
Published
stream inline css-in-js
Downloads
3
Readme
glamor-stream
[experimental]
npm install glamor-stream
So. You're living on the hype train, all your styles are colocated with your scripts, and you server render your pages with critical css for that slick experience. Cool.
This module lets you inline critical css into html streams, such as the ones created by react's new streaming apis. Nice.
usage
app.js
import {css} from 'glamor'
export default function App(){
return <div className={css({ color: 'red'})}>
this text is red
</div>
}
server.js
import inline from 'glamor-stream'
import {renderToStream} from 'react-dom/server'
import App from './app.js'
// ...
let html = renderToStream(<App/>).pipe(inline())
// a stream of html inlined with critical css
browser.js
// (optional)
// use hydrate from 'glamor-stream' instead of from 'react-dom/server'
import {hydrate} from '../src/browser'
import App from './app.js'
hydrate(<App/>, document.getElementById('app'))
see the express.js-based example for more details.
todos
- utils for wrapper tags
- prevent reinserting created rules
- tests