jadzia v0.0.1
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 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: 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.
5 years ago