iso-morphic-style-loader

2.0.1 • Public • Published

npm travis license

Isomorphic Style Loader

The isomorphic style loader based on style-loader, work both with server side and browser side.

Install

npm install iso-morphic-style-loader --save-dev

Usage

In fact, there is nothing different with the style-loader, just use the same config as you like.

However, some more work if you want to add critical path CSS with isomorphic app:

/// Such as server.js, where you render your isomorphic app and will send it
/// back to your user.
data.styles = []
// iso-morphic-style-loader will offer you the way to access imported styles
// via React's context.
const context = {
  // will be invoked when render in server side
  iterateCss: (styles) => {
    styles.forEach(style => {
      data.push({
        ...style.attrs,
        id: style.id,
        cssText: style.content.join('\n')
      })
    })
  },
}
// Then we will pass this styles to your React Component.
const html = ReactDOM.renderToStaticMarkup(<App {...data} />)
res.status(route.status || 200)
res.send(`<!doctype html>${html}`)
 
///////////
 
// Here is your App.js
// Perfect, we can insert styles easily.
render() {
  return (
    {styles.map(({id, cssText, ...rest}) =>
      <style
        {...rest}
        key={id}
        id={id}
        dangerouslySetInnerHTML={{ __html: cssText }}
      />
    )}
  )
}
 
//////////
// And here your component where really import styles
import React from 'react'
import PropTypes from 'prop-types'
import notifyCssDeps from 'iso-morphic-style-loader/lib/notifyCssDeps'
import css from './index.css'
import css2 from './demo.css'
 
// The decorator will invoke previous iterateCss method when the component get rendered
@notifyCssDeps(css, css2)
class MyComponent extends React.Component {
  render() {}
}

Features

  1. For server side, the lib will use React's context to offer you a way to access styles.

    iterateCss: (styles) => {
      styles.forEach(style => {
        data.push({
          ...style.attrs,
          id: style.id,
          cssText: style.content.join('\n')
        })
      })
    }

    Nothing will happens if you ignore iterateCss, no errors in server side rendering, and works the same as style-loader do.

    But if you want to optimize for critical path CSS rendering, please inject styles during server side rendering.

  2. The browser side behaviour is exactly the same as style-loader@0.18.2. And you can enjoy all features supported by style-loader@0.18.2.

  3. No FOUC, no duplicate!

    1. The script will try to remove the styles injected at server side to prevent duplicate.
    2. However it only remove after client side styles created, so no FOUC.

Demo

Left is with style-loader and right is with iso-morphic-style-loader.

Readme

Keywords

none

Package Sidebar

Install

npm i iso-morphic-style-loader

Weekly Downloads

555

Version

2.0.1

License

MIT

Last publish

Collaborators

  • creeper