`hydrate` Addon

Re-hydrates CSS styles generated on the server.

First, install the hydrate addon, then add nano-css id to your style sheet.

html += `<style id="nano-css">${nano.raw}</style>`;

And when creating nano-css instance provide that style sheet in configuration.

const isClient = typeof document === 'object';

const nano = create({
    sh: isClient ? document.getElementById('nano-css') : null
});

That's it! nano-css will not inject CSS rules are already present in the style sheet.

You can also manually hydrate any stylesheet or external stylesheet you might have created using extract addon.

Let's say you have and external style sheet:

<link rel="stylesheet" type="text/css" href="extracted.css" id="extracted-css">

You can hydrate it like so:

nano.hydrate(document.getElementById('extracted-css'));

P.S. Currently, does not hydrate media queries or animation keyframes.

Installation

Simply install hydrate addon.