# Isomorphic CSS style loader for [Webpack](http://webpack.github.io)
[](https://www.npmjs.com/package/isomorphic-style-loader)
[](https://www.npmjs.com/package/isomorphic-style-loader)
[](https://travis-ci.org/kriasoft/isomorphic-style-loader)
[](https://coveralls.io/github/kriasoft/isomorphic-style-loader)
[](https://david-dm.org/kriasoft/isomorphic-style-loader)
[](https://gitter.im/kriasoft/react-starter-kit)
> An alternative CSS style loader, which works similarly to
> [style-loader](https://github.com/webpack/style-loader), but is optimized for
> [isomorphic apps](http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/).
> In addition to what style-loader provides, it allow to render
> [critical path CSS](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/)
> during server-side rendering (SSR), by adding two helper methods on to the
> `styles` object - `._insertCss()` (injects CSS into the DOM) and `._getCss()`
> (returns CSS string).
### How to Install
```
$ npm install isomorphic-style-loader --save-dev
```
### Getting Started
##### Webpack configuration:
```js
{
module: {
loaders: [
{
test: /\.scss$/,
loaders: [
'isomorphic-style-loader',
'css-loader?modules&localIdentName=[name]_[local]_[hash:base64:3]',
'postcss-loader'
]
}
]
}
}
```
**Note**: Configuration is the same for both client-side and server-side bundles.
##### React component example
```scss
// MyComponent.scss
.root { padding: 10px; }
.title { color: red; }
```
```js
// MyComponent.js
import React, { PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './MyComponent.scss';
function MyComponent(props, context) {
return (
Hello, world!
);
}
export default withStyles(MyComponent, s); // <--
```
**P.S.**: It works great with [CSS Modules](https://github.com/css-modules/css-modules)!
Just decorate your React component with the [withStyles](https://github.com/kriasoft/isomorphic-style-loader/blob/master/src/withStyles.js)
higher-order component, and pass a function to your React app via `insertCss`
context variable (see [React's context API](https://facebook.github.io/react/docs/context))
that either calls `styles._insertCss()` on a client, or `styles._getCss()`
on the server. See server-side rendering example below:
```js
import express from 'express';
import ReactDOM from 'react-dom';
import router from './router.js'; // <-- isomorphic router, see react-starter-kit for example
const server = express();
const port = process.env.PORT || 3000;
// Server-side rendering of the React app
server.get('*', (req, res, next) =>
const css = []; // CSS for all rendered React components
const context = { insertCss: (styles) => css.push(styles._getCss()) };
router.dispatch({ ...req, context }).then((component, state) => {
const body = ReactDOM.renderToString(component);
const html = `
${body}
`;
res.status(state.statusCode).send(html);
}).catch(next);
});
server.listen(port, () => {
console.log(`Node.js app is running at http://localhost:${port}/`);
});
```
It should generate an HTML output similar to this one:
```html
My Application
```
Regardless of how many styles components there are in the `app.js` bundle,
only critical CSS is going to be rendered on the server inside the ``
section of HTML document. Critical CSS is what actually used on the
requested web page, effectively dealing with [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)
issue and improving client-side performance. CSS of the unmounted components
will be removed from the DOM.
##### Hot Reload
You can activate hot module reload for style by setting the `debug` option to true in your webpack
configuration. If you are using webpack 2, you need to supply it though the `LoaderOptionsPlugin`
because the [`debug` option has been removed](https://gist.github.com/sokra/27b24881210b56bbaff7#loader-options--minimize).
### Backers
♥ Isomorphic Style Loader? Help us keep it alive by [donating funds](https://www.patreon.com/tarkus) to cover project expenses!
### Related Projects
* [React Starter Kit](https://github.com/kriasoft/react-starter-kit) — Isomorphic web app boilerplate
### Support
* [#react-starter-kit](https://gitter.im/kriasoft/react-starter-kit) on Gitter
* [@koistya](https://www.codementor.io/koistya) on Codementor
### License
The MIT License © 2015-2016 Kriasoft, LLC. All rights reserved.
---
Made with ♥ by Konstantin Tarkus ([@koistya](https://twitter.com/koistya)) and [contributors](https://github.com/kriasoft/isomorphic-style-loader/graphs/contributors)