Alternative syntax (without decorators/babel transform)

[Siddharth Kshetrapal]

Alternate syntax

✅ No decorators = no extra babel transforms
✅ CSS constructor looks like other class methods
✅ Position independent (don't have to place it right above render)
⚠️ Code is more verbose
⚠️ Adds a wrapper

import React from 'react';
import css from 'css-constructor';

class Hello extends React.Component {

    /* javascript constructor */
    constructor (props) {
        super(props);
    }

    /* css constructor */
    css (props) {
        return `
            font-size: 16px;
            text-align: center;
            color: {this.props.color};
            font-family: monospace;
        `;
    }

    render () {
        return <div>Styled {this.props.color} text!</div>
    }
};

export default css(Hello);