Candy - new way of styling react components

Hello! My name is Dan.

I developed a new approach to styling react components. In this article, I want to tell you about it.

The idea is very simple. We write the usual css, sass, less.

/* styles.css */

.root {
    color: white;
}

.red {
    backgroung-color: red;
}

And then we import html-tags-components from the style file. Each such component tag has boolean properties associated with the names of css classes.

import { Div } from './styles.css'

function Component(props) {
    return (
        <Div root red={props.red}>
            ...
        </Div>
    )
}

This opportunity is provided by a special webpack-loader - candy-loader.

We get the opportunity to write the usual css and the same familiar html. You can import any standard html tag. Tags are capitalized and extended with an additional set of properties, from which the className property is generated under the hood.

You can include css files and access their styles.

/* styles.css */
@import 'grid.css';

/*...*/

import { Div } from './styles.css'

function Component(props) {
    return (
        <Div root red={props.red} col_xs_12 col_sm_8>
            ...
        </Div>
    )
}

Easy configurable

candy-loader is based on postcss, so you can use the standard config file for further customization.

// .postcssrc.js

module.exports = {
    plugins: {
        autoprefixer: isProduction,
    },
    processOptions: {
        map: isDevelopment,
    },
}

Intellisense

There is a typescript-plugin-candy for that. A fairly easy to install and configure plugin that allows you to get autocomplete and type checking.

Conclusion

What do you think about this idea? Should it be further developed and improved?

Below I have provided links to the source code and a pre-made starter repo in case you want to play around with it.

• candy-loader
• typescript-plugin-candy
• candy-boilerplate

I will be glad to your comments and suggestions for development.

Thanks!