React CSS components

A React centric convention for CSS modules.

(Currently only Webpack is supported but support for other build system can be added later.)

Motivation

Provide a simplified component based API for consuming CSS modules which abstracts the call site from being dependent on CSS modules.

Installation & Usage

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;

  :hover {
    color: white;
  }
}

And consume them like regular React components:

import {Label} from './styles.react.css'

<Label /> // => <div className="<autogenerated classname>">...</div>

TODO

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