❤
npm
Sign UpSign In

isomorphic-style

0.0.14 • Public • Published

Isomorphic Style component for React & Webpack

CircleCI dependency status

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

License

The MIT License © 2017-2018 Bin Hou. All rights reserved.

Original isomorphic-style-loader code is Copyright © 2015-2016 Kriasoft, LLC. covered under MIT license.

Dependencies (2)

Dev Dependencies (12)

Package Sidebar

Install

npm i isomorphic-style

Repository

github.com/kouhin/isomorphic-style

Homepage

github.com/kouhin/isomorphic-style#readme

Weekly Downloads

4

Version

0.0.14

License

MIT

Last publish

Collaborators

  • kouhin
Try on RunKit
Report malware