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();