feat: change how hydration sheet is located

addon/hydrate.js

@@ -1,19 +1,17 @@
 'use strict';
 
-exports.addon = function (renderer, id) {
-    id = id || 'nano-css';
-
+exports.addon = function (renderer) {
     if (process.env.NODE_ENV !== 'production') {
         require('./__dev__/warnOnMissingDependencies')('hydrate', renderer, ['put']);
     }
 
     if (renderer.client) {
         var hydrated = {};
-        var stylesheet = document.getElementById(id);
+        var stylesheet = renderer.sh;
 
         if (!stylesheet) {
             if (process.env.NODE_ENV !== 'production') {
-                console.error('Hydration stylesheet with id "' + id + '" was not found.');
+                console.error('Hydration style sheet was not found.');
             }
 
             return;

docs/SSR.md

@@ -12,8 +12,12 @@ html += `<style>${nano.raw}</style>`;
 ## Re-hydrating
 
 `nano-css` can re-hydrate server-side generated CSS. To do that, you need to install [`hydrate` addon](hydrate.md);
-and set `nano-css` id on your `<style>` element.
+and provide style sheet you want to hydrate to the `nano-css` instance when creating it.
 
 ```js
+const nano = create({
+    sh: typeof document === 'object' ? document.getElementById('nano-css') : null
+});
+
 html += `<style id="nano-css">${nano.raw}</style>`;
 ```

docs/hydrate.md

@@ -6,20 +6,16 @@ Re-hydrates CSS styles generated on the server. On the server add `nano-css` id
 html += `<style id="nano-css">${nano.raw}</style>`;
 ```
 
-That's it! `hydrate` addon will find this stylesheet in the browser and will not emit CSS
-rules that were already generated by the server.
-
-
-## Configuration
-
-You can set a custom id for you style sheet.
+And when creating `nano-css` instance provide that style sheet in configuration.
 
 ```js
-import {addon as addonHydrate} from 'nano-css/addon/hydrate';
-
-addonHydrate(nano, 'custom-id');
+const nano = create({
+    sh: typeof document === 'object' ? document.getElementById('nano-css') : null
+});
 ```
 
+That's it!
+
 
 ## Installation
 

index.js

@@ -39,7 +39,8 @@ exports.create = function (config) {
     }, config);
 
     if (renderer.client) {
-        document.head.appendChild(renderer.sh = document.createElement('style'));
+        if (!renderer.sh)
+            document.head.appendChild(renderer.sh = document.createElement('style'));
 
         renderer.putRaw = function (rawCssRule) {
             if (process.env.NODE_ENV === 'production') {