Skip to content

threepointone/glamor-stream

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Stars

Watchers

Forks

Packages

No packages published