From fdfa41c3a0755484585ccc6c65fafd44962c5a18 Mon Sep 17 00:00:00 2001
From: Sascha Tandel <514405+sastan@users.noreply.github.com>
Date: Sat, 2 Jan 2021 08:43:51 +0100
Subject: [PATCH] fix: append runtime styles to existing ones (#54)

---
 src/sheets/dom.test.ts |  2 +-
 src/sheets/index.ts    | 15 +++++++++------
 src/twind/sheets.ts    | 12 ++++++++----
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/sheets/dom.test.ts b/src/sheets/dom.test.ts
index 97c5accf2..a00fffc4d 100644
--- a/src/sheets/dom.test.ts
+++ b/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(''),
   )
 })
diff --git a/src/sheets/index.ts b/src/sheets/index.ts
index 26543206c..e67e694b0 100644
--- a/src/sheets/index.ts
+++ b/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
diff --git a/src/twind/sheets.ts b/src/twind/sheets.ts
index bc4b5db3f..0ef59515e 100644
--- a/src/twind/sheets.ts
+++ b/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.