jadzia

jadzia generates css from javascript objects.

example:

let rule = {
    '#headline': {
        width: 300,
        paddingLeft: 5,

        'div': {
            font: [12, 'Arial'],
        },

        '&.active': {
            color: 'cyan',
            ':hover': {
                color: 'blue'
            }
        }
    }
}

jadzia.css(rule)

output:

#headline {
    width: 300px;
    padding-left: 5px;
}
#headline div {
    font: 12px Arial;
}
#headline.active {
    color: cyan;
}
#headline.active:hover {
    color: blue;
}

jadzia is useful if you (like me):

• write lots of complex and highly parametrized CSS
• know javascript and don't want to learn ad-hoc CSS languages
• like to be framework-agnostic and keep CSS where it belongs: in .css files

input

jadzia's input is a rule, which is an object containing css properties. You can also pass an array of such objects or a function that returns such an object.

A rule can also contain other nested rules with their respective selectors.

example:

let rule = {
    '#headline': {
        // css props
        width: 300,
        paddingLeft: 5,

        // nested rule
        'div': {
            font: [12, 'Arial'],

            // another nested rule
            '.important': {
                fontWeight: 800
            }
        }
    }
}

jadzia.css(rule)

output:

#headline {
    width: 300px;
    padding-left: 5px;
}
#headline div {
    font: 12px Arial;
}
#headline div .important {
    font-weight: 800;
}

selectors

Selectors are just like css selectors. If a nested selector starts with an & or :, it's merged with the parent selector. For comma-separated nested selectors, jadzia creates all possible combinations of them. Selectors that end with an & are prepended to the parent.

example:

let rule = {
    '#headline': {
        width: 300,
        paddingLeft: 5,

        // simple sub-selector
        'div': {
            font: [12, 'Arial'],
        },

        // merge with parent
        '&.active': {
            color: 'cyan'
        },

        // prepend to parent
        '.dark-theme&': {
            color: 'black'
        },

        // create combinations
        'em, strong': {
            opacity: 0.3
        }
    }
}

jadzia.css(rule)

output:

#headline {
    width: 300px;
    padding-left: 5px;
}
#headline div {
    font: 12px Arial;
}
#headline.active {
    color: cyan;
}
.dark-theme #headline {
    color: black;
}
#headline em {
    opacity: 0.3;
}
#headline strong {
    opacity: 0.3;
}

media selectors

Media selectors are moved to the topmost level and merged.

example:

let rule = {
    '#headline': {
        '@media screen': {
            '@media (max-width: 800px)': {
                width: 800,
            }
        },
        '@media print': {
            display: 'none'
        }
    },
    article: {
        '@media screen and (max-width: 800px)': {
            width: '100%',
        },
        '@media print': {
            fontSize: 11
        }
    }
}

jadzia.css(rule)

output:

@media screen and (max-width: 800px) {
    #headline {
        width: 800px;
    }
    article {
        width: 100%;
    }
}
@media print {
    #headline {
        display: none;
    }
    article {
        font-size: 11px;
    }
}

property names

CSS property names can be quoted, or written with an underscore instead of a dash, or in camelCase:

example:

let rule = {
    '#headline': {
        paddingLeft: 5,
        padding_top: 10,
        'padding-bottom': 20,
        _webkitTransition: 'all 4s ease',
    }
}

jadzia.css(rule)

output:

#headline {
    padding-left: 5px;
    padding-top: 10px;
    padding-bottom: 20px;
    -webkit-transition: all 4s ease;
}

property values

A property value can be:

• a string, which is taken as is
• an empty string, which will appear in css as '' (useful for content props)
• a number, the default unit will be added if required
• an array, which will appear space-joined
• null, in which case the property will be removed (useful when extending base rules)
• a function returning one of the above

example:

const minMargin = 5;

const baseBlock = {
    display: 'block',
    opacity: 0.3,
    background: 'cyan',
}

let rule = {
    '#headline': {
        paddingLeft: 5,
        color: 'cyan',
        border: [1, 'dotted', 'white'],

        margin: () => [1, 3].map(x => x + minMargin),
        content: '',

        ...baseBlock,
        background: null,
    }
}

jadzia.css(rule)

output:

#headline {
    padding-left: 5px;
    color: cyan;
    border: 1px dotted white;
    margin: 6px 8px;
    content: '';
    display: block;
    opacity: 0.3;
}

API

jadzia.css(rules, options)

takes rules and returns formatted CSS.

jadzia.object(rules, options)

takes rules and returns a normalized CSS object.

jadzia.format(object, options)

formats a normalized object into CSS.

example:

let rule = {
    '#headline': {
        width: 300,
        paddingLeft: 5,

        'div': {
            font: [12, 'Arial'],
        }
    }
}

JSON.stringify(jadzia.object(rule), null, 4)

output:

{
    "#headline": {
        "width": "300px",
        "padding-left": "5px"
    },
    "#headline div": {
        "font": "12px Arial"
    }
}

The options are:

option| |default ------|----|---- customs | list of custom properties that should be preceded with two dashes | [] indent | indentation for the generated CSS | 4 sort | sort selectors and property values | false unit | default unit for numeric values | px

example:

let rule = {
    '#headline': {
        zIndex: 3,
        padding: 5,
        mainBgColor: 'cyan'
    }
}

jadzia.css(rule, {
    unit: 'em',
    indent: 2,
    sort: true,
    customs: ['main-bg-color'],
})

output:

#headline {
  --main-bg-color: cyan;
  padding: 5em;
  z-index: 3;
}

options are passed to selector and property functions. You can put your own values there for CSS parametrization:

example:

let rule = options => ({
    '#headline': {
        width: 300,
        color: options.textColor,
        border: [1, 'dotted', options.borderColor],
    }
});

jadzia.css(rule, {
    textColor: '#cc0000',
    borderColor: 'cyan'
})

output:

#headline {
    width: 300px;
    color: #cc0000;
    border: 1px dotted cyan;
}

info

(c) 2019 Georg Barikin (https://github.com/gebrkn). MIT license.