simplestyle-js 5.2.2 → 5.3.0

package/dist/cjs/createStyles.cjs

@@ -43,7 +43,7 @@ function formatCSSRuleName(rule) {
     return rule.replaceAll(/([A-Z])/g, (p1)=>`-${p1.toLowerCase()}`);
 }
 function formatCSSRules(cssRules) {
-    return Object.entries(cssRules).reduce((prev, [cssProp, cssVal])=>`${prev}${formatCSSRuleName(cssProp)}:${String(cssVal)};`, '');
+    return Object.entries(cssRules).reduce((prev, [cssProp, cssVal])=>`${prev}${formatCSSRuleName(cssProp)}:${String(cssVal)}${typeof cssVal === 'number' ? 'px' : ''};`, '');
 }
 function execCreateStyles(ruleId, rules, options, parentSelector, noGenerateClassName = false) {
     const out = {};

package/dist/cjs/makeStyles.cjs

@@ -11,25 +11,33 @@ Object.defineProperty(exports, "makeCssFuncs", {
 const _createStyles = require("./createStyles.cjs");
 function makeCssFuncs(opts) {
     function wrappedCreateStyles(ruleId, rulesFnc, overrides) {
-        return (0, _createStyles.createStyles)(ruleId, ()=>rulesFnc('variables' in opts ? opts.variables : undefined), {
+        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 wrappedCreateKeyframes(ruleId, rulesFnc, overrides) {
-        return (0, _createStyles.keyframes)(ruleId, ()=>rulesFnc('variables' in opts ? opts.variables : undefined), {
+        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 wrappedRawStyles(ruleId, rulesFnc, overrides) {
-        return (0, _createStyles.rawStyles)(ruleId, ()=>rulesFnc('variables' in opts ? opts.variables : undefined), {
+        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 wrappedImports(ruleId, rulesFnc, overrides) {
-        return (0, _createStyles.imports)(ruleId, ()=>rulesFnc('variables' in opts ? opts.variables : undefined), {
+        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
         });

package/dist/cjs/makeStyles.d.ts

@@ -1,14 +1,10 @@
 import type { Properties } from 'csstype';
 import { type CreateStylesOptions } from './createStyles.js';
 import type { SimpleStyleRegistry } from './simpleStyleRegistry.js';
-import type { ImportStringType, SimpleStyleRules } from './types.js';
-type MakeCssFuncsOpts<T extends object> = {} | {
-    registry: SimpleStyleRegistry;
-} | {
-    variables: T;
-} | {
-    registry: SimpleStyleRegistry;
-    variables: T;
+import type { SimpleStyleRules } from './types.js';
+type MakeCssFuncsOpts<T extends object | undefined | null> = {
+    registry?: SimpleStyleRegistry;
+    variables?: T;
 };
 /**
  * Creates all of your CSS functions, createStyles, keframes and rawStyles,
@@ -17,8 +13,8 @@ type MakeCssFuncsOpts<T extends object> = {} | {
  * 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>(opts: MakeCssFuncsOpts<V>): {
-    createStyles: <T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rulesFnc: (vars?: V) => T, overrides?: CreateStylesOptions) => {
+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) => {
         classes: O;
         stylesheet: string;
         updateSheet: <T2 extends SimpleStyleRules>(updatedRulesFnc: () => Partial<T2>) => {
@@ -26,11 +22,11 @@ export declare function makeCssFuncs<V extends object>(opts: MakeCssFuncsOpts<V>
             stylesheet: string;
         } | null;
     };
-    imports: (ruleId: string, rulesFnc: (vars?: V) => ImportStringType[], overrides?: CreateStylesOptions) => void;
-    keyframes: <T extends Record<string, Properties>>(ruleId: string, rulesFnc: (vars?: V) => T, overrides?: CreateStylesOptions) => {
+    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) => {
         keyframe: string;
         stylesheet: string;
     };
-    rawStyles: <T extends SimpleStyleRules>(ruleId: string, rulesFnc: (vars?: V) => T, overrides?: CreateStylesOptions) => string;
+    rawStyles: <T extends SimpleStyleRules>(ruleId: string, rulesFnc: (vars: V extends undefined | null | never ? never : V) => T, overrides?: CreateStylesOptions) => string;
 };
 export {};

package/dist/esm/createStyles.mjs

@@ -11,7 +11,7 @@ function formatCSSRuleName(rule) {
     return rule.replaceAll(/([A-Z])/g, (p1)=>`-${p1.toLowerCase()}`);
 }
 function formatCSSRules(cssRules) {
-    return Object.entries(cssRules).reduce((prev, [cssProp, cssVal])=>`${prev}${formatCSSRuleName(cssProp)}:${String(cssVal)};`, '');
+    return Object.entries(cssRules).reduce((prev, [cssProp, cssVal])=>`${prev}${formatCSSRuleName(cssProp)}:${String(cssVal)}${typeof cssVal === 'number' ? 'px' : ''};`, '');
 }
 function execCreateStyles(ruleId, rules, options, parentSelector, noGenerateClassName = false) {
     const out = {};

package/dist/esm/makeStyles.d.ts

@@ -1,14 +1,10 @@
 import type { Properties } from 'csstype';
 import { type CreateStylesOptions } from './createStyles.js';
 import type { SimpleStyleRegistry } from './simpleStyleRegistry.js';
-import type { ImportStringType, SimpleStyleRules } from './types.js';
-type MakeCssFuncsOpts<T extends object> = {} | {
-    registry: SimpleStyleRegistry;
-} | {
-    variables: T;
-} | {
-    registry: SimpleStyleRegistry;
-    variables: T;
+import type { SimpleStyleRules } from './types.js';
+type MakeCssFuncsOpts<T extends object | undefined | null> = {
+    registry?: SimpleStyleRegistry;
+    variables?: T;
 };
 /**
  * Creates all of your CSS functions, createStyles, keframes and rawStyles,
@@ -17,8 +13,8 @@ type MakeCssFuncsOpts<T extends object> = {} | {
  * 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>(opts: MakeCssFuncsOpts<V>): {
-    createStyles: <T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rulesFnc: (vars?: V) => T, overrides?: CreateStylesOptions) => {
+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) => {
         classes: O;
         stylesheet: string;
         updateSheet: <T2 extends SimpleStyleRules>(updatedRulesFnc: () => Partial<T2>) => {
@@ -26,11 +22,11 @@ export declare function makeCssFuncs<V extends object>(opts: MakeCssFuncsOpts<V>
             stylesheet: string;
         } | null;
     };
-    imports: (ruleId: string, rulesFnc: (vars?: V) => ImportStringType[], overrides?: CreateStylesOptions) => void;
-    keyframes: <T extends Record<string, Properties>>(ruleId: string, rulesFnc: (vars?: V) => T, overrides?: CreateStylesOptions) => {
+    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) => {
         keyframe: string;
         stylesheet: string;
     };
-    rawStyles: <T extends SimpleStyleRules>(ruleId: string, rulesFnc: (vars?: V) => T, overrides?: CreateStylesOptions) => string;
+    rawStyles: <T extends SimpleStyleRules>(ruleId: string, rulesFnc: (vars: V extends undefined | null | never ? never : V) => T, overrides?: CreateStylesOptions) => string;
 };
 export {};

package/dist/esm/makeStyles.mjs

@@ -7,25 +7,33 @@ import { createStyles, imports, keyframes, rawStyles } from './createStyles.mjs'
  * The function will be provided with your variables
  */ export function makeCssFuncs(opts) {
     function wrappedCreateStyles(ruleId, rulesFnc, overrides) {
-        return createStyles(ruleId, ()=>rulesFnc('variables' in opts ? opts.variables : undefined), {
+        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
         });
     }
     function wrappedCreateKeyframes(ruleId, rulesFnc, overrides) {
-        return keyframes(ruleId, ()=>rulesFnc('variables' in opts ? opts.variables : undefined), {
+        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 wrappedRawStyles(ruleId, rulesFnc, overrides) {
-        return rawStyles(ruleId, ()=>rulesFnc('variables' in opts ? opts.variables : undefined), {
+        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 wrappedImports(ruleId, rulesFnc, overrides) {
-        return imports(ruleId, ()=>rulesFnc('variables' in opts ? opts.variables : undefined), {
+        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
         });

package/package.json

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