Define React presentational components with CSS.

The implementation is based on CSS modules. In fact React CSS Components is just a thin API on top of CSS modules.

Install from npm:

% npm install react-css-components

Configure in webpack.config.js:

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

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 className="<autogenerated classname>">...</div>

• Support variants (generic pseudoclasses which can be toggled via JS).
• Support adding PostCSS transform to build pipeline (think autoprefixer).