Isomorphic-style NPM

Isomorphic Style component for React & Webpack

Installation

npm install --save isomorphic-style

$ npm install isomorphic-style --save-dev

Usage

1. Webpack (webpack 2):

{
  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

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

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

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

3. Server side entry

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>
`);
...