/css-constructor

💄 CSS constructor for React components

Primary LanguageJavaScriptMIT LicenseMIT

CSS constructor for React

 

Every React component gets an inbuilt javascript constructor for functional logic.

Introducing the css constructor for styling!

   

import React from 'react';
import css from 'css-constructor';                  // 👶 Super tiny: only 1.2K gzipped!

export default class Hello extends React.Component {

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

    /* css constructor */                           
    @css`                                           // 🔒 Isolated and co-located
        font-size: 16px;                            
        text-align: center;                         // 🎀 Supports the entirety of CSS

        color: {this.props.color};                  // 🔥 Use props in css

        display: flex;                              // 💻 Built in vendor prefixing

        &:hover {                                   // 🌀 Pseudo selectors
            color: #FFF;
        }

        img {                                       // 👪 Nested css
            border-radius: 50%;
        }
        #handle {
            margin-top: 20px;
        }

        @media (max-width: 600px) {                 // 📱 Media queries support
            & {font-size: 18px;}
        }
    `

    render () {
        return (<div>                               // 🔼 Attaches class to the highest element
            <img src="https://github.com/siddharthkp.png"/>
            <div id="handle">@siddharthkp</div>
        </div>)
    }
};

// <Hello color='papayawhip'/>

--

Other features

🙋 Uses classes instead of inline styles

🔧 Editable in developer tools

👶 Super tiny: only 1.2K gzipped!

💄 Official library emoji

Coming soon

🌏 server side rendering

--

Usage

  1. npm install css-constructor --save

  2. import css from 'css-constructor'

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

  4. Add transform-decorators-legacy as the first plugin in your .babelrc (already downloaded with 💄).

If you are not familiar with babel plugins you can follow the detailed instructions here.

Or, if you would prefer using 💄 without adding the babel transform for decorators, up-vote this issue.

--

How does it work?

💄 uses ES7 class method decorators on the render function. Detailed post coming soon.

Inspiration

Heavily inspired from glamor, styled-components and radium

Special thanks to thysultan. stylis is the bomb!

Support

⭐️ this repo!