The isomorphic style loader based on style-loader, work both with server side and browser side.
npm install iso-morphic-style-loader --save-dev
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 export global.__universal__ and you
// can access it to get styles.
if (global.__universal__) {
global.__universal__.forEach(v => {
data.styles.push({
...v.attrs,
id: v.id,
cssText: v.content.join('\n')
})
})
}
// Then we will pass this styles to your React Component.
const html = ReactDOM.renderToStaticMarkup(<Component {...data} />)
res.status(route.status || 200)
res.send(`<!doctype html>${html}`)
///////////
// Here maybe your component.js
// Perfect, we can insert styles easily.
render() {
return (
{styles.map(({id, cssText, ...rest}) =>
<style
{...rest}
key={id}
id={id}
dangerouslySetInnerHTML={{ __html: cssText }}
/>
)}
)
}-
For server side, the lib will export
__universal__toglobal, and you can access it to get styles.__universal__.forEach(v => console.log(v.id, v.attrs, v.content))__universal__.map(v => console.log(v.id, v.attrs, v.content))Nothing will happens if you ignore
__universal__, 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.
Left is with style-loader and right is with iso-morphic-style-loader.