Webpack Candy loader

Load css files as pure react jsx components with classnames as boolean props

Install

npm i -D candy-loader

Settings

Update the loaders in your webpack.config.js file.

{
    rules: [
        {
            test: /\.css$/,
            use: ['style-loader', 'candy-loader'],
        },
    ],
}

Usage

Use classnames in camelCase mode

/* style.css */

.badge {
    color: white;
}
.coral {
    background-color: coral;
}
.green {
    background-color: green;
}

Import any html tag as pure jsx-component from css file

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

interface BadgeProps {
    color: 'coral' | 'green'
}

const Badge = (props: BadgeProps) => {
    const isCoral = props.color === 'coral'
    const isGreen = props.color === 'green'

    return (
        <Div badge coral={isCoral} green={isGreen}>
            Badge
        </Div>
    )
}

Imports

You can include css files and access their styles.

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

.root {
    /*...*/
}

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

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

Pass css-variables

If a property starts with a double underscore, then its value can be retrieved using var() on any class applied to the element.

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

function Component(props) {
    return (
        <Div name __fontSize="14px">
            John
        </Div>
    )
}

.name {
    color: black;
    font-size: var(--fontSize);
}

Get styles like css-modules

.box {
    width: 50px;
    height: 50px;
}

import styles from './styles.css'

function Box(props) {
    return <div className={styles.box}>...</div>
}

Based on postcss

You can use the usual postcss config file

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

Intellisense

Use typescript-plugin-candy for type checking & autocomplete