taddy

Compile-time Atomic CSS-in-JS

Quick Start

npm install --save taddy

import React from 'react'

import {css} from 'taddy'

export function Title() {
    return (
        <h1 {...css({color: 'blueviolet'})}>
            Hello, taddy!
        </h1>
    )
}

Usage

css

There is an agnostic css function, that returns an object of className and style.

That's a framework-agnostic function, so it's ready for the usage at any environment.

// button = {className: 'hash1 hash2', style: {}}
const button = css({padding: '10px', border: 'none'});

pseudo classes

const button = css({
    padding: '10px',
    border: 'none',
    color: 'red',

    ':hover': {
        color: 'blue',
    },
});

css.mixin

In terms of taddy, mixin is a special styling object, that can be used as a part of styles by css.

To declare the mixin styles, there is a special function css.mixin:

const heading = css.mixin({
    fontSize: '20px',
    fontWeight: 'bold',
});

mixin also could be used as a named export:

import {mixin} from 'taddy';

const heading = mixin({
    fontSize: '20px',
    fontWeight: 'bold',
});

merge

Mixin can be applied by spreading to the styles, consumed by css:

const heading = css.mixin({
    fontSize: '20px',
    fontWeight: 'bold',
});

const Title = ({children}) => (
    <h1 {...css({...heading, color: 'crimson'})}>{children}</h1>
);

Mixins also could be used on the nested level:

const halfTransparent = css.mixin({
    opacity: 0.5,
});

const Title = ({children}) => (
    <h1
        {...css({
            color: 'crimson',

            ':hover': halfTransparent,
        })}
    >
        {children}
    </h1>
);

composes

Mixins are cool, but they have some restrictions.

For example, let's consider two mixins:

const colorStateful = css.mixin({
    color: 'red',

    ':hover': {
        color: 'blue',
    },
});

const opacityStateful = css.mixin({
    opacity: 1,

    ':hover': {
        opacity: 0.5,
    },
});

In terms of merge, the result of css({...colorStateful, ...opacityStateful}) would be {color: 'red', opacity: 1, ':hover': {opacity: 0.5}}

But what if we want to apply both mixins together?

There is composes interface for that (mixins and styles as css arguments):

const Title = ({children}) => (
    <h1
        {...css(colorStateful, opacityStateful, {
            textDecoration: 'underline',
        })}
    >
        {children}
    </h1>
);