capybara v0.1.2
capybara
Generate static CSS via JavaScript.
Purpose
Maybe you are working on a big project with a gazillions modules and you lost track of your CSS or you just want do dynamic stuff via js.
Usage
The first step is to inject CSS into the virtual CSS tree. As first parameter pass a name of your CSS chunk and as second parameter pass all your CSS properties.
const hundred = '100%';
capybara.inject('base', {
'html': {
'font-family': 'sans-serif',
'-ms-text-size-adjust': hundred,
'-webkit-text-size-adjust': hundred
}
});
You can inject as many CSS chunks as you like.
After injecting all your needed CSS chunks, just call generate
.
capybara.generate();
In our example this will generate the following inline css.
<style type="text/css">html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}</style>
Comments
If you like to add comments do this via the third optional parameter.
const hundred = '100%';
const comment = `This is our base css needed for
all our modules`;
capybara.inject('base', {
'html': {
'font-family': 'sans-serif',
'-ms-text-size-adjust': hundred,
'-webkit-text-size-adjust': hundred
}
}, comment);
<style type="text/css">
/* This is our base css needed for
all our modules */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}</style>
Analyse
So if you want to find out if there are duplicate definitions of your CSS use analyse
or readAble
capybara.analyse();
Will return an array with objects, which are telling you where to find your duplications.
capybara.readAble();
Returns a human readable string like In base, blog duplicate: "a"
Free
Maybe the CSS tree is eating to much memory and you want to free this memory use free
capybara.free();