simplestyle-js 5.2.1 → 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/createStyles.d.ts

@@ -1,6 +1,5 @@
-import type { Properties } from 'csstype';
 import type { SimpleStyleRegistry } from './simpleStyleRegistry.js';
-import type { ImportStringType, SimpleStyleRules } from './types.js';
+import type { ImportStringType, Properties, SimpleStyleRules } from './types.js';
 export type CreateStylesOptions = Partial<{
     /**
      * If true, automatically renders generated styles

package/dist/cjs/index.cjs

@@ -29,6 +29,7 @@ const _createStyles = /*#__PURE__*/ _interop_require_wildcard(require("./createS
 const _generateClassName = require("./generateClassName.cjs");
 _export_star(require("./makeStyles.cjs"), exports);
 const _plugins = require("./plugins.cjs");
+_export_star(require("./types.cjs"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/index.d.ts

@@ -4,4 +4,4 @@ export { setSeed } from './generateClassName.js';
 export * from './makeStyles.js';
 export type { PosthookPlugin } from './plugins.js';
 export { registerPosthook } from './plugins.js';
-export type { ImportStringType, SimpleStyleRules } from './types.js';
+export * from './types.js';

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/cjs/types.d.ts

@@ -5,3 +5,4 @@ export type SimpleStyleRules = {
 export type RenderableSimpleStyleRules = SimpleStyleRules & Record<string, Properties[]>;
 export type HasProperty<T, K extends keyof T> = T extends Record<K, any> ? true : false;
 export type ImportStringType = `@import ${string}`;
+export type { Properties };

package/dist/esm/createStyles.d.ts

@@ -1,6 +1,5 @@
-import type { Properties } from 'csstype';
 import type { SimpleStyleRegistry } from './simpleStyleRegistry.js';
-import type { ImportStringType, SimpleStyleRules } from './types.js';
+import type { ImportStringType, Properties, SimpleStyleRules } from './types.js';
 export type CreateStylesOptions = Partial<{
     /**
      * If true, automatically renders generated styles

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/index.d.ts

@@ -4,4 +4,4 @@ export { setSeed } from './generateClassName.js';
 export * from './makeStyles.js';
 export type { PosthookPlugin } from './plugins.js';
 export { registerPosthook } from './plugins.js';
-export type { ImportStringType, SimpleStyleRules } from './types.js';
+export * from './types.js';

package/dist/esm/index.mjs

@@ -2,3 +2,4 @@ export { default as createStyles, keyframes, rawStyles } from './createStyles.mj
 export { setSeed } from './generateClassName.mjs';
 export * from './makeStyles.mjs';
 export { registerPosthook } from './plugins.mjs';
+export * from './types.mjs';

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/dist/esm/types.d.ts

@@ -5,3 +5,4 @@ export type SimpleStyleRules = {
 export type RenderableSimpleStyleRules = SimpleStyleRules & Record<string, Properties[]>;
 export type HasProperty<T, K extends keyof T> = T extends Record<K, any> ? true : false;
 export type ImportStringType = `@import ${string}`;
+export type { Properties };

package/dist/esm/types.mjs

@@ -1 +1,2 @@
+// re-export this type so we don't run into portability issues here
 export { };

package/package.json

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