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
output:
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
output:
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: 03 jadzia
output:
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
output:
{}{}
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
output:
property values
A property value can be:
- a string, which is taken as is
- an empty string, which will appear in css as
''
(useful forcontent
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: 03 background: 'cyan' let rule = '#headline': paddingLeft: 5 color: 'cyan' border: 1 'dotted' 'white' 1 3 content: '' ...baseBlock background: null jadzia
output:
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
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
output:
options
are passed to selector and property functions. You can put your own values there for CSS parametrization:
example:
let '#headline': width: 300 color: optionstextColor border: 1 'dotted' optionsborderColor ; jadzia
output:
info
(c) 2019 Georg Barikin (https://github.com/gebrkn). MIT license.