<commit_before># Isomorphic Style component for React & Webpack

[![CircleCI](https://circleci.com/gh/kouhin/isomorphic-style/tree/develop.svg?style=svg)](https://circleci.com/gh/kouhin/isomorphic-style/tree/develop)
[![dependency status](https://david-dm.org/kouhin/isomorphic-style.svg?style=flat-square)](https://david-dm.org/kouhin/isomorphic-style)

## Installationg

```
npm install --save isomorphic-style
```

```
$ npm install isomorphic-style --save-dev
```

## Usage

### 1. Webpack (webpack 2):

```js
{
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'isomorphic-style/loader',
            options: {
              insertAt: 'istyle_loc',
              prefix: 'istyle_',
            },
          },
          {
            loader: `css-loader?modules&importLoaders=1&localIdentName=${CSS_IDENT_NAME}`,
          },
          {
            loader: 'postcss-loader', // for postcss, optional
          },
        ],
      }
    ]
  }
}
```

### 2. In React component

```css
// MyComponent.css
.Block {
  background-color: lightgray;
}
.Title {
  font-weight: bold;
  font-size: 20px;
}
```

```javascript
// MyComponent.js
import React from 'react';
import { Style } from 'isomorphic-style';
import style from './MyComponent.css';

export default class MyComponent extends React.Component {
  return (
    <div className={style.Block}>
      <Style style={style} />
      <h1 className={style.Title}>MyComponent!</h1>
    </div>
  );
}
```

### 3. Server side entry

```javascript
import { collectStyles } from 'isomorphic-style';

...
const [styles, body] = collectStyles(() => ReactDOMServer.renderToString(
    <Provider store={store}>
      <RouterContext {...renderProps} />
    </Provider>,
));

// res is express Response object
res.send(`
<html>
  <head>
    ${styles.join()}
    <style id="istyle_loc"></style>
    <link rel="stylesheet" href="skin.css" />
  </head>
  <body>
    <div id="App">
      ${body}
    </div>
    <script src="main.js"></script>
  </body>
</html>
`);
...
```
### License

The MIT License © 2015-2016 Kriasoft, LLC. All rights reserved.

Original isomorphic-style-loader code is Copyright © 2015-2016 Kriasoft, LLC. covered under MIT license. <commit_msg>fix a typo<commit_after># Isomorphic Style component for React & Webpack

[![CircleCI](https://circleci.com/gh/kouhin/isomorphic-style/tree/develop.svg?style=svg)](https://circleci.com/gh/kouhin/isomorphic-style/tree/develop)
[![dependency status](https://david-dm.org/kouhin/isomorphic-style.svg?style=flat-square)](https://david-dm.org/kouhin/isomorphic-style)

## Installation

```
npm install --save isomorphic-style
```

```
$ npm install isomorphic-style --save-dev
```

## Usage

### 1. Webpack (webpack 2):

```js
{
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'isomorphic-style/loader',
            options: {
              insertAt: 'istyle_loc',
              prefix: 'istyle_',
            },
          },
          {
            loader: `css-loader?modules&importLoaders=1&localIdentName=${CSS_IDENT_NAME}`,
          },
          {
            loader: 'postcss-loader', // for postcss, optional
          },
        ],
      }
    ]
  }
}
```

### 2. In React component

```css
// MyComponent.css
.Block {
  background-color: lightgray;
}
.Title {
  font-weight: bold;
  font-size: 20px;
}
```

```javascript
// MyComponent.js
import React from 'react';
import { Style } from 'isomorphic-style';
import style from './MyComponent.css';

export default class MyComponent extends React.Component {
  return (
    <div className={style.Block}>
      <Style style={style} />
      <h1 className={style.Title}>MyComponent!</h1>
    </div>
  );
}
```

### 3. Server side entry

```javascript
import { collectStyles } from 'isomorphic-style';

...
const [styles, body] = collectStyles(() => ReactDOMServer.renderToString(
    <Provider store={store}>
      <RouterContext {...renderProps} />
    </Provider>,
));

// res is express Response object
res.send(`
<html>
  <head>
    ${styles.join()}
    <style id="istyle_loc"></style>
    <link rel="stylesheet" href="skin.css" />
  </head>
  <body>
    <div id="App">
      ${body}
    </div>
    <script src="main.js"></script>
  </body>
</html>
`);
...
```
### License

The MIT License © 2017-2018 <NAME>. All rights reserved.

Original isomorphic-style-loader code is Copyright © 2015-2016 Kriasoft, LLC. covered under MIT license. 
{'fraction_non_alphanumeric': 0.17328599955624585, 'fraction_numerical': 0.011093854004881295, 'mean_word_length': 2.647249190938511, 'pattern_counts': {'":': 0, '<': 46, '<?xml version=': 0, '>': 48, 'https://': 8, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1610325', 'n_tokens_mistral': 1529, 'n_tokens_neox': 1452, 'n_words': 307}