fix: append runtime styles to existing ones (#54)

src/sheets/dom.test.ts

@@ -43,10 +43,10 @@ test('injects in to a style sheet element', () => {
   assert.is(
     style.textContent,
     [
-      '.font-bold{font-weight:700}',
       '.flex{display:flex}',
       '.text-center{text-align:center}',
       '@media (min-width: 768px){.md\\:text-left{text-align:left}}',
+      '.font-bold{font-weight:700}',
     ].join(''),
   )
 })

src/sheets/index.ts

@@ -7,12 +7,15 @@ import { getStyleElement, STYLE_ELEMENT_ID } from '../internal/dom'
 export const domSheet = ({
   nonce,
   target = getStyleElement(nonce),
-}: SheetConfig<HTMLStyleElement> = {}): Sheet<HTMLStyleElement> => ({
-  target,
-  insert: (rule, index) => {
-    target.insertBefore(document.createTextNode(rule), target.childNodes[index])
-  },
-})
+}: SheetConfig<HTMLStyleElement> = {}): Sheet<HTMLStyleElement> => {
+  const offset = target.childNodes.length
+
+  return {
+    target,
+    insert: (rule, index) =>
+      target.insertBefore(document.createTextNode(rule), target.childNodes[offset + index]),
+  }
+}
 
 /**
  * Allows to reset and snaphot the current state of an sheet and

src/twind/sheets.ts

@@ -10,10 +10,14 @@ import { getStyleElement } from '../internal/dom'
 export const cssomSheet = ({
   nonce,
   target = getStyleElement(nonce).sheet as CSSStyleSheet,
-}: SheetConfig<CSSStyleSheet> = {}): Sheet<CSSStyleSheet> => ({
-  target,
-  insert: target.insertRule.bind(target),
-})
+}: SheetConfig<CSSStyleSheet> = {}): Sheet<CSSStyleSheet> => {
+  const offset = target.cssRules.length
+
+  return {
+    target,
+    insert: (rule, index) => target.insertRule(rule, offset + index),
+  }
+}
 
 /**
  * An sheet placeholder which performs no operations. Useful for avoiding errors in a non-browser environment.