glamor-inline
what if instead of this -
<html> <head> <style> css-1ezp9xedata-css-1ezp9xecolor:red; css-1bf41l6data-css-1bf41l6border:1px solid green; css-icjsl7data-css-icjsl7color:blue; </style> </head> <body> <div ="css-1ezp9xe" =""> <span>Some text here</span> <span ="css-icjsl7 something" =""> more text </span> </div> </body></html>
we could do this -
<html> <head/> <body> <style> css-1ezp9xedata-css-1ezp9xecolor:red; css-1bf41l6data-css-1bf41l6border:1px solid green; </style> <div ="css-1ezp9xe" =""> <span>Some text here</span> <style>css-icjsl7data-css-icjsl7color:blue;</style> <span ="css-icjsl7 something" =""> more text </span> </div> </body></html>
usage
import renderToString from 'react-dom/server'import inline from 'glamor-inline' Component // ... let html = let inlinedHtml =
pros
- progressively load just the precise css you need, precisely when you need it
- based on ideas in this post
- doesn't break react checksums
cons
- hyper optimization
- unclear runtime characteristics
todo
- stream it