Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
lib
 
 
src
 
 
 
 
 
 
 
 
 
 

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

About

streaming inline glamor for your html

Resources

Packages

No packages published