React CSS components

Motivation

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.

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;
}

Label:hover {
  color: white;
}

And consume them like regular React components:

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

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

Variants

You can define additional styling variants for your components:

Label {
  color: red;
}

Label:emphasis {
  font-weight: bold;
}

They are compiled as CSS classes which then can be controlled from JS via variant prop:

<Label variant={{emphasis: true}} /> // sets both classes with `color` and `font-weight`

Prop variants

You can define variants which are based on some JavaScript expression against props:

Label {
  color: red;
}

Label:prop(mode == "emphasis") {
  font-weight: bold;
}

They are compiled as CSS classes which then can be controlled from JS:

<Label mode="emphasis" /> // sets both classes with `color` and `font-weight`

TODO

• Support adding PostCSS transform to build pipeline (think autoprefixer).