simplestyle-js 4.0.3 → 4.1.0

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
 });
@@ -29,8 +29,8 @@ _export(exports, {
     }
 });
 const _deepmerge = /*#__PURE__*/ _interop_require_default(require("deepmerge"));
-const _generateClassName = require("./generateClassName.cjs");
-const _plugins = require("./plugins.cjs");
+const _generateClassName = require("./generateClassName.js");
+const _plugins = require("./plugins.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -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/cjs/generateClassName.cjs

@@ -19,7 +19,7 @@ _export(exports, {
         return setSeed;
     }
 });
-const _numToAlpha = /*#__PURE__*/ _interop_require_default(require("./numToAlpha.cjs"));
+const _numToAlpha = /*#__PURE__*/ _interop_require_default(require("./numToAlpha.js"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj

package/dist/cjs/index.cjs

@@ -34,9 +34,9 @@ _export(exports, {
         return _generateClassName.setSeed;
     }
 });
-const _createStyles = /*#__PURE__*/ _interop_require_wildcard(require("./createStyles.cjs"));
-const _generateClassName = require("./generateClassName.cjs");
-const _plugins = require("./plugins.cjs");
+const _createStyles = /*#__PURE__*/ _interop_require_wildcard(require("./createStyles.js"));
+const _generateClassName = require("./generateClassName.js");
+const _plugins = require("./plugins.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();

package/dist/cjs/react/index.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_export_star(require("./useCreateStyles.cjs"), exports);
+_export_star(require("./useCreateStyles.js"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/react/useCreateStyles.cjs

@@ -9,8 +9,8 @@ Object.defineProperty(exports, "useCreateStyles", {
     }
 });
 const _react = require("react");
-const _createStyles = /*#__PURE__*/ _interop_require_default(require("../createStyles.cjs"));
-const _index = require("../util/index.cjs");
+const _createStyles = /*#__PURE__*/ _interop_require_default(require("../createStyles.js"));
+const _index = require("../util/index.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj

package/dist/cjs/util/index.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_export_star(require("./deepEqual.cjs"), exports);
+_export_star(require("./deepEqual.js"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/esm/createStyles.mjs

@@ -1,6 +1,6 @@
-import merge from 'deepmerge';
-import { generateClassName } from './generateClassName.mjs';
-import { getPosthooks } from './plugins.mjs';
+/* eslint-disable @typescript-eslint/no-deprecated */ import merge from 'deepmerge';
+import { generateClassName } from './generateClassName.js';
+import { getPosthooks } from './plugins.js';
 function isNestedSelector(r) {
     return /&/g.test(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/dist/esm/generateClassName.mjs

@@ -1,4 +1,4 @@
-import numToAlpha from './numToAlpha.mjs';
+import numToAlpha from './numToAlpha.js';
 let inc = Date.now();
 export function setSeed(seed) {
     if (seed === null) {

package/dist/esm/index.mjs

@@ -1,3 +1,3 @@
-export { default as createStyles, keyframes, makeCreateStyles, makeKeyframes, makeRawStyles, rawStyles } from './createStyles.mjs';
-export { setSeed } from './generateClassName.mjs';
-export { registerPosthook } from './plugins.mjs';
+export { default as createStyles, keyframes, makeCreateStyles, makeKeyframes, makeRawStyles, rawStyles } from './createStyles.js';
+export { setSeed } from './generateClassName.js';
+export { registerPosthook } from './plugins.js';

package/dist/esm/react/index.mjs

@@ -1 +1 @@
-export * from './useCreateStyles.mjs';
+export * from './useCreateStyles.js';

package/dist/esm/react/useCreateStyles.mjs

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import createStyles from '../createStyles.mjs';
-import { deepEqual } from '../util/index.mjs';
+import createStyles from '../createStyles.js';
+import { deepEqual } from '../util/index.js';
 export function useCreateStyles(ruleId, rules, options) {
     // cache rules to compare later
     const [cachedRules, setCachedRules] = useState(()=>rules);

package/dist/esm/util/index.mjs

@@ -1 +1 @@
-export * from './deepEqual.mjs';
+export * from './deepEqual.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simplestyle-js",
-  "version": "4.0.3",
+  "version": "4.1.0",
   "description": "An incredibly straightforward and simple CSS-in-JS solution with zero runtime dependencies, and out-of-the-box TypeScript support",
   "type": "module",
   "repository": {
@@ -60,119 +60,9 @@
     "react": ">=16.8"
   },
   "exports": {
-    "./createStyles": {
-      "require": {
-        "types": "./dist/cjs/createStyles.d.ts",
-        "default": "./dist/cjs/createStyles.cjs"
-      },
-      "import": {
-        "types": "./dist/esm/createStyles.d.ts",
-        "default": "./dist/esm/createStyles.mjs"
-      }
-    },
-    "./generateClassName": {
-      "require": {
-        "types": "./dist/cjs/generateClassName.d.ts",
-        "default": "./dist/cjs/generateClassName.cjs"
-      },
-      "import": {
-        "types": "./dist/esm/generateClassName.d.ts",
-        "default": "./dist/esm/generateClassName.mjs"
-      }
-    },
-    ".": {
-      "require": {
-        "types": "./dist/cjs/index.d.ts",
-        "default": "./dist/cjs/index.cjs"
-      },
-      "import": {
-        "types": "./dist/esm/index.d.ts",
-        "default": "./dist/esm/index.mjs"
-      }
-    },
-    "./numToAlpha": {
-      "require": {
-        "types": "./dist/cjs/numToAlpha.d.ts",
-        "default": "./dist/cjs/numToAlpha.cjs"
-      },
-      "import": {
-        "types": "./dist/esm/numToAlpha.d.ts",
-        "default": "./dist/esm/numToAlpha.mjs"
-      }
-    },
-    "./plugins": {
-      "require": {
-        "types": "./dist/cjs/plugins.d.ts",
-        "default": "./dist/cjs/plugins.cjs"
-      },
-      "import": {
-        "types": "./dist/esm/plugins.d.ts",
-        "default": "./dist/esm/plugins.mjs"
-      }
-    },
-    "./react": {
-      "require": {
-        "types": "./dist/cjs/react/index.d.ts",
-        "default": "./dist/cjs/react/index.cjs"
-      },
-      "import": {
-        "types": "./dist/esm/react/index.d.ts",
-        "default": "./dist/esm/react/index.mjs"
-      }
-    },
-    "./react/useCreateStyles": {
-      "require": {
-        "types": "./dist/cjs/react/useCreateStyles.d.ts",
-        "default": "./dist/cjs/react/useCreateStyles.cjs"
-      },
-      "import": {
-        "types": "./dist/esm/react/useCreateStyles.d.ts",
-        "default": "./dist/esm/react/useCreateStyles.mjs"
-      }
-    },
-    "./simpleStyleRegistry": {
-      "require": {
-        "types": "./dist/cjs/simpleStyleRegistry.d.ts",
-        "default": "./dist/cjs/simpleStyleRegistry.cjs"
-      },
-      "import": {
-        "types": "./dist/esm/simpleStyleRegistry.d.ts",
-        "default": "./dist/esm/simpleStyleRegistry.mjs"
-      }
-    },
-    "./types": {
-      "require": {
-        "types": "./dist/cjs/types.d.ts",
-        "default": "./dist/cjs/types.cjs"
-      },
-      "import": {
-        "types": "./dist/esm/types.d.ts",
-        "default": "./dist/esm/types.mjs"
-      }
-    },
-    "./util/deepEqual": {
-      "require": {
-        "types": "./dist/cjs/util/deepEqual.d.ts",
-        "default": "./dist/cjs/util/deepEqual.cjs"
-      },
-      "import": {
-        "types": "./dist/esm/util/deepEqual.d.ts",
-        "default": "./dist/esm/util/deepEqual.mjs"
-      }
-    },
-    "./util": {
-      "require": {
-        "types": "./dist/cjs/util/index.d.ts",
-        "default": "./dist/cjs/util/index.cjs"
-      },
-      "import": {
-        "types": "./dist/esm/util/index.d.ts",
-        "default": "./dist/esm/util/index.mjs"
-      }
-    },
     "./package.json": "./package.json"
   },
   "module": "./dist/esm/index.mjs",
   "types": "./dist/cjs/index.d.ts",
   "main": "./dist/cjs/index.cjs"
-}
+}