React CSS components

Motivation

Define React presentational components with CSS (or even SASS or Less if you like).
The implementation is based on CSS modules. In fact React CSS Components is just a thin API on top of CSS modules.
NOTE: The current implementation is based on Webpack but everything is ready to be ported onto other build systems (generic API is here just not yet documented). Raise an issue or better submit a PR if you have some ideas.

Installation & Usage

Install from npm:

 npm install react-css-components style-loader css-loader  

Configure in webpack.config.js:

 module.exports = {  
  ...  
  module: {  
   loaders: [  
    {  
     test: /\.react.css$/,  
     loader: 'react-css-components',  
    }  
   ]  
  }  
  ...  
 }  

Now you can author React components in Styles.react.css:

 Label {  
  color: red;  
 }  
 Label:hover {  
  color: white;  
 }  

And consume them like regular React components:

 import {Label} from './styles.react.css'  
 <Label /> // => <div class="<autogenerated classname>">...</div>  

Base components

DOM components

By default React CSS Components produces styled

components. You can change that by defining base: property:

 FancyButton {  
  base: button;  
  color: red;  
 }  

Now renders into

Labels