Skip to content
create CSS with pure javascript
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
js
misc
.gitignore
LICENSE
README.md

README.md

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.

You can’t perform that action at this time.