glamor-inline

glamor-inline ---

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
glamor-inline
1.0.56 years ago6 years agoMinified + gzip package size for glamor-inline in KB

Readme

glamor-inline

what if instead of this - ```jsx
<style>
  .css-1ezp9xe,[data-css-1ezp9xe]{color:red;}
  .css-1bf41l6,[data-css-1bf41l6]{border:1px solid green;}
  .css-icjsl7,[data-css-icjsl7]{color:blue;}
</style>
<div class="css-1ezp9xe" data-css-1bf41l6="">
  <span>Some text here</span>
  <span class="css-icjsl7 something" data-css-1ezp9xe=""> 
    more text 
  </span>
</div>
we could do this -
```jsx
<html>
  <head/>
  <body>
    <style>
      .css-1ezp9xe,[data-css-1ezp9xe]{color:red;}
      .css-1bf41l6,[data-css-1bf41l6]{border:1px solid green;}
    </style>
    <div class="css-1ezp9xe" data-css-1bf41l6="">
      <span>Some text here</span>
      <style>.css-icjsl7,[data-css-icjsl7]{color:blue;}</style>
      <span class="css-icjsl7 something" data-css-1ezp9xe=""> more text </span>    
    </div>
  </body>
</html>

usage

import { renderToString } from 'react-dom/server'
import inline from 'glamor-inline'

class App extends React.Component {
  // ...
}

let html = renderToString(<App/>)
let inlinedHtml = inline(html)

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