--

Every React component gets a javascript constructor for functional logic.

Introducing the css constructor for styling!

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

export default class Hello extends React.Component {

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

    /* css constructor */
    @css`
        font-size: 16px;
        text-align: center;
        color: #5AF78E;
        font-family: monospace;
    `

    render () {
        return <div>Styled text!</div>
    }
};

--

Features:

🎀 Supports real css

🔥 use props in css

🔼 Attaches inline styles to the highest element in your component

💄 Offical library emoji

--

Coming soon

🙋 classes instead of inline styles

🌀 pseudo selectors

📱 media queries support

👪 nested css

--

1. npm install css-constructor --save

2. Add a @css block just before the render function (important)

3. Add transform-decorators-legacy as the first plugin in your .babelrc. It is already downloaded with 💄; If you are not familiar with babel plugins you can follow the detailed instructions here.

You can start using this right away. Even though 💄 is in BETA, the @css block will always look the same.

💄 uses ES7 class function decorators on the render function. I'll probably write a detailed post about it.

Heavily inspired from glamor, styled-components and radium

If you think 💄 is useful for your project, ⭐️ this repo for my motivation 🙇🏻