πŸ’„ CSS constructor for React components
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
.gitignore
.travis.yml
LICENSE
README.md
api.js
header.png
package-lock.json
package.json

README.md

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!