universal-style-loader for webpack

A drop-in replacement for webpack's style-loader that won't bomb. Client rendering works exactly the same as style-loader. Server rendering defers style application to a future point (typically when serving the response). No dependencies on other isomorphic webpack loaders / plugins.




npm i -S universal-style-loader

By default, this module will accrue styles and link css urls when server rendering into a global.__universal__ object. If you do nothing, the universal-style-loader should never throw, but the styles will not be applied to anything (from the server render). There are a few options depending on your needs to get the styles on the page, server-side.


#### 1. replay function

* Executes the same script that would have been run by the style-loader, at a deferred point in time (hopefully, in a browser context).
* Will try and access window and other DOM globals. If they do not exist, it will repeat the same server fallback over again.

``js
global.__universal__.replay()
`

#### 2. serialize function

* Prints out a raw string that can be embedded in a web page head template (if you are not server rendering with React).
* Will embed all the style loading code with the styles and will run as soon as it is hit in the web page load.
* Does not interact with window, document or other DOM globals. (EVENTUALLY)

`
/* RENDER SOME STUFF THAT WOULD NORMALLY THROW WITH style-loader /
/* ... /

/* Prints out raw string styles to template into head and clears the buffer out for the next server render /
const styles = global.__universal__.serialize()

const html =


${styles}


${content}


``


#### 3. reactStyles function (recommended for react apps)

* Recommended for server-side rendering in React applications.
* Prints out a React component that can be rendered into the head tag (full react-router example below).
* Does not interact with window, document or other DOM globals. (EVENTUALLY)
* By using a factory, this library needs no npm React dependency.

`jsx
import React from 'react'
import { renderToString } from 'react-dom/server'
import { createMemoryHistory, match, RouterContext } from 'react-router'
import { Provider } from 'react-redux'
import { syncHistoryWithStore } from 'react-router-redux'

//....

router.use((req, res, next) => {
let memoryHistory = createMemoryHistory(req.path)
let store = configureStore(memoryHistory)
let history = syncHistoryWithStore(memoryHistory, store)

/ react router match history /
match({ history, routes, location: req.url }, (error, redirectLocation, renderProps) => {
const content = renderToString()

/* Returns a component that applies styles and clears the buffer for the next server render /
const Styles = global.__universal__.reactStyles(React)

const html =
${renderToString((





{content}


)}

res.send(html)
})

})
`

Documentation from style-loader (Client-side)

Adds CSS to the DOM by injecting a