Propane

npm install propane --save

Propane is a library to style your React components with the help of dynamic CSS classes.

CAUTION: this library is still in a experimental fase, don't use it in production yet!

Overview

Propane enables you to write CSS classes in a behavioral way. This means that you don't have to write several CSS classes in order to reflect how the state affects the styling. With Propane you can combine state (props, state and context) and styling in a declarative way. In order to do so, Propane uses a custom syntax that can be seen as an extension of regular css.

So what does it look like?

const styles = {
    main: `
        width: 50px;
        height: 50px;
        backgroundColor: {props.color || 'blue'}

        &:hover {
            backgroundColor: 'orange';
        }

        (props.selected) {
            border: 2px solid green;
        }

        @desktop {
            width: 100px;
            height: 100px;
        }
    `
}

@Propane(styles);
class MyComponent extends React.Component {
    render() {
        const classes = this.props.classes;
        return <div className={classes.main}><div>;
    }
}

There are already several great libraries that solve the problem of styling react components. Here you'll find a list created by the Radium team. Propane's take on the problem of component styling is to completely remove any styling logic out of the component. The component only knows which styles to apply, not how they are applied. Basicly all styling logic has moved inside of the propane CSS classes. Try to see Propane as a function:

function (styleDeclarations, {props, state, context}) {
    // Propane magic here
    return css;
}

Features

• Seperate styling from components

  Your components will look cleaner. All logic related to styling is handled by Propane. Combined with the optional presentational props/state, fewer component re-renders are needed.

• Native css, including browser state and media queries

  No eventlisteners, or any javascript realy, are involved

• Define your mediaqueries once at the root of your app

• Automatic vendor prefixing

• Expressive syntax

• Css properties that are used often can be replaced with mixins and constants

• Other goodies such as shorthand syntax

Docs

Read the documentation here.

Basic usage

Place the StyleRoot component in the root of your app:

import React from 'react';
import { render } from 'react-dom';
import { StyleRoot } from 'propane';

function App() {
    return (
        <StyleRoot>
            ...
        </StyleRoot>
    );
}

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

Define styles and wrap your component with Propane:

import React from 'react';;
import { Propane } from 'propane';

const styles = {
    list: '...',
    listItem: '...'
};

function List({ classes, items }) {
    const listItems = items.map(
        ({ name, id }) => <li className={classes.listItem} key={id}>{name}</li>
    );

    return (
        <ul className={classes.list}>
            {listItems}
        </ul>
    );
}

export default Propane(styles)(List);

Examples

To run the examples:

npm install
npm run example

How does Propane work?

The StyleRoot component is responsible for keeping the style tag located in the head od the document consistent with the css provided from the Propane components. It collects regular css updated from components and pushes it into the DOM at once, after a react update cycle has completed.

The Propane component is reponsible for generating css based on the dynamic context (props, state, context) and given style declarations (Propane/CSS-syntax). Basicly it converts the style declaration into a object tree containing selectors and properties using regular expressions, splits them into a dynamic and static part, and creates a function for both parts. These functions take an generated id, global depencencies from the StyleRoot (mixins, constants, mediaqueries) and components state (props, state, mixins) and will generate the css which it will provide to the StyleRoot.

Future goals

• Support server side rendering
• Better error logging