node-style-loader

A Webpack loader for loading styles on the server side. It behaves almost identically to how style-loader operates on the client side, which allows you to use it without changing the way you load CSS in your application components.

Similarly to how style-loader loads styles into the DOM, this package supports critical path style rendering without imposing any import splitting method. This allows you to have a style loading path independant from your rendering path and has performance implications.

Installation

``
$ npm install node-style-loader --save-dev
`

Usage

$3

`js
target: 'node',
module: {
loaders: [
{
test: /\.css$/,
loader: node-style!css
},
...
`

$3

#### Simple usage

`js
import App from 'components/App'
import {collectInitial} from 'node-style-loader/collect'

// do not call this before your application component has been imported
const initialStyleTag = collectInitial()

function renderPage(props) {

const reactString = renderToString(createElement(App, props))

return(




${initialStyleTag}


)
}
`

#### Usage for import splitting

If you conditionally import components during rendering (e.g. in your routes), or import styles in your component render functions, you need to use collectContext to collect the critical path CSS.

`js
import {collectInitial, collectContext} from 'node-style-loader/collect'

// do not call this before your routes have been imported
const initialStyleTag = collectInitial()

function renderPage(contextEl, props) {

// render and capture CSS
const [contextStyleTag, reactString] = collectContext(
() => renderToString(createElement(contextEl, props)))

return(




${initialStyleTag}
${contextStyleTag}

)
}

`

$3

`js
import serverStyleCleanup from 'node-style-loader/clientCleanup'

// initial react render
render(AppElement)

// remove server-generated CSS after your first render
serverStyleCleanup()
`

Server-side style rendering loaders comparison

| | style collection | CSS Modules | style import splitting | shadows style-loader rendering |
| --- | ---------------- | ----------- | ---------------------- | ------------------------------ |
| node-style-loader | yes | yes | yes, standard | partial |
| react-webpack-server-side-example | incomplete | no | partial, standard | no |
| style-collector-loader | requires globals | no | no | no |
| fake-style-loader | partially out of scope | yes | N/A | no |
| isomorphic-style-loader | yes | yes | partial, non-standard | no |

Roadmap

- add test coverage
- test contextCollect
- test deduping
- add support for media/sourceMap
- add support for stylesheet url
- test/add hot reload support
- optimize speed/inject stylesInDom into style-loader to save first style load on client

License

Original style-loader` code is Copyright 2016 Tobias Koppers covered under MIT license. Subsequent work is Copyright 2016 iHeartRadio covered under Apache 2.0 license.