simplestyle-js 5.4.5-beta.3 → 5.4.5

package/dist/cjs/createStyles.cjs

@@ -182,6 +182,9 @@ function imports(ruleId, rulesFnc, optionsOrCallback) {
     } else if (coerced.flush) {
         flushSheetContents(importRuleId, sheetBuffer, options);
     }
+    return {
+        registry: options?.registry
+    };
 }
 function rawStyles(ruleId, rulesFnc, optionsOrCallback) {
     const options = extractOptions(optionsOrCallback);
@@ -195,7 +198,10 @@ function rawStyles(ruleId, rulesFnc, optionsOrCallback) {
     } else if (coerced.flush) {
         flushSheetContents(rawStylesId, mergedContents, options);
     }
-    return mergedContents;
+    return {
+        registry: options?.registry,
+        stylesheet: mergedContents
+    };
 }
 function keyframes(ruleId, framesFnc, optionsOrCallback) {
     const options = extractOptions(optionsOrCallback);
@@ -211,6 +217,7 @@ function keyframes(ruleId, framesFnc, optionsOrCallback) {
     }
     return {
         keyframe: keyframeId,
+        registry: options?.registry,
         stylesheet
     };
 }
@@ -249,6 +256,7 @@ function createStyles(ruleId, rulesFnc, optionsOrCallback) {
     // Need this TS cast to get solid code assist from the consumption-side
     return {
         classes: out,
+        registry: options?.registry,
         stylesheet: replacedSheetContents,
         updateSheet
     };

package/dist/cjs/createStyles.d.ts

@@ -26,14 +26,21 @@ export type BaselineCreateStylesOptions = Partial<{
     registry?: Nullish<SimpleStyleRegistry>;
 }>;
 export type CreateStylesOptions = BaselineCreateStylesOptions | (() => BaselineCreateStylesOptions);
-export declare function imports(ruleId: string, rulesFnc: () => ImportStringType[], optionsOrCallback?: CreateStylesOptions): void;
-export declare function rawStyles<T extends SimpleStyleRules>(ruleId: string, rulesFnc: () => T, optionsOrCallback?: Partial<CreateStylesOptions>): string;
+export declare function imports(ruleId: string, rulesFnc: () => ImportStringType[], optionsOrCallback?: CreateStylesOptions): {
+    registry: Nullish<SimpleStyleRegistry>;
+};
+export declare function rawStyles<T extends SimpleStyleRules>(ruleId: string, rulesFnc: () => T, optionsOrCallback?: Partial<CreateStylesOptions>): {
+    registry: Nullish<SimpleStyleRegistry>;
+    stylesheet: string;
+};
 export declare function keyframes<T extends Record<string, Properties>>(ruleId: string, framesFnc: () => T, optionsOrCallback?: CreateStylesOptions): {
     keyframe: string;
+    registry: Nullish<SimpleStyleRegistry>;
     stylesheet: string;
 };
 export declare function createStyles<T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rulesFnc: () => T, optionsOrCallback?: Partial<CreateStylesOptions>): {
     classes: O;
+    registry: SimpleStyleRegistry;
     stylesheet: string;
     updateSheet: <T2 extends SimpleStyleRules>(updatedRulesFnc: () => Partial<T2>) => {
         classes: Record<string | number | keyof T2, string>;

package/dist/cjs/makeStyles.d.ts

@@ -19,17 +19,24 @@ type MakeCssFuncsOpts<T extends object | undefined | null> = {
 export declare function makeCssFuncs<V extends object | undefined | null | never = never>(optsOrCallback: MakeCssFuncsOpts<V>): {
     createStyles: <T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rulesFnc: (vars: V extends undefined | null | never ? never : V) => T, overridesOrCallback?: CreateStylesOptions) => {
         classes: O;
+        registry: SimpleStyleRegistry;
         stylesheet: string;
         updateSheet: <T2 extends SimpleStyleRules>(updatedRulesFnc: () => Partial<T2>) => {
             classes: Record<string | number | keyof T2, string>;
             stylesheet: string;
         } | null;
     };
-    imports: (ruleId: string, rulesFnc: (vars: V extends undefined | null | never ? never : V) => `@import ${string}`[], overridesOrCallback?: CreateStylesOptions) => void;
+    imports: (ruleId: string, rulesFnc: (vars: V extends undefined | null | never ? never : V) => `@import ${string}`[], overridesOrCallback?: CreateStylesOptions) => {
+        registry: Nullish<SimpleStyleRegistry>;
+    };
     keyframes: <T extends Record<string, Properties>>(ruleId: string, rulesFnc: (vars: V extends undefined | null | never ? never : V) => T, overridesOrCallback?: CreateStylesOptions) => {
         keyframe: string;
+        registry: Nullish<SimpleStyleRegistry>;
+        stylesheet: string;
+    };
+    rawStyles: <T extends SimpleStyleRules>(ruleId: string, rulesFnc: (vars: V extends undefined | null | never ? never : V) => T, overridesOrCallback?: CreateStylesOptions) => {
+        registry: Nullish<SimpleStyleRegistry>;
         stylesheet: string;
     };
-    rawStyles: <T extends SimpleStyleRules>(ruleId: string, rulesFnc: (vars: V extends undefined | null | never ? never : V) => T, overridesOrCallback?: CreateStylesOptions) => string;
 };
 export {};

package/dist/cjs/next/ClientBoundary.cjs

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -9,22 +10,11 @@ Object.defineProperty(exports, "ClientBoundary", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _navigation = require("next/navigation");
-function ClientBoundary({ children, registry }) {
-    (0, _navigation.useServerInsertedHTML)(()=>{
-        const rules = registry.getRulesById();
-        if (!rules.length) return null;
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-            children: rules.map(([ruleId, css])=>{
-                if (!css) return null;
-                return /*#__PURE__*/ (0, _jsxruntime.jsx)("style", {
-                    id: ruleId,
-                    children: css
-                }, ruleId);
-            })
-        });
-    });
+function ClientBoundary({ rules }) {
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-        children: children
+        children: rules.map(([ruleId, css])=>/*#__PURE__*/ (0, _jsxruntime.jsx)("style", {
+                id: ruleId,
+                children: css
+            }, ruleId))
     });
 }

package/dist/cjs/next/ClientBoundary.d.ts

@@ -1,5 +1,4 @@
-import type { PropsWithChildren } from 'react';
 import type { SimpleStyleRegistry } from '../simpleStyleRegistry.js';
-export declare function ClientBoundary({ children, registry, }: PropsWithChildren & {
-    registry: SimpleStyleRegistry;
+export declare function ClientBoundary({ rules, }: {
+    rules: ReturnType<SimpleStyleRegistry['getRulesById']>;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/next/SimpleStyleProvider.cjs

@@ -11,8 +11,12 @@ Object.defineProperty(exports, "SimpleStyleProvider", {
 const _jsxruntime = require("react/jsx-runtime");
 const _ClientBoundary = require("./ClientBoundary.cjs");
 function SimpleStyleProvider({ children, registry }) {
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ClientBoundary.ClientBoundary, {
-        registry: registry,
-        children: children
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_ClientBoundary.ClientBoundary, {
+                rules: registry.getRulesById()
+            }),
+            children
+        ]
     });
 }

package/dist/cjs/simpleStyleRegistry.cjs

@@ -11,8 +11,6 @@ Object.defineProperty(exports, "SimpleStyleRegistry", {
 /* eslint-disable unicorn/prefer-query-selector */ const doc = globalThis.document;
 class SimpleStyleRegistry {
     sheets = new Map();
-    callbacks = [];
-    addTimeout = null;
     add(ruleId, contents) {
         if (this.sheets.has(ruleId) && doc) {
             const tag = doc.getElementById(ruleId);
@@ -21,21 +19,6 @@ class SimpleStyleRegistry {
             }
         }
         this.sheets.set(ruleId, contents);
-        this.callbacks.forEach((entry)=>{
-            if (entry.eventName === 'add') {
-                entry.callback.call(this, ruleId, contents);
-            }
-        });
-        if (this.addTimeout) {
-            clearTimeout(this.addTimeout);
-        }
-        this.addTimeout = setTimeout(()=>{
-            this.callbacks.forEach((entry)=>{
-                if (entry.eventName === 'settled') {
-                    entry.callback.call(this);
-                }
-            });
-        }, 50);
     }
     /**
    * returns the bare CSS to be injected into a <style /> tag
@@ -62,22 +45,4 @@ ${contents}`, '');
             ...this.sheets.entries()
         ];
     }
-    /**
-   * bind an event handler to one of the various events
-   * that occur on the registry
-   */ on(eventName, callback) {
-        // @ts-expect-error - gross typings
-        this.callbacks.push({
-            eventName,
-            callback
-        });
-    }
-    /**
-   * disconnects an event handler from the registry.
-   * if no callback is specified when calling off,
-   * all event handlers are unbound
-   */ off(eventName, callback) {
-        const cbIsFunc = typeof callback === 'function';
-        this.callbacks = this.callbacks.filter((entry)=>entry.eventName !== eventName && (cbIsFunc && entry.callback !== callback || !cbIsFunc));
-    }
 }

package/dist/cjs/simpleStyleRegistry.d.ts

@@ -1,6 +1,3 @@
-type AnyEventName = 'add' | 'settled';
-export type SimpleStyleRegistryAddEventCallback = (this: SimpleStyleRegistry, ruleId: string, contents: string) => void;
-export type SimpleStyleRegistrySettledEventCallback = (this: SimpleStyleRegistry) => void;
 /**
  * Acts as an accumulator for all
  * generated css that occurs via createStyles().
@@ -9,8 +6,6 @@ export type SimpleStyleRegistrySettledEventCallback = (this: SimpleStyleRegistry
  */
 export declare class SimpleStyleRegistry {
     private sheets;
-    private callbacks;
-    private addTimeout;
     add(ruleId: string, contents: string): void;
     /**
      * returns the bare CSS to be injected into a <style /> tag
@@ -30,16 +25,4 @@ export declare class SimpleStyleRegistry {
      * won't work during local development
      */
     getRulesById(): [string, string][];
-    /**
-     * bind an event handler to one of the various events
-     * that occur on the registry
-     */
-    on<E extends AnyEventName, Cb = E extends 'add' ? SimpleStyleRegistryAddEventCallback : E extends 'settled' ? SimpleStyleRegistrySettledEventCallback : never>(eventName: E, callback: Cb): void;
-    /**
-     * disconnects an event handler from the registry.
-     * if no callback is specified when calling off,
-     * all event handlers are unbound
-     */
-    off<E extends AnyEventName, Cb = E extends 'add' ? SimpleStyleRegistryAddEventCallback : E extends 'settled' ? SimpleStyleRegistrySettledEventCallback : never>(eventName: E, callback?: Cb): void;
 }
-export {};

package/dist/esm/createStyles.d.ts

@@ -26,14 +26,21 @@ export type BaselineCreateStylesOptions = Partial<{
     registry?: Nullish<SimpleStyleRegistry>;
 }>;
 export type CreateStylesOptions = BaselineCreateStylesOptions | (() => BaselineCreateStylesOptions);
-export declare function imports(ruleId: string, rulesFnc: () => ImportStringType[], optionsOrCallback?: CreateStylesOptions): void;
-export declare function rawStyles<T extends SimpleStyleRules>(ruleId: string, rulesFnc: () => T, optionsOrCallback?: Partial<CreateStylesOptions>): string;
+export declare function imports(ruleId: string, rulesFnc: () => ImportStringType[], optionsOrCallback?: CreateStylesOptions): {
+    registry: Nullish<SimpleStyleRegistry>;
+};
+export declare function rawStyles<T extends SimpleStyleRules>(ruleId: string, rulesFnc: () => T, optionsOrCallback?: Partial<CreateStylesOptions>): {
+    registry: Nullish<SimpleStyleRegistry>;
+    stylesheet: string;
+};
 export declare function keyframes<T extends Record<string, Properties>>(ruleId: string, framesFnc: () => T, optionsOrCallback?: CreateStylesOptions): {
     keyframe: string;
+    registry: Nullish<SimpleStyleRegistry>;
     stylesheet: string;
 };
 export declare function createStyles<T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rulesFnc: () => T, optionsOrCallback?: Partial<CreateStylesOptions>): {
     classes: O;
+    registry: SimpleStyleRegistry;
     stylesheet: string;
     updateSheet: <T2 extends SimpleStyleRules>(updatedRulesFnc: () => Partial<T2>) => {
         classes: Record<string | number | keyof T2, string>;

package/dist/esm/createStyles.mjs

@@ -150,6 +150,9 @@ export function imports(ruleId, rulesFnc, optionsOrCallback) {
     } else if (coerced.flush) {
         flushSheetContents(importRuleId, sheetBuffer, options);
     }
+    return {
+        registry: options?.registry
+    };
 }
 export function rawStyles(ruleId, rulesFnc, optionsOrCallback) {
     const options = extractOptions(optionsOrCallback);
@@ -163,7 +166,10 @@ export function rawStyles(ruleId, rulesFnc, optionsOrCallback) {
     } else if (coerced.flush) {
         flushSheetContents(rawStylesId, mergedContents, options);
     }
-    return mergedContents;
+    return {
+        registry: options?.registry,
+        stylesheet: mergedContents
+    };
 }
 export function keyframes(ruleId, framesFnc, optionsOrCallback) {
     const options = extractOptions(optionsOrCallback);
@@ -179,6 +185,7 @@ export function keyframes(ruleId, framesFnc, optionsOrCallback) {
     }
     return {
         keyframe: keyframeId,
+        registry: options?.registry,
         stylesheet
     };
 }
@@ -217,6 +224,7 @@ export function createStyles(ruleId, rulesFnc, optionsOrCallback) {
     // Need this TS cast to get solid code assist from the consumption-side
     return {
         classes: out,
+        registry: options?.registry,
         stylesheet: replacedSheetContents,
         updateSheet
     };

package/dist/esm/makeStyles.d.ts

@@ -19,17 +19,24 @@ type MakeCssFuncsOpts<T extends object | undefined | null> = {
 export declare function makeCssFuncs<V extends object | undefined | null | never = never>(optsOrCallback: MakeCssFuncsOpts<V>): {
     createStyles: <T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rulesFnc: (vars: V extends undefined | null | never ? never : V) => T, overridesOrCallback?: CreateStylesOptions) => {
         classes: O;
+        registry: SimpleStyleRegistry;
         stylesheet: string;
         updateSheet: <T2 extends SimpleStyleRules>(updatedRulesFnc: () => Partial<T2>) => {
             classes: Record<string | number | keyof T2, string>;
             stylesheet: string;
         } | null;
     };
-    imports: (ruleId: string, rulesFnc: (vars: V extends undefined | null | never ? never : V) => `@import ${string}`[], overridesOrCallback?: CreateStylesOptions) => void;
+    imports: (ruleId: string, rulesFnc: (vars: V extends undefined | null | never ? never : V) => `@import ${string}`[], overridesOrCallback?: CreateStylesOptions) => {
+        registry: Nullish<SimpleStyleRegistry>;
+    };
     keyframes: <T extends Record<string, Properties>>(ruleId: string, rulesFnc: (vars: V extends undefined | null | never ? never : V) => T, overridesOrCallback?: CreateStylesOptions) => {
         keyframe: string;
+        registry: Nullish<SimpleStyleRegistry>;
+        stylesheet: string;
+    };
+    rawStyles: <T extends SimpleStyleRules>(ruleId: string, rulesFnc: (vars: V extends undefined | null | never ? never : V) => T, overridesOrCallback?: CreateStylesOptions) => {
+        registry: Nullish<SimpleStyleRegistry>;
         stylesheet: string;
     };
-    rawStyles: <T extends SimpleStyleRules>(ruleId: string, rulesFnc: (vars: V extends undefined | null | never ? never : V) => T, overridesOrCallback?: CreateStylesOptions) => string;
 };
 export {};

package/dist/esm/next/ClientBoundary.d.ts

@@ -1,5 +1,4 @@
-import type { PropsWithChildren } from 'react';
 import type { SimpleStyleRegistry } from '../simpleStyleRegistry.js';
-export declare function ClientBoundary({ children, registry, }: PropsWithChildren & {
-    registry: SimpleStyleRegistry;
+export declare function ClientBoundary({ rules, }: {
+    rules: ReturnType<SimpleStyleRegistry['getRulesById']>;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/esm/next/ClientBoundary.mjs

@@ -1,20 +1,10 @@
+'use client';
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useServerInsertedHTML } from 'next/navigation';
-export function ClientBoundary({ children, registry }) {
-    useServerInsertedHTML(()=>{
-        const rules = registry.getRulesById();
-        if (!rules.length) return null;
-        return /*#__PURE__*/ _jsx(_Fragment, {
-            children: rules.map(([ruleId, css])=>{
-                if (!css) return null;
-                return /*#__PURE__*/ _jsx("style", {
-                    id: ruleId,
-                    children: css
-                }, ruleId);
-            })
-        });
-    });
+export function ClientBoundary({ rules }) {
     return /*#__PURE__*/ _jsx(_Fragment, {
-        children: children
+        children: rules.map(([ruleId, css])=>/*#__PURE__*/ _jsx("style", {
+                id: ruleId,
+                children: css
+            }, ruleId))
     });
 }

package/dist/esm/next/SimpleStyleProvider.mjs

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ClientBoundary } from './ClientBoundary.mjs';
 /**
  * Accumulates all CSS rules and writes
@@ -6,8 +6,12 @@ import { ClientBoundary } from './ClientBoundary.mjs';
  * Use this for Next.js or other Next.js-like frameworks
  * that leverage React server components
  */ export function SimpleStyleProvider({ children, registry }) {
-    return /*#__PURE__*/ _jsx(ClientBoundary, {
-        registry: registry,
-        children: children
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(ClientBoundary, {
+                rules: registry.getRulesById()
+            }),
+            children
+        ]
     });
 }

package/dist/esm/simpleStyleRegistry.d.ts

@@ -1,6 +1,3 @@
-type AnyEventName = 'add' | 'settled';
-export type SimpleStyleRegistryAddEventCallback = (this: SimpleStyleRegistry, ruleId: string, contents: string) => void;
-export type SimpleStyleRegistrySettledEventCallback = (this: SimpleStyleRegistry) => void;
 /**
  * Acts as an accumulator for all
  * generated css that occurs via createStyles().
@@ -9,8 +6,6 @@ export type SimpleStyleRegistrySettledEventCallback = (this: SimpleStyleRegistry
  */
 export declare class SimpleStyleRegistry {
     private sheets;
-    private callbacks;
-    private addTimeout;
     add(ruleId: string, contents: string): void;
     /**
      * returns the bare CSS to be injected into a <style /> tag
@@ -30,16 +25,4 @@ export declare class SimpleStyleRegistry {
      * won't work during local development
      */
     getRulesById(): [string, string][];
-    /**
-     * bind an event handler to one of the various events
-     * that occur on the registry
-     */
-    on<E extends AnyEventName, Cb = E extends 'add' ? SimpleStyleRegistryAddEventCallback : E extends 'settled' ? SimpleStyleRegistrySettledEventCallback : never>(eventName: E, callback: Cb): void;
-    /**
-     * disconnects an event handler from the registry.
-     * if no callback is specified when calling off,
-     * all event handlers are unbound
-     */
-    off<E extends AnyEventName, Cb = E extends 'add' ? SimpleStyleRegistryAddEventCallback : E extends 'settled' ? SimpleStyleRegistrySettledEventCallback : never>(eventName: E, callback?: Cb): void;
 }
-export {};

package/dist/esm/simpleStyleRegistry.mjs

@@ -6,8 +6,6 @@
  * React variant of this will come after the baseline one is created
  */ export class SimpleStyleRegistry {
     sheets = new Map();
-    callbacks = [];
-    addTimeout = null;
     add(ruleId, contents) {
         if (this.sheets.has(ruleId) && doc) {
             const tag = doc.getElementById(ruleId);
@@ -16,21 +14,6 @@
             }
         }
         this.sheets.set(ruleId, contents);
-        this.callbacks.forEach((entry)=>{
-            if (entry.eventName === 'add') {
-                entry.callback.call(this, ruleId, contents);
-            }
-        });
-        if (this.addTimeout) {
-            clearTimeout(this.addTimeout);
-        }
-        this.addTimeout = setTimeout(()=>{
-            this.callbacks.forEach((entry)=>{
-                if (entry.eventName === 'settled') {
-                    entry.callback.call(this);
-                }
-            });
-        }, 50);
     }
     /**
    * returns the bare CSS to be injected into a <style /> tag
@@ -57,22 +40,4 @@ ${contents}`, '');
             ...this.sheets.entries()
         ];
     }
-    /**
-   * bind an event handler to one of the various events
-   * that occur on the registry
-   */ on(eventName, callback) {
-        // @ts-expect-error - gross typings
-        this.callbacks.push({
-            eventName,
-            callback
-        });
-    }
-    /**
-   * disconnects an event handler from the registry.
-   * if no callback is specified when calling off,
-   * all event handlers are unbound
-   */ off(eventName, callback) {
-        const cbIsFunc = typeof callback === 'function';
-        this.callbacks = this.callbacks.filter((entry)=>entry.eventName !== eventName && (cbIsFunc && entry.callback !== callback || !cbIsFunc));
-    }
 }

package/package.json

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