creeperyang
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-devUsage
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
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 asstyle-loaderdo.But if you want to optimize for critical path CSS rendering, please inject styles during server side rendering.
The browser side behaviour is exactly the same as `style-loader@0.18.2
. And you can enjoy all features supported bystyle-loader@0.18.2`.No FOUC, no duplicate!
- The script will try to remove the styles injected at server side to prevent duplicate.
- 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.