simplestyle-js 4.0.3 → 4.1.1

package/dist/cjs/createStyles.cjs

@@ -1,4 +1,4 @@
-"use strict";
+/* eslint-disable @typescript-eslint/no-deprecated */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
@@ -123,18 +123,28 @@ function replaceBackReferences(out, sheetContents) {
     return (0, _plugins.getPosthooks)().reduce((prev, hook)=>hook(prev), outputSheetContents);
 }
 function createSheet(ruleId, sheetContents) {
+    const out = {
+        existing: null,
+        styleTag: null
+    };
     const doc = globalThis.document;
-    if (doc === undefined) return null;
-    // eslint-disable-next-line @typescript-eslint/no-deprecated
-    if (typeof doc?.head?.appendChild !== 'function' || typeof doc.createElement !== 'function') return null;
-    const styleTag = doc.createElement('style');
+    if (doc === undefined) return out;
+    if (typeof doc?.head?.appendChild !== 'function' || typeof doc.createElement !== 'function') return out;
+    // attempt to reuse the style tag, if it existed
+    const existingTag = doc.getElementById?.(ruleId);
+    const existing = Boolean(existingTag);
+    const styleTag = existingTag ?? doc.createElement('style');
     styleTag.id = ruleId;
     styleTag.innerHTML = sheetContents;
-    return styleTag;
+    out.existing = existing;
+    out.styleTag = styleTag;
+    return out;
 }
 function flushSheetContents(ruleId, sheetContents, options) {
     // In case we're in come weird test environment that doesn't support JSDom
-    const styleTag = createSheet(ruleId, sheetContents);
+    const { existing, styleTag } = createSheet(ruleId, sheetContents);
+    // if the tag existed, DO NOT render it back out to the DOM.
+    if (existing) return styleTag;
     if (styleTag) {
         if (options?.insertAfter && options.insertBefore) {
             throw new Error('Both insertAfter and insertBefore were provided. Please choose only one.');

package/dist/esm/createStyles.mjs

@@ -1,4 +1,4 @@
-import merge from 'deepmerge';
+/* eslint-disable @typescript-eslint/no-deprecated */ import merge from 'deepmerge';
 import { generateClassName } from './generateClassName.mjs';
 import { getPosthooks } from './plugins.mjs';
 function isNestedSelector(r) {
@@ -88,18 +88,28 @@ function replaceBackReferences(out, sheetContents) {
     return getPosthooks().reduce((prev, hook)=>hook(prev), outputSheetContents);
 }
 function createSheet(ruleId, sheetContents) {
+    const out = {
+        existing: null,
+        styleTag: null
+    };
     const doc = globalThis.document;
-    if (doc === undefined) return null;
-    // eslint-disable-next-line @typescript-eslint/no-deprecated
-    if (typeof doc?.head?.appendChild !== 'function' || typeof doc.createElement !== 'function') return null;
-    const styleTag = doc.createElement('style');
+    if (doc === undefined) return out;
+    if (typeof doc?.head?.appendChild !== 'function' || typeof doc.createElement !== 'function') return out;
+    // attempt to reuse the style tag, if it existed
+    const existingTag = doc.getElementById?.(ruleId);
+    const existing = Boolean(existingTag);
+    const styleTag = existingTag ?? doc.createElement('style');
     styleTag.id = ruleId;
     styleTag.innerHTML = sheetContents;
-    return styleTag;
+    out.existing = existing;
+    out.styleTag = styleTag;
+    return out;
 }
 function flushSheetContents(ruleId, sheetContents, options) {
     // In case we're in come weird test environment that doesn't support JSDom
-    const styleTag = createSheet(ruleId, sheetContents);
+    const { existing, styleTag } = createSheet(ruleId, sheetContents);
+    // if the tag existed, DO NOT render it back out to the DOM.
+    if (existing) return styleTag;
     if (styleTag) {
         if (options?.insertAfter && options.insertBefore) {
             throw new Error('Both insertAfter and insertBefore were provided. Please choose only one.');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simplestyle-js",
-  "version": "4.0.3",
+  "version": "4.1.1",
   "description": "An incredibly straightforward and simple CSS-in-JS solution with zero runtime dependencies, and out-of-the-box TypeScript support",
   "type": "module",
   "repository": {