mark the twind style sheet

.changeset/fresh-mails-whisper.md

@@ -0,0 +1,12 @@
+---
+'twind': patch
+---
+
+mark the twind style sheet
+
+```html
+<!-- the SSR stylesheet -->
+<style data-twind="ssr"></style>
+<!-- the client stylesheet -->
+<style data-twind></style>
+```

package.json

@@ -50,13 +50,13 @@
       "path": "packages/twind/dist/twind.esnext.js",
       "import": "{ setup }",
       "brotli": true,
-      "limit": "4.4kb"
+      "limit": "4.45kb"
     },
     {
       "name": "@twind/cdn",
       "path": "packages/cdn/dist/cdn.esnext.js",
       "brotli": true,
-      "limit": "14.65kb"
+      "limit": "14.7kb"
     },
     {
       "name": "@twind/tailwind",

packages/cdn/package.json

@@ -29,7 +29,7 @@
       "name": "@twind/cdn",
       "path": "dist/cdn.esnext.js",
       "brotli": true,
-      "limit": "14.65kb"
+      "limit": "14.7kb"
     }
   ],
   "dependencies": {

packages/twind/package.json

@@ -36,7 +36,7 @@
       "path": "dist/twind.esnext.js",
       "import": "{ setup }",
       "brotli": true,
-      "limit": "4.4kb"
+      "limit": "4.45kb"
     },
     {
       "name": "twind (twind + cssom)",

packages/twind/src/sheets.ts

@@ -7,14 +7,15 @@ declare global {
   }
 }
 
+let el: HTMLStyleElement
 function createStyleElement(
   // 1. look for existing style element — usually from SSR
   // 2. append to document.head — this assumes that document.head has at least one child node
   referenceNode = document.querySelector('style[data-twind]') || (document.head.lastChild as Node),
 ): HTMLStyleElement {
   // insert new style element after existing element which allows to override styles
   return (referenceNode.parentNode as Node).insertBefore(
-    document.createElement('style'),
+    ((el = document.createElement('style')), (el.dataset.twind = ''), el),
     referenceNode.nextSibling,
   )
 }