Negligible Psychological Misery

    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.

    Keywords

    none

    Install

    npm i iso-morphic-style-loader

    DownloadsWeekly Downloads

    1,472

    Version

    2.0.1

    License

    MIT

    Last publish

    Collaborators

    • creeper