simplestyle-js 3.4.2-alpha.1 → 3.4.2-alpha.3

package/dist/cjs/createStyles.cjs

@@ -42,7 +42,7 @@ function formatCSSRuleName(rule) {
 function formatCSSRules(cssRules) {
     return Object.entries(cssRules).reduce((prev, [cssProp, cssVal])=>`${prev}${formatCSSRuleName(cssProp)}:${String(cssVal)};`, '');
 }
-function execCreateStyles(rules, options, parentSelector, noGenerateClassName = false) {
+function execCreateStyles(ruleId, rules, options, parentSelector, noGenerateClassName = false) {
     const out = {};
     let sheetBuffer = '';
     let mediaQueriesBuffer = '';
@@ -58,7 +58,7 @@ function execCreateStyles(rules, options, parentSelector, noGenerateClassName =
             if (typeof classNameRules !== 'object') throw new Error('Unable to map @media query because rules / props are an invalid type');
             guardCloseRuleWrite();
             mediaQueriesBuffer += `${classNameOrCSSRule}{`;
-            const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(classNameRules, options, parentSelector);
+            const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(ruleId, classNameRules, options, parentSelector);
             mediaQueriesBuffer += regularOutput;
             mediaQueriesBuffer += '}';
             mediaQueriesBuffer += mediaQueriesOutput;
@@ -68,17 +68,17 @@ function execCreateStyles(rules, options, parentSelector, noGenerateClassName =
             // format of { '& > span': { display: 'none' } } (or further nesting)
             const replaced = classNameOrCSSRule.replaceAll('&', parentSelector);
             for (const selector of replaced.split(/,\s*/)){
-                const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(classNameRules, options, selector);
+                const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(ruleId, classNameRules, options, selector);
                 sheetBuffer += regularOutput;
                 mediaQueriesBuffer += mediaQueriesOutput;
             }
         } else if (!parentSelector && typeof classNameRules === 'object') {
             guardCloseRuleWrite();
-            const generated = noGenerateClassName ? classNameOrCSSRule : (0, _generateClassName.generateClassName)(classNameOrCSSRule);
+            const generated = noGenerateClassName ? classNameOrCSSRule : (0, _generateClassName.generateClassName)(`${ruleId}_${classNameOrCSSRule}`);
             // @ts-expect-error - yes, we can index this object here, so be quiet
             out[classNameOrCSSRule] = generated;
             const generatedSelector = `${noGenerateClassName ? '' : '.'}${generated}`;
-            const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(classNameRules, options, generatedSelector);
+            const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(ruleId, classNameRules, options, generatedSelector);
             sheetBuffer += regularOutput;
             mediaQueriesBuffer += mediaQueriesOutput;
         } else {
@@ -116,18 +116,19 @@ function replaceBackReferences(out, sheetContents) {
     }
     return (0, _plugins.getPosthooks)().reduce((prev, hook)=>hook(prev), outputSheetContents);
 }
-function createSheet(sheetContents) {
+function createSheet(ruleId, sheetContents) {
     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');
+    styleTag.id = ruleId;
     styleTag.innerHTML = sheetContents;
     return styleTag;
 }
-function flushSheetContents(sheetContents, options) {
+function flushSheetContents(ruleId, sheetContents, options) {
     // In case we're in come weird test environment that doesn't support JSDom
-    const styleTag = createSheet(sheetContents);
+    const styleTag = createSheet(ruleId, sheetContents);
     if (styleTag) {
         if (options?.insertAfter && options.insertBefore) {
             throw new Error('Both insertAfter and insertBefore were provided. Please choose only one.');
@@ -143,34 +144,34 @@ function coerceCreateStylesOptions(options) {
         flush: options && typeof options.flush === 'boolean' ? options.flush : true
     };
 }
-function rawStyles(rules, options) {
+function rawStyles(ruleId, rules, options) {
     const coerced = coerceCreateStylesOptions(options);
-    const { sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(rules, coerced, null, true);
+    const { sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(ruleId, rules, coerced, null, true);
     const mergedContents = `${sheetContents}${mediaQueriesContents}`;
-    if (coerced.flush) flushSheetContents(mergedContents, options);
+    if (coerced.flush) flushSheetContents(ruleId, mergedContents, options);
     return mergedContents;
 }
-function keyframes(frames, options) {
+function keyframes(ruleId, frames, options) {
     const coerced = coerceCreateStylesOptions(options);
-    const keyframeName = (0, _generateClassName.generateClassName)('keyframes_');
-    const { sheetBuffer: keyframesContents } = execCreateStyles(frames, coerced, null, true);
+    const keyframeName = (0, _generateClassName.generateClassName)(`${ruleId}_keyframes_`);
+    const { sheetBuffer: keyframesContents } = execCreateStyles(ruleId, frames, coerced, null, true);
     const sheetContents = `@keyframes ${keyframeName}{${keyframesContents}}`;
-    if (coerced.flush) flushSheetContents(sheetContents);
+    if (coerced.flush) flushSheetContents(ruleId, sheetContents);
     return [
         keyframeName,
         sheetContents
     ];
 }
 function makeCreateStyle(registry) {
-    return function wrappedCreateStyles(rules) {
-        return createStyles(rules, {
+    return function wrappedCreateStyles(ruleId, rules) {
+        return createStyles(ruleId, rules, {
             registry
         });
     };
 }
-function createStyles(rules, options) {
+function createStyles(ruleId, rules, options) {
     const coerced = coerceCreateStylesOptions(options);
-    const { classes: out, sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(rules, coerced, null);
+    const { classes: out, sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(ruleId, rules, coerced, null);
     const mergedContents = `${sheetContents}${mediaQueriesContents}`;
     const replacedSheetContents = replaceBackReferences(out, mergedContents);
     let sheet = null;
@@ -178,7 +179,7 @@ function createStyles(rules, options) {
     const updateSheet = (updatedRules)=>{
         if ((options?.flush || options?.registry) && sheet || !options?.flush) {
             // We prefer the first set, and then we shallow merge
-            const { classes: updatedOut, sheetBuffer: updatedSheetContents, mediaQueriesBuffer: updatedMediaQueriesContents } = execCreateStyles((0, _deepmerge.default)(rules, updatedRules), {
+            const { classes: updatedOut, sheetBuffer: updatedSheetContents, mediaQueriesBuffer: updatedMediaQueriesContents } = execCreateStyles(ruleId, (0, _deepmerge.default)(rules, updatedRules), {
                 flush: false
             }, null);
             const updatedMergedContents = `${updatedSheetContents}${updatedMediaQueriesContents}`;
@@ -191,8 +192,11 @@ function createStyles(rules, options) {
         }
         return null;
     };
-    if (!options?.registry && coerced.flush) sheet = flushSheetContents(replacedSheetContents, options);
-    else if (options?.registry) options.registry.add(replacedSheetContents);
+    if (!options?.registry && coerced.flush) {
+        sheet = flushSheetContents(ruleId, replacedSheetContents, options);
+    } else if (options?.registry) {
+        options.registry.add(ruleId, replacedSheetContents);
+    }
     // Need this TS cast to get solid code assist from the consumption-side
     return {
         classes: out,

package/dist/cjs/createStyles.d.ts

@@ -26,9 +26,9 @@ export type CreateStylesOptions = Partial<{
      */
     registry?: SimpleStyleRegistry;
 }>;
-export declare function rawStyles<T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(rules: T, options?: Partial<CreateStylesOptions>): string;
-export declare function keyframes<T extends Record<string, Properties>>(frames: T, options?: CreateStylesOptions): [string, string];
-export declare function makeCreateStyle(registry: SimpleStyleRegistry): <T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(rules: T) => {
+export declare function rawStyles<T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rules: T, options?: Partial<CreateStylesOptions>): string;
+export declare function keyframes<T extends Record<string, Properties>>(ruleId: string, frames: T, options?: CreateStylesOptions): [string, string];
+export declare function makeCreateStyle(registry: SimpleStyleRegistry): <T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rules: T) => {
     classes: O;
     stylesheet: string;
     updateSheet: <T2 extends SimpleStyleRules, K2 extends keyof T2, O2 extends Record<K2, string>>(updatedRules: Partial<T2>) => {
@@ -36,7 +36,7 @@ export declare function makeCreateStyle(registry: SimpleStyleRegistry): <T exten
         stylesheet: string;
     } | null;
 };
-export default function createStyles<T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(rules: T, options?: Partial<CreateStylesOptions>): {
+export default function createStyles<T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rules: T, options?: Partial<CreateStylesOptions>): {
     classes: O;
     stylesheet: string;
     updateSheet: <T2 extends SimpleStyleRules, K2 extends keyof T2, O2 extends Record<K2, string>>(updatedRules: Partial<T2>) => {

package/dist/cjs/react/useCreateStyles.cjs

@@ -16,7 +16,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-function useCreateStyles(rules, options) {
+function useCreateStyles(ruleId, rules, options) {
     // cache rules to compare later
     const [cachedRules, setCachedRules] = (0, _react.useState)(()=>rules);
     // memoize options but keep them live
@@ -28,7 +28,7 @@ function useCreateStyles(rules, options) {
     const didFirstWriteRef = (0, _react.useRef)(false);
     const styleTagRef = (0, _react.useRef)(typeof document === 'undefined' ? null : document.createElement('style'));
     // initialize styles
-    const [styleState, setStyleState] = (0, _react.useState)(()=>(0, _createStyles.default)(rules, {
+    const [styleState, setStyleState] = (0, _react.useState)(()=>(0, _createStyles.default)(ruleId, rules, {
             ...cachedOptions,
             flush: false
         }));

package/dist/cjs/react/useCreateStyles.d.ts

@@ -1,3 +1,3 @@
 import { CreateStylesOptions } from '../createStyles.js';
 import { SimpleStyleRules } from '../types.js';
-export declare function useCreateStyles<T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(rules: T, options?: Partial<Omit<CreateStylesOptions, 'flush'>>): O;
+export declare function useCreateStyles<T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rules: T, options?: Partial<Omit<CreateStylesOptions, 'flush'>>): O;

package/dist/cjs/simpleStyleRegistry.cjs

@@ -1,9 +1,4 @@
-/**
- * Acts as an accumulator for all
- * generated css that occurs via createStyles().
- *
- * React variant of this will come after the baseline one is created
- */ "use strict";
+"use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
@@ -13,13 +8,29 @@ Object.defineProperty(exports, "SimpleStyleRegistry", {
         return SimpleStyleRegistry;
     }
 });
+/* eslint-disable unicorn/prefer-query-selector */ const doc = globalThis.document;
 class SimpleStyleRegistry {
-    sheets = [];
-    add(contents) {
-        this.sheets.push(contents);
+    sheets = new Map();
+    add(ruleId, contents) {
+        if (this.sheets.has(ruleId) && doc) {
+            const tag = doc.getElementById(ruleId);
+            if (tag) {
+                tag.innerHTML = contents;
+            }
+        }
+        this.sheets.set(ruleId, contents);
     }
-    getCSS() {
-        return this.sheets.reduce((prev, contents)=>`${prev}
+    /**
+   * returns the bare CSS to be injected into a <style /> tag
+   */ getCSS() {
+        return this.sheets.values().reduce((prev, contents)=>`${prev}
 ${contents}`, '');
     }
+    /**
+   * returns an HTML string with various <style /> tags
+   * mapped to their internal ruleset IDs
+   */ getHTML() {
+        return this.sheets.entries().reduce((prev, [ruleId, contents])=>`${prev}
+<style id="${ruleId}">${contents}</style>`, '');
+    }
 }

package/dist/cjs/simpleStyleRegistry.d.ts

@@ -6,6 +6,14 @@
  */
 export declare class SimpleStyleRegistry {
     private sheets;
-    add(contents: string): void;
+    add(ruleId: string, contents: string): void;
+    /**
+     * returns the bare CSS to be injected into a <style /> tag
+     */
     getCSS(): string;
+    /**
+     * returns an HTML string with various <style /> tags
+     * mapped to their internal ruleset IDs
+     */
+    getHTML(): string;
 }

package/dist/esm/createStyles.d.ts

@@ -26,9 +26,9 @@ export type CreateStylesOptions = Partial<{
      */
     registry?: SimpleStyleRegistry;
 }>;
-export declare function rawStyles<T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(rules: T, options?: Partial<CreateStylesOptions>): string;
-export declare function keyframes<T extends Record<string, Properties>>(frames: T, options?: CreateStylesOptions): [string, string];
-export declare function makeCreateStyle(registry: SimpleStyleRegistry): <T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(rules: T) => {
+export declare function rawStyles<T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rules: T, options?: Partial<CreateStylesOptions>): string;
+export declare function keyframes<T extends Record<string, Properties>>(ruleId: string, frames: T, options?: CreateStylesOptions): [string, string];
+export declare function makeCreateStyle(registry: SimpleStyleRegistry): <T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rules: T) => {
     classes: O;
     stylesheet: string;
     updateSheet: <T2 extends SimpleStyleRules, K2 extends keyof T2, O2 extends Record<K2, string>>(updatedRules: Partial<T2>) => {
@@ -36,7 +36,7 @@ export declare function makeCreateStyle(registry: SimpleStyleRegistry): <T exten
         stylesheet: string;
     } | null;
 };
-export default function createStyles<T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(rules: T, options?: Partial<CreateStylesOptions>): {
+export default function createStyles<T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rules: T, options?: Partial<CreateStylesOptions>): {
     classes: O;
     stylesheet: string;
     updateSheet: <T2 extends SimpleStyleRules, K2 extends keyof T2, O2 extends Record<K2, string>>(updatedRules: Partial<T2>) => {

package/dist/esm/createStyles.mjs

@@ -13,7 +13,7 @@ function formatCSSRuleName(rule) {
 function formatCSSRules(cssRules) {
     return Object.entries(cssRules).reduce((prev, [cssProp, cssVal])=>`${prev}${formatCSSRuleName(cssProp)}:${String(cssVal)};`, '');
 }
-function execCreateStyles(rules, options, parentSelector, noGenerateClassName = false) {
+function execCreateStyles(ruleId, rules, options, parentSelector, noGenerateClassName = false) {
     const out = {};
     let sheetBuffer = '';
     let mediaQueriesBuffer = '';
@@ -29,7 +29,7 @@ function execCreateStyles(rules, options, parentSelector, noGenerateClassName =
             if (typeof classNameRules !== 'object') throw new Error('Unable to map @media query because rules / props are an invalid type');
             guardCloseRuleWrite();
             mediaQueriesBuffer += `${classNameOrCSSRule}{`;
-            const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(classNameRules, options, parentSelector);
+            const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(ruleId, classNameRules, options, parentSelector);
             mediaQueriesBuffer += regularOutput;
             mediaQueriesBuffer += '}';
             mediaQueriesBuffer += mediaQueriesOutput;
@@ -39,17 +39,17 @@ function execCreateStyles(rules, options, parentSelector, noGenerateClassName =
             // format of { '& > span': { display: 'none' } } (or further nesting)
             const replaced = classNameOrCSSRule.replaceAll('&', parentSelector);
             for (const selector of replaced.split(/,\s*/)){
-                const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(classNameRules, options, selector);
+                const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(ruleId, classNameRules, options, selector);
                 sheetBuffer += regularOutput;
                 mediaQueriesBuffer += mediaQueriesOutput;
             }
         } else if (!parentSelector && typeof classNameRules === 'object') {
             guardCloseRuleWrite();
-            const generated = noGenerateClassName ? classNameOrCSSRule : generateClassName(classNameOrCSSRule);
+            const generated = noGenerateClassName ? classNameOrCSSRule : generateClassName(`${ruleId}_${classNameOrCSSRule}`);
             // @ts-expect-error - yes, we can index this object here, so be quiet
             out[classNameOrCSSRule] = generated;
             const generatedSelector = `${noGenerateClassName ? '' : '.'}${generated}`;
-            const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(classNameRules, options, generatedSelector);
+            const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(ruleId, classNameRules, options, generatedSelector);
             sheetBuffer += regularOutput;
             mediaQueriesBuffer += mediaQueriesOutput;
         } else {
@@ -87,18 +87,19 @@ function replaceBackReferences(out, sheetContents) {
     }
     return getPosthooks().reduce((prev, hook)=>hook(prev), outputSheetContents);
 }
-function createSheet(sheetContents) {
+function createSheet(ruleId, sheetContents) {
     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');
+    styleTag.id = ruleId;
     styleTag.innerHTML = sheetContents;
     return styleTag;
 }
-function flushSheetContents(sheetContents, options) {
+function flushSheetContents(ruleId, sheetContents, options) {
     // In case we're in come weird test environment that doesn't support JSDom
-    const styleTag = createSheet(sheetContents);
+    const styleTag = createSheet(ruleId, sheetContents);
     if (styleTag) {
         if (options?.insertAfter && options.insertBefore) {
             throw new Error('Both insertAfter and insertBefore were provided. Please choose only one.');
@@ -115,34 +116,34 @@ function coerceCreateStylesOptions(options) {
     };
 }
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function rawStyles(rules, options) {
+export function rawStyles(ruleId, rules, options) {
     const coerced = coerceCreateStylesOptions(options);
-    const { sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(rules, coerced, null, true);
+    const { sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(ruleId, rules, coerced, null, true);
     const mergedContents = `${sheetContents}${mediaQueriesContents}`;
-    if (coerced.flush) flushSheetContents(mergedContents, options);
+    if (coerced.flush) flushSheetContents(ruleId, mergedContents, options);
     return mergedContents;
 }
-export function keyframes(frames, options) {
+export function keyframes(ruleId, frames, options) {
     const coerced = coerceCreateStylesOptions(options);
-    const keyframeName = generateClassName('keyframes_');
-    const { sheetBuffer: keyframesContents } = execCreateStyles(frames, coerced, null, true);
+    const keyframeName = generateClassName(`${ruleId}_keyframes_`);
+    const { sheetBuffer: keyframesContents } = execCreateStyles(ruleId, frames, coerced, null, true);
     const sheetContents = `@keyframes ${keyframeName}{${keyframesContents}}`;
-    if (coerced.flush) flushSheetContents(sheetContents);
+    if (coerced.flush) flushSheetContents(ruleId, sheetContents);
     return [
         keyframeName,
         sheetContents
     ];
 }
 export function makeCreateStyle(registry) {
-    return function wrappedCreateStyles(rules) {
-        return createStyles(rules, {
+    return function wrappedCreateStyles(ruleId, rules) {
+        return createStyles(ruleId, rules, {
             registry
         });
     };
 }
-export default function createStyles(rules, options) {
+export default function createStyles(ruleId, rules, options) {
     const coerced = coerceCreateStylesOptions(options);
-    const { classes: out, sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(rules, coerced, null);
+    const { classes: out, sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(ruleId, rules, coerced, null);
     const mergedContents = `${sheetContents}${mediaQueriesContents}`;
     const replacedSheetContents = replaceBackReferences(out, mergedContents);
     let sheet = null;
@@ -150,7 +151,7 @@ export default function createStyles(rules, options) {
     const updateSheet = (updatedRules)=>{
         if ((options?.flush || options?.registry) && sheet || !options?.flush) {
             // We prefer the first set, and then we shallow merge
-            const { classes: updatedOut, sheetBuffer: updatedSheetContents, mediaQueriesBuffer: updatedMediaQueriesContents } = execCreateStyles(merge(rules, updatedRules), {
+            const { classes: updatedOut, sheetBuffer: updatedSheetContents, mediaQueriesBuffer: updatedMediaQueriesContents } = execCreateStyles(ruleId, merge(rules, updatedRules), {
                 flush: false
             }, null);
             const updatedMergedContents = `${updatedSheetContents}${updatedMediaQueriesContents}`;
@@ -163,8 +164,11 @@ export default function createStyles(rules, options) {
         }
         return null;
     };
-    if (!options?.registry && coerced.flush) sheet = flushSheetContents(replacedSheetContents, options);
-    else if (options?.registry) options.registry.add(replacedSheetContents);
+    if (!options?.registry && coerced.flush) {
+        sheet = flushSheetContents(ruleId, replacedSheetContents, options);
+    } else if (options?.registry) {
+        options.registry.add(ruleId, replacedSheetContents);
+    }
     // Need this TS cast to get solid code assist from the consumption-side
     return {
         classes: out,

package/dist/esm/react/useCreateStyles.d.ts

@@ -1,3 +1,3 @@
 import { CreateStylesOptions } from '../createStyles.js';
 import { SimpleStyleRules } from '../types.js';
-export declare function useCreateStyles<T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(rules: T, options?: Partial<Omit<CreateStylesOptions, 'flush'>>): O;
+export declare function useCreateStyles<T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rules: T, options?: Partial<Omit<CreateStylesOptions, 'flush'>>): O;

package/dist/esm/react/useCreateStyles.mjs

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import createStyles from '../createStyles.mjs';
 import { deepEqual } from '../util/index.mjs';
-export function useCreateStyles(rules, options) {
+export function useCreateStyles(ruleId, rules, options) {
     // cache rules to compare later
     const [cachedRules, setCachedRules] = useState(()=>rules);
     // memoize options but keep them live
@@ -13,7 +13,7 @@ export function useCreateStyles(rules, options) {
     const didFirstWriteRef = useRef(false);
     const styleTagRef = useRef(typeof document === 'undefined' ? null : document.createElement('style'));
     // initialize styles
-    const [styleState, setStyleState] = useState(()=>createStyles(rules, {
+    const [styleState, setStyleState] = useState(()=>createStyles(ruleId, rules, {
             ...cachedOptions,
             flush: false
         }));

package/dist/esm/simpleStyleRegistry.d.ts

@@ -6,6 +6,14 @@
  */
 export declare class SimpleStyleRegistry {
     private sheets;
-    add(contents: string): void;
+    add(ruleId: string, contents: string): void;
+    /**
+     * returns the bare CSS to be injected into a <style /> tag
+     */
     getCSS(): string;
+    /**
+     * returns an HTML string with various <style /> tags
+     * mapped to their internal ruleset IDs
+     */
+    getHTML(): string;
 }

package/dist/esm/simpleStyleRegistry.mjs

@@ -1,15 +1,31 @@
+/* eslint-disable unicorn/prefer-query-selector */ const doc = globalThis.document;
 /**
  * Acts as an accumulator for all
  * generated css that occurs via createStyles().
  *
  * React variant of this will come after the baseline one is created
  */ export class SimpleStyleRegistry {
-    sheets = [];
-    add(contents) {
-        this.sheets.push(contents);
+    sheets = new Map();
+    add(ruleId, contents) {
+        if (this.sheets.has(ruleId) && doc) {
+            const tag = doc.getElementById(ruleId);
+            if (tag) {
+                tag.innerHTML = contents;
+            }
+        }
+        this.sheets.set(ruleId, contents);
     }
-    getCSS() {
-        return this.sheets.reduce((prev, contents)=>`${prev}
+    /**
+   * returns the bare CSS to be injected into a <style /> tag
+   */ getCSS() {
+        return this.sheets.values().reduce((prev, contents)=>`${prev}
 ${contents}`, '');
     }
+    /**
+   * returns an HTML string with various <style /> tags
+   * mapped to their internal ruleset IDs
+   */ getHTML() {
+        return this.sheets.entries().reduce((prev, [ruleId, contents])=>`${prev}
+<style id="${ruleId}">${contents}</style>`, '');
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simplestyle-js",
-  "version": "3.4.2-alpha.1",
+  "version": "3.4.2-alpha.3",
   "description": "An incredibly straightforward and simple CSS-in-JS solution with zero runtime dependencies, and out-of-the-box TypeScript support",
   "type": "module",
   "repository": {
@@ -40,7 +40,7 @@
     "@vitejs/plugin-react": "^5.1.1",
     "autoprefixer": "^10.4.22",
     "coveralls": "^3.1.1",
-    "eslint-config-react-yas": "^6.0.10",
+    "eslint-config-react-yas": "^6.0.11",
     "husky": "^9.1.7",
     "postcss": "^8.5.6",
     "react": ">=18",