Noosphere Possibilities Maximized

    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.

    Install

    npm i isomorphic-style

    DownloadsWeekly Downloads

    3

    Version

    0.0.14

    License

    MIT

    Last publish

    Collaborators

    • kouhin