simplestyle-js 3.4.1 → 3.4.2-alpha.0

package/dist/cjs/createStyles.cjs

@@ -15,6 +15,9 @@ _export(exports, {
     get keyframes () {
         return keyframes;
     },
+    get makeCreateStyle () {
+        return makeCreateStyle;
+    },
     get rawStyles () {
         return rawStyles;
     }
@@ -158,6 +161,13 @@ function keyframes(frames, options) {
         sheetContents
     ];
 }
+function makeCreateStyle(registry) {
+    return function wrappedCreateStyles(rules) {
+        return createStyles(rules, {
+            registry
+        });
+    };
+}
 function createStyles(rules, options) {
     const coerced = coerceCreateStylesOptions(options);
     const { classes: out, sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(rules, coerced, null);
@@ -166,7 +176,7 @@ function createStyles(rules, options) {
     let sheet = null;
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const updateSheet = (updatedRules)=>{
-        if (options?.flush && sheet || !options?.flush) {
+        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), {
                 flush: false
@@ -181,7 +191,8 @@ function createStyles(rules, options) {
         }
         return null;
     };
-    if (coerced.flush) sheet = flushSheetContents(replacedSheetContents, options);
+    if (!options?.registry && coerced.flush) sheet = flushSheetContents(replacedSheetContents, options);
+    else if (options?.registry) options.registry.add(replacedSheetContents);
     // Need this TS cast to get solid code assist from the consumption-side
     return {
         classes: out,

package/dist/cjs/createStyles.d.ts

@@ -1,4 +1,5 @@
 import { Properties } from 'csstype';
+import { SimpleStyleRegistry } from './simpleStyleRegistry.js';
 import { SimpleStyleRules } from './types.js';
 export type CreateStylesOptions = Partial<{
     /**
@@ -16,9 +17,25 @@ export type CreateStylesOptions = Partial<{
      * will render the injects <style /> before this element
      */
     insertBefore?: HTMLElement;
+    /**
+     * if set, will automatically prevent any styles from
+     * being flushed to the DOM or inserted at all.
+     * All styles will be accumulated in the registry
+     * and it will be up to you to determine how they should
+     * be flushed.
+     */
+    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) => {
+    classes: O;
+    stylesheet: string;
+    updateSheet: <T2 extends SimpleStyleRules, K2 extends keyof T2, O2 extends Record<K2, string>>(updatedRules: Partial<T2>) => {
+        classes: Record<string | number | keyof T2, string>;
+        stylesheet: string;
+    } | null;
+};
 export default function createStyles<T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(rules: T, options?: Partial<CreateStylesOptions>): {
     classes: O;
     stylesheet: string;

package/dist/cjs/simpleStyleRegistry.cjs

@@ -0,0 +1,25 @@
+/**
+ * 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";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SimpleStyleRegistry", {
+    enumerable: true,
+    get: function() {
+        return SimpleStyleRegistry;
+    }
+});
+class SimpleStyleRegistry {
+    sheets = [];
+    add(contents) {
+        this.sheets.push(contents);
+    }
+    getCSS() {
+        return this.sheets.reduce((prev, contents)=>`${prev}
+${contents}`, '');
+    }
+}

package/dist/cjs/simpleStyleRegistry.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 declare class SimpleStyleRegistry {
+    private sheets;
+    add(contents: string): void;
+    getCSS(): string;
+}

package/dist/esm/createStyles.d.ts

@@ -1,4 +1,5 @@
 import { Properties } from 'csstype';
+import { SimpleStyleRegistry } from './simpleStyleRegistry.js';
 import { SimpleStyleRules } from './types.js';
 export type CreateStylesOptions = Partial<{
     /**
@@ -16,9 +17,25 @@ export type CreateStylesOptions = Partial<{
      * will render the injects <style /> before this element
      */
     insertBefore?: HTMLElement;
+    /**
+     * if set, will automatically prevent any styles from
+     * being flushed to the DOM or inserted at all.
+     * All styles will be accumulated in the registry
+     * and it will be up to you to determine how they should
+     * be flushed.
+     */
+    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) => {
+    classes: O;
+    stylesheet: string;
+    updateSheet: <T2 extends SimpleStyleRules, K2 extends keyof T2, O2 extends Record<K2, string>>(updatedRules: Partial<T2>) => {
+        classes: Record<string | number | keyof T2, string>;
+        stylesheet: string;
+    } | null;
+};
 export default function createStyles<T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(rules: T, options?: Partial<CreateStylesOptions>): {
     classes: O;
     stylesheet: string;

package/dist/esm/createStyles.mjs

@@ -133,6 +133,13 @@ export function keyframes(frames, options) {
         sheetContents
     ];
 }
+export function makeCreateStyle(registry) {
+    return function wrappedCreateStyles(rules) {
+        return createStyles(rules, {
+            registry
+        });
+    };
+}
 export default function createStyles(rules, options) {
     const coerced = coerceCreateStylesOptions(options);
     const { classes: out, sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(rules, coerced, null);
@@ -141,7 +148,7 @@ export default function createStyles(rules, options) {
     let sheet = null;
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const updateSheet = (updatedRules)=>{
-        if (options?.flush && sheet || !options?.flush) {
+        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), {
                 flush: false
@@ -156,7 +163,8 @@ export default function createStyles(rules, options) {
         }
         return null;
     };
-    if (coerced.flush) sheet = flushSheetContents(replacedSheetContents, options);
+    if (!options?.registry && coerced.flush) sheet = flushSheetContents(replacedSheetContents, options);
+    else if (options?.registry) options.registry.add(replacedSheetContents);
     // Need this TS cast to get solid code assist from the consumption-side
     return {
         classes: out,

package/dist/esm/simpleStyleRegistry.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 declare class SimpleStyleRegistry {
+    private sheets;
+    add(contents: string): void;
+    getCSS(): string;
+}

package/dist/esm/simpleStyleRegistry.mjs

@@ -0,0 +1,15 @@
+/**
+ * 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);
+    }
+    getCSS() {
+        return this.sheets.reduce((prev, contents)=>`${prev}
+${contents}`, '');
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simplestyle-js",
-  "version": "3.4.1",
+  "version": "3.4.2-alpha.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": {
@@ -129,6 +129,16 @@
         "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",