simplestyle-js 4.3.1 → 4.3.3-beta.0

package/README.md

@@ -12,10 +12,13 @@ A concise guide to the core `simplestyle-js` APIs, how they fit together, and ho
 ## Table of Contents
 - [Install](#install)
 - [Quick Start](#quick-start)
-- [API Reference](#api-reference-from-srcindexts)
+- [API Reference](#api-reference)
 - [Patterns and Tips](#patterns-and-tips)
+  - [Creating reusable variables and / or design system-like tokens](#reusable-variables)
 - [SSR](#ssr)
-  - [SSR steps for most SSR / SSG frameworks (including Next.js)](#ssr-steps-for-most-ssr--ssg-frameworks)
+  - [Next.js](#nextjs)
+  - [Astro](#astro)
+  - [SSR steps for most SSR / SSG frameworks](#ssr-steps-for-most-ssr--ssg-frameworks)
     - [1. Set your seed, create a SimpleStyleRegistry and your style functions](#1-set-your-seed-create-a-simplestyleregistry-and-your-style-functions)
     - [2. Render the generated styles in your HTML](#2-render-the-generated-styles-in-your-html)
     - [3. Create your styles and have fun!](#3-create-your-styles-and-have-fun)
@@ -49,10 +52,10 @@ yarn add simplestyle-js
 
 ## Quick Start
 
-```tsx
+```jsx
 import createStyles from 'simplestyle-js';
 
-const { classes } = createStyles('Button', {
+const { classes } = createStyles('Button', () => ({
   root: {
     '&:hover': { backgroundColor: '#2d6cdf' },
     '@media (max-width: 768px)': { padding: '10px 12px' },
@@ -61,7 +64,7 @@ const { classes } = createStyles('Button', {
     color: '#fff',
     padding: '12px 16px',
   },
-});
+}));
 
 document.querySelector('button')?.classList.add(classes.root);
 
@@ -81,7 +84,7 @@ Rules support nested selectors via `&`, media queries, and `$className` back-ref
   - `updateSheet(updatedRules)` merges rules and updates the existing sheet (works when `flush` is `true` or a `registry` is provided). Returns `{ classes, stylesheet } | null`.
   - Example:
     ```ts
-    const { classes, stylesheet } = createStyles('Nav', {
+    const { classes, stylesheet } = createStyles('Nav', () => ({
       wrapper: { display: 'flex', gap: 12 },
       link: {
         '&:hover': { textDecoration: 'underline' },
@@ -89,24 +92,29 @@ Rules support nested selectors via `&`, media queries, and `$className` back-ref
       '@media (max-width: 600px)': {
         wrapper: { flexDirection: 'column' },
       },
-    }, { flush: false }); // do not write to the DOM automatically
+    }), { flush: false }); // do not write to the DOM automatically
     ```
 
-- `keyframes(ruleId, frames, options?)`
+- `keyframes(ruleId, framesFnc, options?)`
   - Generates a unique animation name and accompanying `@keyframes` CSS.
   - Returns `{ keyframe: string; stylesheet: string; }`. Respects `flush` and `insertBefore/After` options.
 
-- `rawStyles(ruleId, rules, options?)`
+- `rawStyles(ruleId, rulesFnc, options?)`
   - Writes rules without generating new class names. Keys must already be selectors (e.g., `html`, `body *`, `.app`).
   - Good for global resets or theme primitives. Respects `flush` and `registry`.
 
+- `makeCssFuncs({ registry?, variables? })`
+  - Returns `createStyles`, `keyframes` and `rawStyles` functions for you to use that are bound to an optional `SimpleStyleRegistry` and an optional `variables` object.
+  - Use this variant if you want to bind all of the CSS functions to a set of styling tokens / variables that you want accessible and available wherever you write your CSS, complete with IDE intellisense.
+  - Use this as a convenience if you don't want to manually wire up each CSS function (listed below) to your registry.
+
 - `makeCreateStyles(registry)`
   - Convenience wrapper that returns a `createStyles` instance pre-bound to a `SimpleStyleRegistry`. Use this when you want every call to accumulate in a registry (especially useful for SSR / Server-side rendering).
 
-- `makeRawStyles(registry)` *(from `simplestyle-js/createStyles`)*
+- `makeRawStyles(registry)`
   - Returns a `rawStyles` helper preconfigured with the provided registry; calls will auto-add to that registry instead of touching the DOM (same motivation as `makeCreateStyles` for SSR motivations).
 
-- `makeKeyframes(registry)` *(from `simplestyle-js/createStyles`)*
+- `makeKeyframes(registry)`
   - Returns a `keyframes` helper preconfigured with the provided registry; calls will auto-add to that registry instead of touching the DOM (same motivation as `makeCreateStyles` for SSR motivations).
 
 - `setSeed(seed: number | null)`
@@ -129,18 +137,190 @@ Rules support nested selectors via `&`, media queries, and `$className` back-ref
 - **DOM placement**: `insertBefore` and `insertAfter` let you control the exact placement for where `<style />` tags will be rendered (does not apply to SSR / Server-side rendering).br
 - **Updating styles**: `updateSheet` merges the new rules and updates the existing `<style>` tag (or registry entry, if you're not letting `simplestyle-js` flush to the DOM automatically for you). It also returns `{ classes, stylesheet }` so you can re-use class names if needed.
 
+## Reusable Variables
+
+SimpleStyle provides an easy way to "bind" all of the CSS functions it exports to an object that contains your tokens, variables, etc.
+To do this, you would use the same API that's used to bind to a specific sheet registry, but specify the `variables` option:
+
+```typescript
+import { makeCssFuncs } from "simplestyle-js";
+import { SimpleStyleRegistry } from "simplestyle-js/simpleStyleRegistry";
+
+
+export const { createStyles, keyframes } = makeCssFuncs({
+  variables: {
+    background: {
+      primary: '#f1f1f3',
+      secondary: '#555',
+    },
+  },
+});
+
+const { classes } = createStyles('my-component', vars => ({
+  card: {
+    // use all of your variables here.
+    // your IDE should provide code assistance to you
+    // to inform you of what variables are available
+    backgroundColor: vars.background.secondary,
+  },
+}));
+```
+
+
 ## SSR
 
 ### Next.js
 
-Use the official Next.js integration here and wrap the `SimpleStyleProvider` around your `layout` file. 
-Check out this [Code Sanbox w/Next.js integration to see how it works](https://codesandbox.io/p/devbox/t3smf4).
+Create your style registry and scoped CSS functions, then use the official Next.js integration here and wrap the `SimpleStyleProvider` around your `layout` file.
+
+```typescript
+// src/styleRegistry.ts
+
+import { makeCssFuncs, setSeed } from "simplestyle-js";
+import { SimpleStyleRegistry } from "simplestyle-js/simpleStyleRegistry";
+
+// ensures deterministic creation of CSS classnames
+setSeed(11223344);
+
+export const StyleRegistry = new SimpleStyleRegistry();
+
+export const { createStyles, keyframes } = makeCssFuncs({ registry: StyleRegistry });
+```
+
+```tsx
+// src/app/layout.tsx
+import type { Metadata } from "next";
+import { SimpleStyleProvider } from "simplestyle-js/next";
+import { createStyles, StyleRegistry } from "./styleRegistry";
+
+// start writing CSS!
+const { classes } = createStyles('RootLayoutStyles', () => ({
+  rootLayout: {
+    backgroundColor: 'pink',
+    padding: '1rem',
+  },
+}));
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={classes.rootLayout}>
+        <SimpleStyleProvider registry={StyleRegistry}>
+          {children}
+        </SimpleStyleProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+Check out this [Code Sandbox w/Next.js integration to see how it works](https://codesandbox.io/p/devbox/t3smf4).
 
 
 ### Astro
 
-Use the official Astro integration here and wrap your page's `<head />` with the `SimpleStyleProvider`.
-Check out this [Code Sanbox w/Astro integration to see how it works](https://codesandbox.io/p/devbox/mq9twt).
+Create your style registry and scoped CSS functions, then use the official Astro integration here and wrap the `SimpleStyleProvider` around your page's `<head />` contents.
+
+```typescript
+// src/styleRegistry.ts
+
+import { makeCssFuncs, setSeed } from "simplestyle-js";
+import { SimpleStyleRegistry } from "simplestyle-js/simpleStyleRegistry";
+
+// ensures deterministic creation of CSS classnames
+setSeed(11223344);
+
+export const StyleRegistry = new SimpleStyleRegistry();
+
+export { createStyles, keyframes } = makeCssFuncs({ registry: StyleRegistry });
+```
+
+```astro
+---
+import SimpleStyleProvider from "simplestyle-js/astro/SimpleStyleProvider";
+
+import {
+  StyleRegistry,
+  createStyles,
+  keyframes,
+  rawStyles,
+} from "../styleRegistry";
+
+rawStyles("basic-css-reset", ()  => ({
+  "*": {
+    boxSizing: "border-box",
+  },
+  "body, html": {
+    fontFamily: "sans-serif",
+    fontSize: "16px",
+    padding: 0,
+  },
+}));
+
+// make changes to me and I will hot reload!
+const { keyframe } = keyframes("HomePage", () => ({
+  "0%": {
+    backgroundColor: "#cc2222cc",
+  },
+  "33%": {
+    backgroundColor: "#22cc22cc",
+  },
+  "66%": {
+    backgroundColor: "#2222cccc",
+  },
+  "100%": {
+    backgroundColor: "#cc2222cc",
+  },
+}));
+
+const { classes } = createStyles("HomePage", () => ({
+  background: {
+    alignItems: "center",
+    animation: `${keyframe} 5s linear infinite`,
+    display: "flex",
+    flexFlow: "column",
+    height: "90vh",
+    justifyContent: "center",
+    margin: "0 auto",
+    width: "90vw",
+  },
+  content: {
+    backgroundColor: "#00000033",
+    borderRadius: "4px",
+    color: "white",
+    padding: "1rem",
+  },
+}));
+---
+
+<html lang="en">
+  <head>
+    <SimpleStyleProvider registry={StyleRegistry}>
+      <meta charset="utf-8" />
+      <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+      <meta name="viewport" content="width=device-width" />
+      <meta name="generator" content={Astro.generator} />
+      <title>Astro</title>
+    </SimpleStyleProvider>
+  </head>
+  <body class={classes.background}>
+    <div class={classes.content}>
+      <h1>Astro</h1>
+      <p>
+        Checkout the CSS class and animation applied to the body, which is
+        making my colors changes.
+      </p>
+      <p>Feel free to edit me and I'll hot reload!</p>
+    </div>
+  </body>
+</html>
+```
+
+Check out this [Code Sandbox w/Astro integration to see how it works](https://codesandbox.io/p/devbox/mq9twt).
 
 **General SSR Concepts**
 
@@ -149,8 +329,7 @@ The core APIs needed to make this work are:
 
 - `new SimpleStyleRegistry()` - creates a new StyleSheet registry where all of your styles will be accumulated
 - `setSeed(number)` - ensures that classNames are deterministically computed and will be the same on the server and when they're rehydrated on the client
-- `makeCreateStyle(registry)` - returns a `createStyles()` function that is locked to your StyleSheet registry
-- `makeKeyframes(registry)` - returns a `keyframes()` function that is locaked to your StyleSheet registry
+- `makeCssFuncs({ registry })` - returns `createStyles()`, `keyframes()` and `rawStyles()` functions that are locked to your StyleSheet registry
 
 ### SSR steps for most SSR / SSG frameworks
 
@@ -160,7 +339,7 @@ The core APIs needed to make this work are:
 For demonstration purposes, we'll locate this at our `src/` root, and name it `styleLib.js`
 
 ```javascript
-import { makeCreateStyles, makeKeyframes, makeRawStyles, setSeed } from "simplestyle-js";
+import { makeCssFuncs, setSeed } from "simplestyle-js";
 import { SimpleStyleRegistry } from "simplestyle-js/simpleStyleRegistry";
 
 // set the className generation seed to ensure classNames are computed consistently
@@ -173,9 +352,7 @@ setSeed(1);
 export const StyleRegistry = new SimpleStyleRegistry();
 
 // export the style functions that will be locked to your registry
-export const createStyles = makeCreateStyles(StyleRegistry);
-export const keyframes = makeKeyframes(StyleRegistry);
-export const rawStyles = makeRawStyles(StyleRegistry);
+export const { createStyles, keyframes, rawStyles } = makeCssFuncs({ registry: })
 ```
 
 #### 2. Render the generated styles in your HTML
@@ -209,7 +386,7 @@ export default function Layout({ children }) {
 import { createStyles } from '../styleLib.js';
 
 // create your styles
-const { classes } = createStyles({
+const { classes } = createStyles('my-component', () => ({
   awesome: {
     backgroundColor: 'purple',
     fontSize: '2rem',
@@ -221,7 +398,7 @@ const { classes } = createStyles({
       textDecoration: 'underline',
     },
   },
-});
+}));
 
 export function MyCoolComponent() {
   // use your styles here!

package/dist/cjs/createStyles.cjs

@@ -9,21 +9,15 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    get default () {
+    get createStyles () {
         return createStyles;
     },
+    get default () {
+        return _default;
+    },
     get keyframes () {
         return keyframes;
     },
-    get makeCreateStyles () {
-        return makeCreateStyles;
-    },
-    get makeKeyframes () {
-        return makeKeyframes;
-    },
-    get makeRawStyles () {
-        return makeRawStyles;
-    },
     get rawStyles () {
         return rawStyles;
     }
@@ -160,9 +154,10 @@ function coerceCreateStylesOptions(options) {
         flush: options && typeof options.flush === 'boolean' ? options.flush : true
     };
 }
-function rawStyles(ruleId, rules, options) {
+function rawStyles(ruleId, rulesFnc, options) {
     const rawStylesId = `${ruleId}_raw`;
     const coerced = coerceCreateStylesOptions(options);
+    const rules = rulesFnc();
     const { sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(rawStylesId, rules, coerced, null, true);
     const mergedContents = `${sheetContents}${mediaQueriesContents}`;
     if (options?.registry) {
@@ -172,16 +167,10 @@ function rawStyles(ruleId, rules, options) {
     }
     return mergedContents;
 }
-function makeRawStyles(registry) {
-    return function wrappedRawStyles(ruleId, rules) {
-        return rawStyles(ruleId, rules, {
-            registry
-        });
-    };
-}
-function keyframes(ruleId, frames, options) {
+function keyframes(ruleId, framesFnc, options) {
     const coerced = coerceCreateStylesOptions(options);
     const keyframeId = (0, _generateClassName.generateClassName)(`${ruleId}_keyframes`);
+    const frames = framesFnc();
     const { sheetBuffer: keyframesContents } = execCreateStyles(keyframeId, frames, coerced, null, true);
     const stylesheet = `@keyframes ${keyframeId}{${keyframesContents}}`;
     if (options?.registry) {
@@ -194,30 +183,17 @@ function keyframes(ruleId, frames, options) {
         stylesheet
     };
 }
-function makeKeyframes(registry) {
-    return function wrappedCreateKeyframes(ruleId, rules) {
-        return keyframes(ruleId, rules, {
-            registry
-        });
-    };
-}
-function makeCreateStyles(registry) {
-    return function wrappedCreateStyles(ruleId, rules) {
-        return createStyles(ruleId, rules, {
-            registry
-        });
-    };
-}
-function createStyles(ruleId, rules, options) {
+function createStyles(ruleId, rulesFnc, options) {
+    const rules = rulesFnc();
     const coerced = coerceCreateStylesOptions(options);
     const { classes: out, sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(ruleId, rules, coerced, null);
     const mergedContents = `${sheetContents}${mediaQueriesContents}`;
     const replacedSheetContents = replaceBackReferences(out, mergedContents);
     let sheet = null;
-    const updateSheet = (updatedRules)=>{
+    const updateSheet = (updatedRulesFnc)=>{
         if (options?.flush || options?.registry || !options?.flush) {
             // We prefer the first set, and then we shallow merge
-            const { classes: updatedOut, sheetBuffer: updatedSheetContents, mediaQueriesBuffer: updatedMediaQueriesContents } = execCreateStyles(ruleId, (0, _deepmerge.default)(rules, updatedRules), {
+            const { classes: updatedOut, sheetBuffer: updatedSheetContents, mediaQueriesBuffer: updatedMediaQueriesContents } = execCreateStyles(ruleId, (0, _deepmerge.default)(rules, updatedRulesFnc()), {
                 flush: false
             }, null);
             const updatedMergedContents = `${updatedSheetContents}${updatedMediaQueriesContents}`;
@@ -245,3 +221,4 @@ function createStyles(ruleId, rules, options) {
         updateSheet
     };
 }
+const _default = createStyles;

package/dist/cjs/createStyles.d.ts

@@ -1,6 +1,6 @@
-import { Properties } from 'csstype';
-import { SimpleStyleRegistry } from './simpleStyleRegistry.js';
-import { SimpleStyleRules } from './types.js';
+import type { Properties } from 'csstype';
+import type { SimpleStyleRegistry } from './simpleStyleRegistry.js';
+import type { SimpleStyleRules } from './types.js';
 export type CreateStylesOptions = Partial<{
     /**
      * If true, automatically renders generated styles
@@ -26,30 +26,18 @@ export type CreateStylesOptions = Partial<{
      */
     registry?: SimpleStyleRegistry;
 }>;
-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): {
+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): {
     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;
-    updateSheet: <T2 extends SimpleStyleRules>(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>>(ruleId: string, rules: T, options?: Partial<CreateStylesOptions>): {
+export declare function createStyles<T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rulesFnc: () => T, options?: Partial<CreateStylesOptions>): {
     classes: O;
     stylesheet: string;
-    updateSheet: <T2 extends SimpleStyleRules>(updatedRules: Partial<T2>) => {
+    updateSheet: <T2 extends SimpleStyleRules>(updatedRulesFnc: () => Partial<T2>) => {
         classes: Record<string | number | keyof T2, string>;
         stylesheet: string;
     } | null;
 };
 export type CreateStylesArgs = Parameters<typeof createStyles>;
+export default createStyles;

package/dist/cjs/index.cjs

@@ -15,15 +15,6 @@ _export(exports, {
     get keyframes () {
         return _createStyles.keyframes;
     },
-    get makeCreateStyles () {
-        return _createStyles.makeCreateStyles;
-    },
-    get makeKeyframes () {
-        return _createStyles.makeKeyframes;
-    },
-    get makeRawStyles () {
-        return _createStyles.makeRawStyles;
-    },
     get rawStyles () {
         return _createStyles.rawStyles;
     },
@@ -36,7 +27,21 @@ _export(exports, {
 });
 const _createStyles = /*#__PURE__*/ _interop_require_wildcard(require("./createStyles.cjs"));
 const _generateClassName = require("./generateClassName.cjs");
+_export_star(require("./makeStyles.cjs"), exports);
 const _plugins = require("./plugins.cjs");
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();

package/dist/cjs/index.d.ts

@@ -1,6 +1,7 @@
 export type { CreateStylesArgs, CreateStylesOptions } from './createStyles.js';
-export { default as createStyles, keyframes, makeCreateStyles, makeKeyframes, makeRawStyles, rawStyles, } from './createStyles.js';
+export { default as createStyles, keyframes, rawStyles, } from './createStyles.js';
 export { setSeed } from './generateClassName.js';
+export * from './makeStyles.js';
 export type { PosthookPlugin } from './plugins.js';
 export { registerPosthook } from './plugins.js';
 export type { SimpleStyleRules } from './types.js';

package/dist/cjs/makeStyles.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "makeCssFuncs", {
+    enumerable: true,
+    get: function() {
+        return makeCssFuncs;
+    }
+});
+const _createStyles = require("./createStyles.cjs");
+function makeCssFuncs(opts) {
+    function wrappedCreateStyles(ruleId, rulesFnc) {
+        return (0, _createStyles.createStyles)(ruleId, ()=>rulesFnc('variables' in opts ? opts.variables : undefined), {
+            registry: 'registry' in opts ? opts.registry : undefined
+        });
+    }
+    function wrappedCreateKeyframes(ruleId, rulesFnc) {
+        return (0, _createStyles.keyframes)(ruleId, ()=>rulesFnc('variables' in opts ? opts.variables : undefined), {
+            registry: 'registry' in opts ? opts.registry : undefined
+        });
+    }
+    function wrappedRawStyles(ruleId, rulesFnc) {
+        return (0, _createStyles.rawStyles)(ruleId, ()=>rulesFnc('variables' in opts ? opts.variables : undefined), {
+            registry: 'registry' in opts ? opts.registry : undefined
+        });
+    }
+    return {
+        createStyles: wrappedCreateStyles,
+        keyframes: wrappedCreateKeyframes,
+        rawStyles: wrappedRawStyles
+    };
+}

package/dist/cjs/makeStyles.d.ts

@@ -0,0 +1,34 @@
+import type { Properties } from 'csstype';
+import type { SimpleStyleRegistry } from './simpleStyleRegistry.js';
+import type { SimpleStyleRules, SimpleStyleVariables } from './types.js';
+type MakeCssFuncsOpts<T extends SimpleStyleVariables> = {} | {
+    registry: SimpleStyleRegistry;
+} | {
+    variables: T;
+} | {
+    registry: 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).
+ * 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 declare function makeCssFuncs<V extends SimpleStyleVariables>(opts: MakeCssFuncsOpts<V>): {
+    createStyles: <T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rulesFnc: (vars?: V) => T) => {
+        classes: O;
+        stylesheet: string;
+        updateSheet: <T2 extends SimpleStyleRules>(updatedRulesFnc: () => Partial<T2>) => {
+            classes: Record<string | number | keyof T2, string>;
+            stylesheet: string;
+        } | null;
+    };
+    keyframes: <T extends Record<string, Properties>>(ruleId: string, rulesFnc: (vars?: V) => T) => {
+        keyframe: string;
+        stylesheet: string;
+    };
+    rawStyles: <T extends SimpleStyleRules>(ruleId: string, rulesFnc: (vars?: V) => T) => string;
+};
+export {};

package/dist/cjs/types.d.ts

@@ -1,5 +1,14 @@
-import { Properties } from 'csstype';
+import type { Properties } from 'csstype';
 export type SimpleStyleRules = {
     [key: string]: Properties | SimpleStyleRules;
 };
 export type RenderableSimpleStyleRules = SimpleStyleRules & Record<string, Properties[]>;
+export type SimpleStyleVariables = {
+    [group: string]: {
+        [variable: string]: {
+            default: string | number;
+            [variants: string]: string | number;
+        };
+    };
+};
+export type HasProperty<T, K extends keyof T> = T extends Record<K, any> ? true : false;

package/dist/esm/createStyles.d.ts

@@ -1,6 +1,6 @@
-import { Properties } from 'csstype';
-import { SimpleStyleRegistry } from './simpleStyleRegistry.js';
-import { SimpleStyleRules } from './types.js';
+import type { Properties } from 'csstype';
+import type { SimpleStyleRegistry } from './simpleStyleRegistry.js';
+import type { SimpleStyleRules } from './types.js';
 export type CreateStylesOptions = Partial<{
     /**
      * If true, automatically renders generated styles
@@ -26,30 +26,18 @@ export type CreateStylesOptions = Partial<{
      */
     registry?: SimpleStyleRegistry;
 }>;
-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): {
+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): {
     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;
-    updateSheet: <T2 extends SimpleStyleRules>(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>>(ruleId: string, rules: T, options?: Partial<CreateStylesOptions>): {
+export declare function createStyles<T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rulesFnc: () => T, options?: Partial<CreateStylesOptions>): {
     classes: O;
     stylesheet: string;
-    updateSheet: <T2 extends SimpleStyleRules>(updatedRules: Partial<T2>) => {
+    updateSheet: <T2 extends SimpleStyleRules>(updatedRulesFnc: () => Partial<T2>) => {
         classes: Record<string | number | keyof T2, string>;
         stylesheet: string;
     } | null;
 };
 export type CreateStylesArgs = Parameters<typeof createStyles>;
+export default createStyles;

package/dist/esm/createStyles.mjs

@@ -125,9 +125,10 @@ function coerceCreateStylesOptions(options) {
         flush: options && typeof options.flush === 'boolean' ? options.flush : true
     };
 }
-export function rawStyles(ruleId, rules, options) {
+export function rawStyles(ruleId, rulesFnc, options) {
     const rawStylesId = `${ruleId}_raw`;
     const coerced = coerceCreateStylesOptions(options);
+    const rules = rulesFnc();
     const { sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(rawStylesId, rules, coerced, null, true);
     const mergedContents = `${sheetContents}${mediaQueriesContents}`;
     if (options?.registry) {
@@ -137,16 +138,10 @@ export function rawStyles(ruleId, rules, options) {
     }
     return mergedContents;
 }
-export function makeRawStyles(registry) {
-    return function wrappedRawStyles(ruleId, rules) {
-        return rawStyles(ruleId, rules, {
-            registry
-        });
-    };
-}
-export function keyframes(ruleId, frames, options) {
+export function keyframes(ruleId, framesFnc, options) {
     const coerced = coerceCreateStylesOptions(options);
     const keyframeId = generateClassName(`${ruleId}_keyframes`);
+    const frames = framesFnc();
     const { sheetBuffer: keyframesContents } = execCreateStyles(keyframeId, frames, coerced, null, true);
     const stylesheet = `@keyframes ${keyframeId}{${keyframesContents}}`;
     if (options?.registry) {
@@ -159,30 +154,17 @@ export function keyframes(ruleId, frames, options) {
         stylesheet
     };
 }
-export function makeKeyframes(registry) {
-    return function wrappedCreateKeyframes(ruleId, rules) {
-        return keyframes(ruleId, rules, {
-            registry
-        });
-    };
-}
-export function makeCreateStyles(registry) {
-    return function wrappedCreateStyles(ruleId, rules) {
-        return createStyles(ruleId, rules, {
-            registry
-        });
-    };
-}
-export default function createStyles(ruleId, rules, options) {
+export function createStyles(ruleId, rulesFnc, options) {
+    const rules = rulesFnc();
     const coerced = coerceCreateStylesOptions(options);
     const { classes: out, sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(ruleId, rules, coerced, null);
     const mergedContents = `${sheetContents}${mediaQueriesContents}`;
     const replacedSheetContents = replaceBackReferences(out, mergedContents);
     let sheet = null;
-    const updateSheet = (updatedRules)=>{
+    const updateSheet = (updatedRulesFnc)=>{
         if (options?.flush || options?.registry || !options?.flush) {
             // We prefer the first set, and then we shallow merge
-            const { classes: updatedOut, sheetBuffer: updatedSheetContents, mediaQueriesBuffer: updatedMediaQueriesContents } = execCreateStyles(ruleId, merge(rules, updatedRules), {
+            const { classes: updatedOut, sheetBuffer: updatedSheetContents, mediaQueriesBuffer: updatedMediaQueriesContents } = execCreateStyles(ruleId, merge(rules, updatedRulesFnc()), {
                 flush: false
             }, null);
             const updatedMergedContents = `${updatedSheetContents}${updatedMediaQueriesContents}`;
@@ -210,3 +192,4 @@ export default function createStyles(ruleId, rules, options) {
         updateSheet
     };
 }
+export default createStyles;

package/dist/esm/index.d.ts

@@ -1,6 +1,7 @@
 export type { CreateStylesArgs, CreateStylesOptions } from './createStyles.js';
-export { default as createStyles, keyframes, makeCreateStyles, makeKeyframes, makeRawStyles, rawStyles, } from './createStyles.js';
+export { default as createStyles, keyframes, rawStyles, } from './createStyles.js';
 export { setSeed } from './generateClassName.js';
+export * from './makeStyles.js';
 export type { PosthookPlugin } from './plugins.js';
 export { registerPosthook } from './plugins.js';
 export type { SimpleStyleRules } from './types.js';

package/dist/esm/index.mjs

@@ -1,3 +1,4 @@
-export { default as createStyles, keyframes, makeCreateStyles, makeKeyframes, makeRawStyles, rawStyles } from './createStyles.mjs';
+export { default as createStyles, keyframes, rawStyles } from './createStyles.mjs';
 export { setSeed } from './generateClassName.mjs';
+export * from './makeStyles.mjs';
 export { registerPosthook } from './plugins.mjs';

package/dist/esm/makeStyles.d.ts

@@ -0,0 +1,34 @@
+import type { Properties } from 'csstype';
+import type { SimpleStyleRegistry } from './simpleStyleRegistry.js';
+import type { SimpleStyleRules, SimpleStyleVariables } from './types.js';
+type MakeCssFuncsOpts<T extends SimpleStyleVariables> = {} | {
+    registry: SimpleStyleRegistry;
+} | {
+    variables: T;
+} | {
+    registry: 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).
+ * 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 declare function makeCssFuncs<V extends SimpleStyleVariables>(opts: MakeCssFuncsOpts<V>): {
+    createStyles: <T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rulesFnc: (vars?: V) => T) => {
+        classes: O;
+        stylesheet: string;
+        updateSheet: <T2 extends SimpleStyleRules>(updatedRulesFnc: () => Partial<T2>) => {
+            classes: Record<string | number | keyof T2, string>;
+            stylesheet: string;
+        } | null;
+    };
+    keyframes: <T extends Record<string, Properties>>(ruleId: string, rulesFnc: (vars?: V) => T) => {
+        keyframe: string;
+        stylesheet: string;
+    };
+    rawStyles: <T extends SimpleStyleRules>(ruleId: string, rulesFnc: (vars?: V) => T) => string;
+};
+export {};

package/dist/esm/makeStyles.mjs

@@ -0,0 +1,29 @@
+import { createStyles, keyframes, rawStyles } from './createStyles.mjs';
+/**
+ * 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) {
+        return createStyles(ruleId, ()=>rulesFnc('variables' in opts ? opts.variables : undefined), {
+            registry: 'registry' in opts ? opts.registry : undefined
+        });
+    }
+    function wrappedCreateKeyframes(ruleId, rulesFnc) {
+        return keyframes(ruleId, ()=>rulesFnc('variables' in opts ? opts.variables : undefined), {
+            registry: 'registry' in opts ? opts.registry : undefined
+        });
+    }
+    function wrappedRawStyles(ruleId, rulesFnc) {
+        return rawStyles(ruleId, ()=>rulesFnc('variables' in opts ? opts.variables : undefined), {
+            registry: 'registry' in opts ? opts.registry : undefined
+        });
+    }
+    return {
+        createStyles: wrappedCreateStyles,
+        keyframes: wrappedCreateKeyframes,
+        rawStyles: wrappedRawStyles
+    };
+}

package/dist/esm/types.d.ts

@@ -1,5 +1,14 @@
-import { Properties } from 'csstype';
+import type { Properties } from 'csstype';
 export type SimpleStyleRules = {
     [key: string]: Properties | SimpleStyleRules;
 };
 export type RenderableSimpleStyleRules = SimpleStyleRules & Record<string, Properties[]>;
+export type SimpleStyleVariables = {
+    [group: string]: {
+        [variable: string]: {
+            default: string | number;
+            [variants: string]: string | number;
+        };
+    };
+};
+export type HasProperty<T, K extends keyof T> = T extends Record<K, any> ? true : false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simplestyle-js",
-  "version": "4.3.1",
+  "version": "4.3.3-beta.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": {
@@ -101,6 +101,16 @@
         "default": "./dist/esm/index.mjs"
       }
     },
+    "./makeStyles": {
+      "require": {
+        "types": "./dist/cjs/makeStyles.d.ts",
+        "default": "./dist/cjs/makeStyles.cjs"
+      },
+      "import": {
+        "types": "./dist/esm/makeStyles.d.ts",
+        "default": "./dist/esm/makeStyles.mjs"
+      }
+    },
     "./next/SimpleStyleProvider": {
       "require": {
         "types": "./dist/cjs/next/SimpleStyleProvider.d.ts",
@@ -186,5 +196,8 @@
   },
   "module": "./dist/esm/index.mjs",
   "types": "./dist/cjs/index.d.ts",
-  "main": "./dist/cjs/index.cjs"
-}
+  "main": "./dist/cjs/index.cjs",
+  "trustedDependencies": [
+    "@swc/core"
+  ]
+}