iso-morphic-style-loader

isomorphic style loader module for webpack

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
iso-morphic-style-loader
2.0.16 years ago6 years agoMinified + gzip package size for iso-morphic-style-loader in KB

Popular Searches

Readme

!npmnpmnpm-url !travistravistravis-url !licenselicenselicense-url 
<img width="200" height="200"
src="https://webpack.js.org/assets/icon-square-big.svg">
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(<!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.
```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.
  1. 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.
  1. 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.