css-constructor

0.1.7 • Public • Published

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!

Readme

Keywords

Package Sidebar

Install

npm i css-constructor

Weekly Downloads

1

Version

0.1.7

License

MIT

Last publish

Collaborators

  • siddharthkp