simplestyle-js 5.3.5 → 5.4.1

package/dist/cjs/createStyles.cjs

@@ -33,6 +33,9 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
+function extractOptions(optionsOrCallback) {
+    return typeof optionsOrCallback === 'function' ? optionsOrCallback() : optionsOrCallback;
+}
 function isNestedSelector(r) {
     return /&/g.test(r);
 }
@@ -137,7 +140,8 @@ function createSheet(ruleId, sheetContents) {
     out.styleTag = styleTag;
     return out;
 }
-function flushSheetContents(ruleId, sheetContents, options) {
+function flushSheetContents(ruleId, sheetContents, optionsOrCallback) {
+    const options = extractOptions(optionsOrCallback);
     // In case we're in come weird test environment that doesn't support JSDom
     const { existing, styleTag } = createSheet(ruleId, sheetContents);
     // if the tag existed, DO NOT render it back out to the DOM.
@@ -152,12 +156,14 @@ function flushSheetContents(ruleId, sheetContents, options) {
     }
     return styleTag;
 }
-function coerceCreateStylesOptions(options) {
+function coerceCreateStylesOptions(optionsOrCallback) {
+    const options = extractOptions(optionsOrCallback);
     return {
         flush: options && typeof options.flush === 'boolean' ? options.flush : true
     };
 }
-function imports(ruleId, rulesFnc, options) {
+function imports(ruleId, rulesFnc, optionsOrCallback) {
+    const options = extractOptions(optionsOrCallback);
     const coerced = coerceCreateStylesOptions(options);
     const importRuleId = `${ruleId}_imports`;
     const rules = rulesFnc();
@@ -177,7 +183,8 @@ function imports(ruleId, rulesFnc, options) {
         flushSheetContents(importRuleId, sheetBuffer, options);
     }
 }
-function rawStyles(ruleId, rulesFnc, options) {
+function rawStyles(ruleId, rulesFnc, optionsOrCallback) {
+    const options = extractOptions(optionsOrCallback);
     const rawStylesId = `${ruleId}_raw`;
     const coerced = coerceCreateStylesOptions(options);
     const rules = rulesFnc();
@@ -190,7 +197,8 @@ function rawStyles(ruleId, rulesFnc, options) {
     }
     return mergedContents;
 }
-function keyframes(ruleId, framesFnc, options) {
+function keyframes(ruleId, framesFnc, optionsOrCallback) {
+    const options = extractOptions(optionsOrCallback);
     const coerced = coerceCreateStylesOptions(options);
     const keyframeId = (0, _generateClassName.generateClassName)(`${ruleId}_keyframes`);
     const frames = framesFnc();
@@ -206,7 +214,8 @@ function keyframes(ruleId, framesFnc, options) {
         stylesheet
     };
 }
-function createStyles(ruleId, rulesFnc, options) {
+function createStyles(ruleId, rulesFnc, optionsOrCallback) {
+    const options = extractOptions(optionsOrCallback);
     const rules = rulesFnc();
     const coerced = coerceCreateStylesOptions(options);
     const { classes: out, sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(ruleId, rules, coerced, null);

package/dist/cjs/createStyles.d.ts

@@ -1,6 +1,6 @@
 import type { SimpleStyleRegistry } from './simpleStyleRegistry.js';
 import type { ImportStringType, Nullish, Properties, SimpleStyleRules } from './types.js';
-export type CreateStylesOptions = Partial<{
+export type BaselineCreateStylesOptions = Partial<{
     /**
      * If true, automatically renders generated styles
      * to the DOM in an injected <style /> tag
@@ -25,13 +25,14 @@ export type CreateStylesOptions = Partial<{
      */
     registry?: Nullish<SimpleStyleRegistry>;
 }>;
-export declare function imports(ruleId: string, rulesFnc: () => ImportStringType[], options?: CreateStylesOptions): void;
-export declare function rawStyles<T extends SimpleStyleRules>(ruleId: string, rulesFnc: () => T, options?: Partial<CreateStylesOptions>): string;
-export declare function keyframes<T extends Record<string, Properties>>(ruleId: string, framesFnc: () => T, options?: CreateStylesOptions): {
+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 keyframes<T extends Record<string, Properties>>(ruleId: string, framesFnc: () => T, optionsOrCallback?: CreateStylesOptions): {
     keyframe: string;
     stylesheet: string;
 };
-export declare function createStyles<T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rulesFnc: () => T, options?: Partial<CreateStylesOptions>): {
+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;
     stylesheet: string;
     updateSheet: <T2 extends SimpleStyleRules>(updatedRulesFnc: () => Partial<T2>) => {

package/dist/cjs/makeStyles.cjs

@@ -9,38 +9,42 @@ Object.defineProperty(exports, "makeCssFuncs", {
     }
 });
 const _createStyles = require("./createStyles.cjs");
-function makeCssFuncs(opts) {
-    function wrappedCreateStyles(ruleId, rulesFnc, overrides) {
-        return (0, _createStyles.createStyles)(ruleId, // @ts-expect-error - we've gotten the consumption types this far
-        // so TSC can pound sand, because we know this operation is safe
-        ()=>rulesFnc('variables' in opts ? opts.variables : undefined), {
-            ...overrides,
-            registry: 'registry' in opts ? opts.registry : overrides?.registry
-        });
+function extractOverridesAndOpts(optsOrCallback, overridesOrCallback) {
+    const opts = typeof optsOrCallback === 'function' ? optsOrCallback() : optsOrCallback;
+    const overrides = typeof overridesOrCallback === 'function' ? overridesOrCallback() : overridesOrCallback;
+    return {
+        ...opts,
+        ...overrides
+    };
+}
+function makeCssFuncs(optsOrCallback) {
+    function wrappedCreateStyles(ruleId, rulesFnc, overridesOrCallback) {
+        return (0, _createStyles.createStyles)(ruleId, ()=>{
+            const opts = extractOverridesAndOpts(optsOrCallback, overridesOrCallback);
+            return rulesFnc(// @ts-expect-error - this is a safe operation, even if tsc gets confused right here
+            'variables' in opts ? opts.variables : undefined);
+        }, ()=>extractOverridesAndOpts(optsOrCallback, overridesOrCallback));
     }
-    function wrappedCreateKeyframes(ruleId, rulesFnc, overrides) {
-        return (0, _createStyles.keyframes)(ruleId, // @ts-expect-error - we've gotten the consumption types this far
-        // so TSC can pound sand, because we know this operation is safe
-        ()=>rulesFnc('variables' in opts ? opts.variables : undefined), {
-            ...overrides,
-            registry: 'registry' in opts ? opts.registry : overrides?.registry
-        });
+    function wrappedCreateKeyframes(ruleId, rulesFnc, overridesOrCallback) {
+        return (0, _createStyles.keyframes)(ruleId, ()=>{
+            const opts = extractOverridesAndOpts(optsOrCallback, overridesOrCallback);
+            return rulesFnc(// @ts-expect-error - this is a safe operation, even if tsc gets confused right here
+            'variables' in opts ? opts.variables : undefined);
+        }, ()=>extractOverridesAndOpts(optsOrCallback, overridesOrCallback));
     }
-    function wrappedRawStyles(ruleId, rulesFnc, overrides) {
-        return (0, _createStyles.rawStyles)(ruleId, // @ts-expect-error - we've gotten the consumption types this far
-        // so TSC can pound sand, because we know this operation is safe
-        ()=>rulesFnc('variables' in opts ? opts.variables : undefined), {
-            ...overrides,
-            registry: 'registry' in opts ? opts.registry : overrides?.registry
-        });
+    function wrappedRawStyles(ruleId, rulesFnc, overridesOrCallback) {
+        return (0, _createStyles.rawStyles)(ruleId, ()=>{
+            const opts = extractOverridesAndOpts(optsOrCallback, overridesOrCallback);
+            return rulesFnc(// @ts-expect-error - this is a safe operation, even if tsc gets confused right here
+            'variables' in opts ? opts.variables : undefined);
+        }, ()=>extractOverridesAndOpts(optsOrCallback, overridesOrCallback));
     }
-    function wrappedImports(ruleId, rulesFnc, overrides) {
-        return (0, _createStyles.imports)(ruleId, // @ts-expect-error - we've gotten the consumption types this far
-        // so TSC can pound sand, because we know this operation is safe
-        ()=>rulesFnc('variables' in opts ? opts.variables : undefined), {
-            ...overrides,
-            registry: 'registry' in opts ? opts.registry : overrides?.registry
-        });
+    function wrappedImports(ruleId, rulesFnc, overridesOrCallback) {
+        return (0, _createStyles.imports)(ruleId, ()=>{
+            const opts = extractOverridesAndOpts(optsOrCallback, overridesOrCallback);
+            return rulesFnc(// @ts-expect-error - this is a safe operation, even if tsc gets confused right here
+            'variables' in opts ? opts.variables : undefined);
+        }, ()=>extractOverridesAndOpts(optsOrCallback, overridesOrCallback));
     }
     return {
         createStyles: wrappedCreateStyles,

package/dist/cjs/makeStyles.d.ts

@@ -5,7 +5,10 @@ import type { Nullish, SimpleStyleRules } from './types.js';
 type MakeCssFuncsOpts<T extends object | undefined | null> = {
     registry?: Nullish<SimpleStyleRegistry>;
     variables?: T;
-};
+} | (() => {
+    registry?: Nullish<SimpleStyleRegistry>;
+    variables?: T;
+});
 /**
  * Creates all of your CSS functions, createStyles, keframes and rawStyles,
  * and scopes them all to your registry and variables definitions (both are optional).
@@ -13,8 +16,8 @@ type MakeCssFuncsOpts<T extends object | undefined | null> = {
  * they accept a function as the 2nd parameter, instead of the usual object.
  * The function will be provided with your variables
  */
-export declare function makeCssFuncs<V extends object | undefined | null | never = never>(opts: 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, overrides?: CreateStylesOptions) => {
+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;
         stylesheet: string;
         updateSheet: <T2 extends SimpleStyleRules>(updatedRulesFnc: () => Partial<T2>) => {
@@ -22,11 +25,11 @@ export declare function makeCssFuncs<V extends object | undefined | null | never
             stylesheet: string;
         } | null;
     };
-    imports: (ruleId: string, rulesFnc: (vars: V extends undefined | null | never ? never : V) => `@import ${string}`[], overrides?: CreateStylesOptions) => void;
-    keyframes: <T extends Record<string, Properties>>(ruleId: string, rulesFnc: (vars: V extends undefined | null | never ? never : V) => T, overrides?: CreateStylesOptions) => {
+    imports: (ruleId: string, rulesFnc: (vars: V extends undefined | null | never ? never : V) => `@import ${string}`[], overridesOrCallback?: CreateStylesOptions) => void;
+    keyframes: <T extends Record<string, Properties>>(ruleId: string, rulesFnc: (vars: V extends undefined | null | never ? never : V) => T, overridesOrCallback?: CreateStylesOptions) => {
         keyframe: string;
         stylesheet: string;
     };
-    rawStyles: <T extends SimpleStyleRules>(ruleId: string, rulesFnc: (vars: V extends undefined | null | never ? never : V) => T, overrides?: CreateStylesOptions) => 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/SimpleStyleProvider.cjs

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/dist/esm/createStyles.d.ts

@@ -1,6 +1,6 @@
 import type { SimpleStyleRegistry } from './simpleStyleRegistry.js';
 import type { ImportStringType, Nullish, Properties, SimpleStyleRules } from './types.js';
-export type CreateStylesOptions = Partial<{
+export type BaselineCreateStylesOptions = Partial<{
     /**
      * If true, automatically renders generated styles
      * to the DOM in an injected <style /> tag
@@ -25,13 +25,14 @@ export type CreateStylesOptions = Partial<{
      */
     registry?: Nullish<SimpleStyleRegistry>;
 }>;
-export declare function imports(ruleId: string, rulesFnc: () => ImportStringType[], options?: CreateStylesOptions): void;
-export declare function rawStyles<T extends SimpleStyleRules>(ruleId: string, rulesFnc: () => T, options?: Partial<CreateStylesOptions>): string;
-export declare function keyframes<T extends Record<string, Properties>>(ruleId: string, framesFnc: () => T, options?: CreateStylesOptions): {
+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 keyframes<T extends Record<string, Properties>>(ruleId: string, framesFnc: () => T, optionsOrCallback?: CreateStylesOptions): {
     keyframe: string;
     stylesheet: string;
 };
-export declare function createStyles<T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rulesFnc: () => T, options?: Partial<CreateStylesOptions>): {
+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;
     stylesheet: string;
     updateSheet: <T2 extends SimpleStyleRules>(updatedRulesFnc: () => Partial<T2>) => {

package/dist/esm/createStyles.mjs

@@ -1,6 +1,9 @@
 /* eslint-disable @typescript-eslint/no-deprecated */ import merge from 'deepmerge';
 import { generateClassName } from './generateClassName.mjs';
 import { getPosthooks } from './plugins.mjs';
+function extractOptions(optionsOrCallback) {
+    return typeof optionsOrCallback === 'function' ? optionsOrCallback() : optionsOrCallback;
+}
 function isNestedSelector(r) {
     return /&/g.test(r);
 }
@@ -105,7 +108,8 @@ function createSheet(ruleId, sheetContents) {
     out.styleTag = styleTag;
     return out;
 }
-function flushSheetContents(ruleId, sheetContents, options) {
+function flushSheetContents(ruleId, sheetContents, optionsOrCallback) {
+    const options = extractOptions(optionsOrCallback);
     // In case we're in come weird test environment that doesn't support JSDom
     const { existing, styleTag } = createSheet(ruleId, sheetContents);
     // if the tag existed, DO NOT render it back out to the DOM.
@@ -120,12 +124,14 @@ function flushSheetContents(ruleId, sheetContents, options) {
     }
     return styleTag;
 }
-function coerceCreateStylesOptions(options) {
+function coerceCreateStylesOptions(optionsOrCallback) {
+    const options = extractOptions(optionsOrCallback);
     return {
         flush: options && typeof options.flush === 'boolean' ? options.flush : true
     };
 }
-export function imports(ruleId, rulesFnc, options) {
+export function imports(ruleId, rulesFnc, optionsOrCallback) {
+    const options = extractOptions(optionsOrCallback);
     const coerced = coerceCreateStylesOptions(options);
     const importRuleId = `${ruleId}_imports`;
     const rules = rulesFnc();
@@ -145,7 +151,8 @@ export function imports(ruleId, rulesFnc, options) {
         flushSheetContents(importRuleId, sheetBuffer, options);
     }
 }
-export function rawStyles(ruleId, rulesFnc, options) {
+export function rawStyles(ruleId, rulesFnc, optionsOrCallback) {
+    const options = extractOptions(optionsOrCallback);
     const rawStylesId = `${ruleId}_raw`;
     const coerced = coerceCreateStylesOptions(options);
     const rules = rulesFnc();
@@ -158,7 +165,8 @@ export function rawStyles(ruleId, rulesFnc, options) {
     }
     return mergedContents;
 }
-export function keyframes(ruleId, framesFnc, options) {
+export function keyframes(ruleId, framesFnc, optionsOrCallback) {
+    const options = extractOptions(optionsOrCallback);
     const coerced = coerceCreateStylesOptions(options);
     const keyframeId = generateClassName(`${ruleId}_keyframes`);
     const frames = framesFnc();
@@ -174,7 +182,8 @@ export function keyframes(ruleId, framesFnc, options) {
         stylesheet
     };
 }
-export function createStyles(ruleId, rulesFnc, options) {
+export function createStyles(ruleId, rulesFnc, optionsOrCallback) {
+    const options = extractOptions(optionsOrCallback);
     const rules = rulesFnc();
     const coerced = coerceCreateStylesOptions(options);
     const { classes: out, sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(ruleId, rules, coerced, null);

package/dist/esm/makeStyles.d.ts

@@ -5,7 +5,10 @@ import type { Nullish, SimpleStyleRules } from './types.js';
 type MakeCssFuncsOpts<T extends object | undefined | null> = {
     registry?: Nullish<SimpleStyleRegistry>;
     variables?: T;
-};
+} | (() => {
+    registry?: Nullish<SimpleStyleRegistry>;
+    variables?: T;
+});
 /**
  * Creates all of your CSS functions, createStyles, keframes and rawStyles,
  * and scopes them all to your registry and variables definitions (both are optional).
@@ -13,8 +16,8 @@ type MakeCssFuncsOpts<T extends object | undefined | null> = {
  * they accept a function as the 2nd parameter, instead of the usual object.
  * The function will be provided with your variables
  */
-export declare function makeCssFuncs<V extends object | undefined | null | never = never>(opts: 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, overrides?: CreateStylesOptions) => {
+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;
         stylesheet: string;
         updateSheet: <T2 extends SimpleStyleRules>(updatedRulesFnc: () => Partial<T2>) => {
@@ -22,11 +25,11 @@ export declare function makeCssFuncs<V extends object | undefined | null | never
             stylesheet: string;
         } | null;
     };
-    imports: (ruleId: string, rulesFnc: (vars: V extends undefined | null | never ? never : V) => `@import ${string}`[], overrides?: CreateStylesOptions) => void;
-    keyframes: <T extends Record<string, Properties>>(ruleId: string, rulesFnc: (vars: V extends undefined | null | never ? never : V) => T, overrides?: CreateStylesOptions) => {
+    imports: (ruleId: string, rulesFnc: (vars: V extends undefined | null | never ? never : V) => `@import ${string}`[], overridesOrCallback?: CreateStylesOptions) => void;
+    keyframes: <T extends Record<string, Properties>>(ruleId: string, rulesFnc: (vars: V extends undefined | null | never ? never : V) => T, overridesOrCallback?: CreateStylesOptions) => {
         keyframe: string;
         stylesheet: string;
     };
-    rawStyles: <T extends SimpleStyleRules>(ruleId: string, rulesFnc: (vars: V extends undefined | null | never ? never : V) => T, overrides?: CreateStylesOptions) => string;
+    rawStyles: <T extends SimpleStyleRules>(ruleId: string, rulesFnc: (vars: V extends undefined | null | never ? never : V) => T, overridesOrCallback?: CreateStylesOptions) => string;
 };
 export {};

package/dist/esm/makeStyles.mjs

@@ -1,42 +1,46 @@
 import { createStyles, imports, keyframes, rawStyles } from './createStyles.mjs';
+function extractOverridesAndOpts(optsOrCallback, overridesOrCallback) {
+    const opts = typeof optsOrCallback === 'function' ? optsOrCallback() : optsOrCallback;
+    const overrides = typeof overridesOrCallback === 'function' ? overridesOrCallback() : overridesOrCallback;
+    return {
+        ...opts,
+        ...overrides
+    };
+}
 /**
  * Creates all of your CSS functions, createStyles, keframes and rawStyles,
  * and scopes them all to your registry and variables definitions (both are optional).
  * The variants of these functions differ slightly, in that
  * they accept a function as the 2nd parameter, instead of the usual object.
  * The function will be provided with your variables
- */ export function makeCssFuncs(opts) {
-    function wrappedCreateStyles(ruleId, rulesFnc, overrides) {
-        return createStyles(ruleId, // @ts-expect-error - we've gotten the consumption types this far
-        // so TSC can pound sand, because we know this operation is safe
-        ()=>rulesFnc('variables' in opts ? opts.variables : undefined), {
-            ...overrides,
-            registry: 'registry' in opts ? opts.registry : overrides?.registry
-        });
+ */ export function makeCssFuncs(optsOrCallback) {
+    function wrappedCreateStyles(ruleId, rulesFnc, overridesOrCallback) {
+        return createStyles(ruleId, ()=>{
+            const opts = extractOverridesAndOpts(optsOrCallback, overridesOrCallback);
+            return rulesFnc(// @ts-expect-error - this is a safe operation, even if tsc gets confused right here
+            'variables' in opts ? opts.variables : undefined);
+        }, ()=>extractOverridesAndOpts(optsOrCallback, overridesOrCallback));
     }
-    function wrappedCreateKeyframes(ruleId, rulesFnc, overrides) {
-        return keyframes(ruleId, // @ts-expect-error - we've gotten the consumption types this far
-        // so TSC can pound sand, because we know this operation is safe
-        ()=>rulesFnc('variables' in opts ? opts.variables : undefined), {
-            ...overrides,
-            registry: 'registry' in opts ? opts.registry : overrides?.registry
-        });
+    function wrappedCreateKeyframes(ruleId, rulesFnc, overridesOrCallback) {
+        return keyframes(ruleId, ()=>{
+            const opts = extractOverridesAndOpts(optsOrCallback, overridesOrCallback);
+            return rulesFnc(// @ts-expect-error - this is a safe operation, even if tsc gets confused right here
+            'variables' in opts ? opts.variables : undefined);
+        }, ()=>extractOverridesAndOpts(optsOrCallback, overridesOrCallback));
     }
-    function wrappedRawStyles(ruleId, rulesFnc, overrides) {
-        return rawStyles(ruleId, // @ts-expect-error - we've gotten the consumption types this far
-        // so TSC can pound sand, because we know this operation is safe
-        ()=>rulesFnc('variables' in opts ? opts.variables : undefined), {
-            ...overrides,
-            registry: 'registry' in opts ? opts.registry : overrides?.registry
-        });
+    function wrappedRawStyles(ruleId, rulesFnc, overridesOrCallback) {
+        return rawStyles(ruleId, ()=>{
+            const opts = extractOverridesAndOpts(optsOrCallback, overridesOrCallback);
+            return rulesFnc(// @ts-expect-error - this is a safe operation, even if tsc gets confused right here
+            'variables' in opts ? opts.variables : undefined);
+        }, ()=>extractOverridesAndOpts(optsOrCallback, overridesOrCallback));
     }
-    function wrappedImports(ruleId, rulesFnc, overrides) {
-        return imports(ruleId, // @ts-expect-error - we've gotten the consumption types this far
-        // so TSC can pound sand, because we know this operation is safe
-        ()=>rulesFnc('variables' in opts ? opts.variables : undefined), {
-            ...overrides,
-            registry: 'registry' in opts ? opts.registry : overrides?.registry
-        });
+    function wrappedImports(ruleId, rulesFnc, overridesOrCallback) {
+        return imports(ruleId, ()=>{
+            const opts = extractOverridesAndOpts(optsOrCallback, overridesOrCallback);
+            return rulesFnc(// @ts-expect-error - this is a safe operation, even if tsc gets confused right here
+            'variables' in opts ? opts.variables : undefined);
+        }, ()=>extractOverridesAndOpts(optsOrCallback, overridesOrCallback));
     }
     return {
         createStyles: wrappedCreateStyles,

package/dist/esm/next/SimpleStyleProvider.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Accumulates all CSS rules and writes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simplestyle-js",
-  "version": "5.3.5",
+  "version": "5.4.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": {