siddharthkp / css-constructor

💄 CSS constructor for React components

 

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!

css-constructor's Issues

Alternative syntax (without decorators/babel transform)

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);

Chrome 66

Last night, I successfully built the demonstration application, feeding it through gulp to get a nice bundle.js that I could load into a Web browser from my local Apache Web server. I had it working exactly as expected in both Edge and Chrome. This morning, I modified it to implement the suggestion discussed in Alternative syntax (without decorators/babel transform) #1, at https://github.com/siddharthkp/css-constructor/issues/1, and switched over to Chrome to have a look. To my dismay, I discovered that the page rendered as shown below.

On further investigation, I discovered that Chrome was now at version 66, having updated itself at the start of my new work session. As a further test, I reverted to the original decorated implementation, with the same result. Finally, I displayed the reverted page in Edge, where I found that it rendered as it had last night, as shown below.

Next, I turned my attention to my global browserslist, which happens to be the default list. As I explained and showed at https://github.com/browserslist/browserslist/issues/255, I discovered that the newest Chrome browser listed is 65, leading me to wonder whether that was the source of the rendering behavior change. If so, this suggests a worrisome weakness in the implementation of either browseerlist or something else in the build pipeline.

I don't know enough to answer that question. For now, I suppose that I am stuck with using Edge for testing, until the default list is updated to cover Chrome 66. I am keen to learn if there is a better way to resolve this issue. Hailing frequencies are open.

Optimise CSS by using unique hash

Optimise the CSS classes by passing it through a pure hash function

How does it work?

Hi, @siddharthkp!

This is terrific, man! I really like your approach 👍
Could you, please, tell me.. How is it supposed to work? Does it compile to css in the end? Or is it possible to accumulate all these properties to one separate css file?