simplestyle-js 4.1.1 → 4.1.3

package/README.md

@@ -94,7 +94,7 @@ Rules support nested selectors via `&`, media queries, and `$className` back-ref
 
 - `keyframes(ruleId, frames, options?)`
   - Generates a unique animation name and accompanying `@keyframes` CSS.
-  - Returns `[animationName, stylesheet]`. Respects `flush` and `insertBefore/After` options.
+  - Returns `{ keyframe: string; stylesheet: string; }`. Respects `flush` and `insertBefore/After` options.
 
 - `rawStyles(ruleId, rules, options?)`
   - Writes rules without generating new class names. Keys must already be selectors (e.g., `html`, `body *`, `.app`).

package/dist/cjs/createStyles.cjs

@@ -161,10 +161,15 @@ function coerceCreateStylesOptions(options) {
     };
 }
 function rawStyles(ruleId, rules, options) {
+    const rawStylesId = `${ruleId}_raw`;
     const coerced = coerceCreateStylesOptions(options);
-    const { sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(ruleId, rules, coerced, null, true);
+    const { sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(rawStylesId, rules, coerced, null, true);
     const mergedContents = `${sheetContents}${mediaQueriesContents}`;
-    if (coerced.flush) flushSheetContents(ruleId, mergedContents, options);
+    if (options?.registry) {
+        options.registry.add(rawStylesId, mergedContents);
+    } else if (coerced.flush) {
+        flushSheetContents(rawStylesId, mergedContents, options);
+    }
     return mergedContents;
 }
 function makeRawStyles(registry) {
@@ -176,14 +181,18 @@ function makeRawStyles(registry) {
 }
 function keyframes(ruleId, frames, options) {
     const coerced = coerceCreateStylesOptions(options);
-    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(ruleId, sheetContents);
-    return [
-        keyframeName,
-        sheetContents
-    ];
+    const keyframeId = (0, _generateClassName.generateClassName)(`${ruleId}_keyframes`);
+    const { sheetBuffer: keyframesContents } = execCreateStyles(keyframeId, frames, coerced, null, true);
+    const stylesheet = `@keyframes ${keyframeId}{${keyframesContents}}`;
+    if (options?.registry) {
+        options.registry.add(keyframeId, stylesheet);
+    } else if (coerced.flush) {
+        flushSheetContents(keyframeId, stylesheet);
+    }
+    return {
+        keyframe: keyframeId,
+        stylesheet
+    };
 }
 function makeKeyframes(registry) {
     return function wrappedCreateKeyframes(ruleId, rules) {

package/dist/cjs/createStyles.d.ts

@@ -28,8 +28,14 @@ export type CreateStylesOptions = Partial<{
 }>;
 export declare function rawStyles<T extends SimpleStyleRules>(ruleId: string, rules: T, options?: Partial<CreateStylesOptions>): string;
 export declare function makeRawStyles(registry: SimpleStyleRegistry): <T extends SimpleStyleRules>(ruleId: string, rules: T) => string;
-export declare function keyframes<T extends Record<string, Properties>>(ruleId: string, frames: T, options?: CreateStylesOptions): [string, string];
-export declare function makeKeyframes(registry: SimpleStyleRegistry): <T extends Record<string, Properties>>(ruleId: string, rules: T) => [string, string];
+export declare function keyframes<T extends Record<string, Properties>>(ruleId: string, frames: T, options?: CreateStylesOptions): {
+    keyframe: string;
+    stylesheet: string;
+};
+export declare function makeKeyframes(registry: SimpleStyleRegistry): <T extends Record<string, Properties>>(ruleId: string, rules: T) => {
+    keyframe: string;
+    stylesheet: string;
+};
 export declare function makeCreateStyles(registry: SimpleStyleRegistry): <T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rules: T) => {
     classes: O;
     stylesheet: string;

package/dist/esm/createStyles.d.ts

@@ -28,8 +28,14 @@ export type CreateStylesOptions = Partial<{
 }>;
 export declare function rawStyles<T extends SimpleStyleRules>(ruleId: string, rules: T, options?: Partial<CreateStylesOptions>): string;
 export declare function makeRawStyles(registry: SimpleStyleRegistry): <T extends SimpleStyleRules>(ruleId: string, rules: T) => string;
-export declare function keyframes<T extends Record<string, Properties>>(ruleId: string, frames: T, options?: CreateStylesOptions): [string, string];
-export declare function makeKeyframes(registry: SimpleStyleRegistry): <T extends Record<string, Properties>>(ruleId: string, rules: T) => [string, string];
+export declare function keyframes<T extends Record<string, Properties>>(ruleId: string, frames: T, options?: CreateStylesOptions): {
+    keyframe: string;
+    stylesheet: string;
+};
+export declare function makeKeyframes(registry: SimpleStyleRegistry): <T extends Record<string, Properties>>(ruleId: string, rules: T) => {
+    keyframe: string;
+    stylesheet: string;
+};
 export declare function makeCreateStyles(registry: SimpleStyleRegistry): <T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rules: T) => {
     classes: O;
     stylesheet: string;

package/dist/esm/createStyles.mjs

@@ -126,10 +126,15 @@ function coerceCreateStylesOptions(options) {
     };
 }
 export function rawStyles(ruleId, rules, options) {
+    const rawStylesId = `${ruleId}_raw`;
     const coerced = coerceCreateStylesOptions(options);
-    const { sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(ruleId, rules, coerced, null, true);
+    const { sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(rawStylesId, rules, coerced, null, true);
     const mergedContents = `${sheetContents}${mediaQueriesContents}`;
-    if (coerced.flush) flushSheetContents(ruleId, mergedContents, options);
+    if (options?.registry) {
+        options.registry.add(rawStylesId, mergedContents);
+    } else if (coerced.flush) {
+        flushSheetContents(rawStylesId, mergedContents, options);
+    }
     return mergedContents;
 }
 export function makeRawStyles(registry) {
@@ -141,14 +146,18 @@ export function makeRawStyles(registry) {
 }
 export function keyframes(ruleId, frames, options) {
     const coerced = coerceCreateStylesOptions(options);
-    const keyframeName = generateClassName(`${ruleId}_keyframes_`);
-    const { sheetBuffer: keyframesContents } = execCreateStyles(ruleId, frames, coerced, null, true);
-    const sheetContents = `@keyframes ${keyframeName}{${keyframesContents}}`;
-    if (coerced.flush) flushSheetContents(ruleId, sheetContents);
-    return [
-        keyframeName,
-        sheetContents
-    ];
+    const keyframeId = generateClassName(`${ruleId}_keyframes`);
+    const { sheetBuffer: keyframesContents } = execCreateStyles(keyframeId, frames, coerced, null, true);
+    const stylesheet = `@keyframes ${keyframeId}{${keyframesContents}}`;
+    if (options?.registry) {
+        options.registry.add(keyframeId, stylesheet);
+    } else if (coerced.flush) {
+        flushSheetContents(keyframeId, stylesheet);
+    }
+    return {
+        keyframe: keyframeId,
+        stylesheet
+    };
 }
 export function makeKeyframes(registry) {
     return function wrappedCreateKeyframes(ruleId, rules) {

package/package.json

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