Css selector for React Components

Attention - This project is not completed yet.

Styling components is a critical point when we decide to develop in React. There are a lot of ways in which we can do this but all of these have pro and cons. In some situations this means having a strong connection with the source code, that is not so good. With ReactCSSOM we have tried to develop a system that allows us to separate js and css.

Using ReactCSSOM means:

• Scoped styles based on component's structure
• Each Component has its own style.css
• No extra inline styles, use them only when and where you really need, this means better performance
• No limitations to CSS power
• Easy to use with CSS Preprocessors (no more stuff needed)
• Highly expressive
• Lightweight, only 100 lines of js

You can install react-cssom using npm:

npm install --save react-cssom

If you aren't using npm in your project, you can include ReactCSSOM using UMD build in the dist folder with <script> tag.

Once you have installed react-cssom, supposing a CommonJS environment, you can import it in your index file, before ReactDOM.render and App import.

import React from 'react';
import ReactDOM from 'react-dom';
import ReactCSSOM from 'react-cssom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Now you can use react-cssom as you can see in the gif above, just like normal css, but with a special selector for React Components. You can load styles in the way that you prefer but is important to keep in mind that selectors must be in this form:

.⚛ComponentName

For example, this is a valid one .⚛App. So, pay attention that components' names and css selectors always match. This is particular important if you have css-modules that modifies the original names, or code obfuscation.

The first ones for example need a syntax like this:

:global .⚛ComponentName {
	/* styles here */
}

And the second one, considering for example a minification process with webpack's UglifyJsPlugin (see here for more information), need a component with a displayName attribute like this:

class ComponentName extends React.Component {

	static propTypes = {
		// propTypes...
	}

	// this
	static displayName = 'ComponentName';

	render() {
		// render here...
	}
}

// or this
// ComponentName.displayName = 'ComponentName';

If you want to set styles based on props, you can do it in 2 ways:

• Set inline styles, as we can see in this example:

class Button extends React.Component {

	static displayName = 'Button';

	render() {
		return (
			<button
				style={{
					backgroundColor: this.props.primary ? 'blue' : 'black',
				}}
			>
				Click me
			</button>
		)
	}
}

• Set a specific class, maybe using css-modules, as we can see here:

import styles from './Button.css';

export default class Button extends React.Component {

	static displayName = 'Button';

	render() {
		return (
			<button
				className={this.props.primary ? styles.primary : styles.default}
			>
				Click me
			</button>
		)
	}
}

and here is the corresponding css, note the global selector:

:global .⚛Button {
	height: 50px;
	width: 100px;
}

.primary {
	background-color: blue;
}

.primary:global.⚛Button {
	color: yellow;
}

.default {
	background-color: grey;
}

.default:global.⚛Button {
	color: black;
}

This project adheres to Semantic Versioning.
Every release, along with the migration instructions, is documented on the Github Releases page.

Matteo Basso

• github/mbasso
• @teo_basso

Copyright (c) 2016, Matteo Basso.

react-cssom source code is licensed under the MIT License.