https://github.com/larsnystrom/module-style

Declarative way to specify module-css with React.
https://github.com/larsnystrom/module-style

css css-modules react

Last synced: 10 months ago
JSON representation

Declarative way to specify module-css with React.

• Host: GitHub
• URL: https://github.com/larsnystrom/module-style
• Owner: larsnystrom
• License: isc
• Created: 2016-09-13T09:21:14.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-09-13T10:28:12.000Z (over 9 years ago)
• Last Synced: 2025-03-23T15:39:36.524Z (10 months ago)
• Topics: css, css-modules, react
• Language: JavaScript
• Size: 2.93 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

          
# ModuleStyle

Declarative way to specify module-css with React, using [css-loader](https://github.com/webpack/css-loader) and [react-side-effect](https://github.com/gaearon/react-side-effect).

Can be used both on the client and the server.

## Install

    npm install --save module-style

## Usage

The `ModuleStyle` component is supposed to be used in tandem with [`css-loader`](https://github.com/webpack/css-loader), preferrably with [`css-modules`](https://github.com/webpack/css-loader#css-modules).

### Example

Install dependencies

    npm install --save module-style

    npm install --save-dev css-loader

`MyModule.js`: React component

    import React from 'react';

    import ModuleStyle from 'module-style;

    import style, { locals as s } from './MyModule.css';

    const MyModule = () =>

      

        


          


            
My module page

            
...

          

        

      


    export default MyModule;

`MyModule.css`: Stylesheet

    .root {

        background-color: blue;

    }

    .container {

        background-color: red;

    }

`webpack.config.js`: Webpack configuration

    {

      module: {

        loaders: [

          {

            test: /\.css/,

            loaders: [

              'css-loader?modules',

            ],

          },

        ],

      },

    }

### Server-side

On the server you can get the style with the `ModuleStyle.rewind()` function.

    import ReactDOM from 'react-dom';

    import ModuleStyle from 'module-style';

    import MyModule from './MyModule';

    // ...

    app.get('*', (req, res) => {

        const content = ReactDOM.renderToString();

        const style = ModuleStyle.rewind();

        res.send(`

            

                

                    

                    ${style}

                

                

                    
${content}

                

            `);

    });


## License

[ISC License](LICENSE.txt).