iso-morphic-style-loader
v2.0.1
isomorphic style loader module for webpack
0/weekUpdated 3 years agoMIT
Published by creeperyang
npm install iso-morphic-style-loader[![npm][npm]][npm-url]
[![travis][travis]][travis-url]
[![license][license]][license-url]
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:
`js
/// 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(
res.status(route.status || 200)
res.send(${html})
///////////
// Here is your App.js
// Perfect, we can insert styles easily.
render() {
return (
{styles.map(({id, cssText, ...rest}) =>
{...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.
`js
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`.
[npm]: https://img.shields.io/npm/v/iso-morphic-style-loader.svg
[npm-url]: https://npmjs.com/package/iso-morphic-style-loader
[travis]: https://travis-ci.org/creeperyang/iso-morphic-style-loader.svg?branch=master
[travis-url]: https://travis-ci.org/creeperyang/iso-morphic-style-loader
[license]: https://img.shields.io/badge/license-MIT-blue.svg
[license-url]: https://raw.githubusercontent.com/creeperyang/iso-morphic-style-loader/master/LICENSE