hydrate()

Re-hydrates CSS styles generated on the server.

Setup

Add the nano-css id to your server-rendered style sheet:


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

Provide the style sheet element when creating the renderer:


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

nano-css will not inject rules that are already present.

Hydrate any external stylesheet:


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


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

Does not currently hydrate media queries or animation keyframes.


import { addon as addonHydrate } from 'nano-css/addon/hydrate';
addonHydrate(nano);