simplestyle-js 3.4.2-alpha.3 → 4.0.0

package/README.md

@@ -1,278 +1,233 @@
-# simplestyle-js [![Build Status](https://travis-ci.org/benduran/simplestyle.svg?branch=master)](https://travis-ci.org/benduran/simplestyle) [![Coverage Status](https://coveralls.io/repos/github/benduran/simplestyle/badge.svg?branch=master)](https://coveralls.io/github/benduran/simplestyle?branch=master)
-A super simple CSS-in-JS solution with friendly TypeScript support and a small file size
-
-## Bundle Size
-- `~5.5kB` minified
-- `~2.2kB` gzipped
-- Courtesy of [Bundle Phobia](https://bundlephobia.com/result?p=simplestyle-js)
-
-## Installation
-`npm install simplestyle-js --save`
+# Simplestyle-js Reference
+
+A concise guide to the core `simplestyle-js` APIs, how they fit together, and how to use them in browser and server-rendered apps (including Next.js).
+
+## Table of Contents
+- [Install](#install)
+- [Quick Start](#quick-start)
+- [API Reference (from `src/index.ts`)](#api-reference-from-srcindexts)
+- [Patterns and Tips](#patterns-and-tips)
+- [SSR](#ssr)
+  - [SSR steps for most SSR / SSG frameworks (including Next.js)](#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)
+- [Creating a simplestyle-js plugin](#creating-a-simplestyle-js-plugin)
+  - [Plugin Example (Autoprefixer)](#plugin-example-autoprefixer)
+- [License](#license)
+
+## Install
+
+**bun**
+```
+bun add simplestyle-js
+```
 
-## Live Demo using VanillaJS 
-[Codesandbox VanillaJS Demo](https://codesandbox.io/s/gracious-browser-9hxg3r?file=/src/index.js)
+**npm**
+```
+npm install simplestyle-js --save
+```
 
-## Live Demo using the provided React Hooks
-[Codesandbox React Hooks Demo](https://codesandbox.io/s/nice-franklin-485wi?file=/src/App.tsx)
+**pnpm**
 
-## Basic Usage
-```javascript
-import { createStyles } from 'simplestyle-js';
-const { classes } = createStyles({
-  myButton: {
-    '&:hover': {
-      backgroundColor: 'red',
-    },
-    '&:active, &:focus': {
-      borderColor: 'blue',
-    },
-    backgroundColor: 'black',
-    border: '1px solid',
-    boxSizing: 'border-box',
-    color: 'white',
-  },
-});
-const btn = document.createElement('button');
-btn.classList.add(classes.myButton);
-document.body.appendChild(btn);
+```
+pnpm add simplestyle-js
+```
 
-// Or React / JSX style component
+**yarn**
 
-const Button = (props) => <button {...props} className={classes.myButton}>Awesome button</button>
+```
+yarn add simplestyle-js
 ```
 
-## Advanced Usage
+## Quick Start
 
-`simplestyle-js` provides four APIs out of the box: `createStyles`, `keyframes` and `rawStyles` and `setSeed`.
+```tsx
+import createStyles from 'simplestyle-js';
 
-```javascript
-import { createStyles, rawStyles } from 'simplestyle-js';
-
-// Allows setting global, top-level styles.
-// This is useful for setting your application's overall font family, font size, box-sizing, etc
-rawStyles({
-  html: {
-    fontFamily: 'Arial, Helvetica, sans-serif',
-    fontSize: '16px',
-  },
-  'body *': {
-    boxSizing: 'border-box',
-  },
-  a: {
-    '&:hover': {
-      color: 'red',
-      textDecoration: 'none',
-    },
+const { classes } = createStyles('Button', {
+  root: {
+    '&:hover': { backgroundColor: '#2d6cdf' },
+    '@media (max-width: 768px)': { padding: '10px 12px' },
+    backgroundColor: '#1f4aa8',
+    borderRadius: 6,
+    color: '#fff',
+    padding: '12px 16px',
   },
 });
 
-// Generates a unique animation name and valid keyframes.
-// You can then use this animation name in your CSS-in-JS styles
-// in place of where you'd normally place an animation name 
-const [animationName] = keyframes({
-  '0%': {
-    borderColor: 'red',
-  },
-  '50%': {
-    borderColor: 'blue',
-  },
-  '100%': {
-    borderColor: 'red',
-  },
-});
+document.querySelector('button')?.classList.add(classes.root);
 
-const { classes } = createStyles({
-  myButton: {
-    '&:hover': {
-      backgroundColor: 'red',
-    },
-    '&:active, &:focus': {
-      borderColor: 'blue',
-    },
-    // use the generated animation name from the `keyframes` call above
-    animation: `${animationName} 1s linear infinite`,
-    backgroundColor: 'transparent',
-    border: '1px solid',
-    color: 'white',
-  },
-  header: {
-    // Media queries work great with simplestyle-js!
-    '@media (max-width: 960px)': {
-      '& > $myButton': {
-        padding: '12px', // special padding for header button on mobile
+// or, in a React / JSX-like component
+const Button = (props) => <button {...props} className={classes.root}>Awesome button</button>
+```
+
+Rules support nested selectors via `&`, media queries, and `$className` back-references to other generated classes.
+
+## API Reference (from `src/index.ts`)
+
+- `createStyles(ruleId, rules, options?)`
+  - Builds a set of class names and CSS from a rules object. Returns `{ classes, stylesheet, updateSheet }`.
+  - `options.flush` (default `true`): injects a `<style>` tag into `document.head`.
+  - `options.insertBefore` / `insertAfter`: choose where the `<style>` tag is placed when flushing.
+  - `options.registry`: provide a `SimpleStyleRegistry` instance to **collect** CSS instead of touching the DOM (ideal for SSR).
+  - `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', {
+      wrapper: { display: 'flex', gap: 12 },
+      link: {
+        '&:hover': { textDecoration: 'underline' },
       },
-      height: '50px', // target smaller height on mobile devices
-    },
-    '& > $myButton': {
-      padding: '4px 8px',
-    },
-    height: '100px',
-    left: 0,
-    position: 'fixed',
-    right: 0,
-    top: 0,
-  },
-}); // A new <style /> tag will appear in the header immediately after calling this function
+      '@media (max-width: 600px)': {
+        wrapper: { flexDirection: 'column' },
+      },
+    }, { flush: false }); // do not write to the DOM automatically
+    ```
 
-const myHeader = document.createElement('header');
-myHeader.classList.add(classes.header); // Will have a generated CSS classname in the format of '.header<unique_identifier>' ex .header_umdoaudnaoqwu
+- `keyframes(ruleId, frames, options?)`
+  - Generates a unique animation name and accompanying `@keyframes` CSS.
+  - Returns `[animationName, stylesheet]`. Respects `flush` and `insertBefore/After` options.
 
-// if you want Simplestyle to always generate the same CSS class names, you can set
-// your own initial seed. Assuming your modules are imported in the same order and
-// execute their calls to createStyles() in the same order, the library will reliably generate
-// the same classNames across successive calls.
-// This is useful if you're going to be generating your stylesheets on the server
-// and then rehydrating
+- `rawStyles(ruleId, rules, 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`.
 
-import { createStyles, setSeed } from 'simplestyle-js';
+- `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).
 
-setSeed(4567);
+- `makeRawStyles(registry)` *(from `simplestyle-js/createStyles`)*
+  - 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).
 
-const { classes } = createStyles({
-  someRule: {
-    backgroundColor: 'red,
-  },
-});
+- `makeKeyframes(registry)` *(from `simplestyle-js/createStyles`)*
+  - 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).
 
-// you can also update an existing stylesheet by adding or removing styles. Only applies when "flush" is set to true (it is true by default)
-const { classes, styles, updateSheet } = createStyles({
-  myRule: {
-    height: '400px,
-  },
-});
-const { classes: updatedClasses } = updateSheet({
-  anotherRule: {
-    textTransform: 'uppercase',
-  },
-  myRule: {
-    height: '200px',
-  },
-}); // will update replace the existing sheet's contents and you can use the updatedClassnames here
+- `setSeed(seed: number | null)`
+  - Controls the deterministic suffix used for generated class names. Setting the same seed in server and client renders keeps class names stable for hydration. Pass `null` to reset to `Date.now()`.
 
-```
+- `registerPosthook(fn: (sheet: string) => string)`
+  - Adds a transform that runs after CSS strings are generated but before they are flushed or stored. Use for autoprefixing, minification, or custom transforms. Hooks run in registration order.
 
-```javascript
-import { createStyles } from 'simplestyle-js';
+- Types
+  - `SimpleStyleRules`: `{ [selectorOrKey: string]: Properties | SimpleStyleRules }` (recursive rule tree).
+  - `CreateStylesOptions`: shape of the options described above.
+  - `PosthookPlugin`: signature for `registerPosthook`.
 
-const { classes, stylesheet } = createStyles({
-  nav: {
-    backgroundColor: '#ccaa00',
-    width: '24em',
-  },
-}, { flush: false }); // prevents immediate flushing of the <style /> tag to the DOM
-const { classes: moreClasses, stylesheet: moreSheetContents } = createStyles({
-  navButtons: {
-    padding: '.5em',
-  },
-}, { flush: false }); // prevents immediate flushing of the <style /> tag to the DOM
+## Patterns and Tips
 
-const styleTag = document.createElement('style');
-styleTag.innerHTML = `${stylesheet}${moreSheetContents}`;
-```
+- **Nested selectors**: `&` is replaced with the parent selector. Comma-separated selectors are supported (e.g., `'&:hover, &:focus'`).
+- **Back-references**: Use `$otherRule` to reference another generated class in the same `createStyles` call.
+    - **NOTE:** The `$otherRule` needs to have been declared above where you're trying to use it in a descendant selector.
+- **Media queries**: Top-level `@media` keys contain further rule objects.
+- **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.
 
-```javascript
-/**
- * By default, simple style will insert the <style /> tags
- * it creates in the document <head />. You can change this
- * by providing either an "insertBefore" or "insertAfter"
- * DOM node.
- */
-
-const someElement = document.getElementById('some-element');
-
-const { classes, stylesheet } = createStyles({
-  nav: {
-    backgroundColor: '#ccaa00',
-    width: '24em',
-  },
-}, { insertBefore: someElement }); // <style /> will be inserted into the DOM *before* someElement
+## SSR
 
-const anotherElement = document.getElementById('another-element`);
-const { classes: moreClasses, stylesheet: moreSheetContents } = createStyles({
-  navButtons: {
-    padding: '.5em',
-  },
-}, { insertAfter: anotherElement }); // <style /> will be insert into the DOM *after* anotherElement
+`simplestyle-js` is intentionally unopinionated, especially when it comes to deep integrations with various frameworks. This also applies to SSR / Server-side rendering.
+The core APIs needed to make this work are:
 
-const styleTag = document.createElement('style');
-styleTag.innerHTML = `${stylesheet}${moreSheetContents}`;
+- `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
 
-```
+### SSR steps for most SSR / SSG frameworks (including Next.js)
+
+#### 1. Set your seed, create a SimpleStyleRegistry and your style functions
 
-## React Hook
-`simplestyle-js` also ships with a React hook  that you can import, if you'd prefer working with hooks
+**Note**: This file can be located anywhere in your repository.
+For demonstration purposes, we'll locate this at our `src/` root, and name it `styleLib.js`
 
 ```javascript
-import React from 'react';
-import { useCreateStyles } from 'simplestyle-js/react';
-
-
-const MyComponent = () => {
-  // You can dynamically update the rules object passed into useCreateStyles.
-  // This is great for programmatically changing styles, colors, etc, based
-  // on some user input
-  const classes = useCreateStyles({
-    app: {
-      backgroundColor: 'purple',
-      fontSize: '16px',
-    },
-    button: {
-      padding: '1em',
-    },
-  });
+import { makeCreateStyles, makeKeyframes, makeRawStyles, setSeed } from "simplestyle-js";
+import { SimpleStyleRegistry } from "simplestyle-js/simpleStyleRegistry";
+
+// set the className generation seed to ensure classNames are computed consistently
+// between the client and the server.
+// the number you use is arbitrary.
+// set it higher to have most characters injected in your generated class names
+setSeed(1);
+
+// create the registry to hold all of the styles on the server
+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);
+```
+
+#### 2. Render the generated styles in your HTML
 
+**Note**: If you use Next.js, you would do this in your `layout.jsx` or `layout.tsx` file.
+Additionally, if you're not using React or any other JSX-inspired framework, you can use
+`StyleRegistry.getHTML()` to return an HTML string with all of the `<style />` tags you need,
+or `StyleRegistry.getCSS()` to just return a single, concatenated CSS string.
+
+```jsx
+import { StyleRegistry } from '../styleLib.js';
+
+export default function Layout({ children }) {
   return (
-    <div className={classes.app}>
-      <button className={classes.button}>Click Me</button>
-    </div>
+    <body lang="en">
+      {/* render your <style /> tags and set the IDs on them */}
+      {StyleRegistry.getRulesById().map(([id, css]) => (
+        <style id={id} key={id}>
+          {css}
+        </style>
+      ))}
+      {children}
+    </body>
   );
-};
+}
 ```
 
-## Authoring Plugins
-A recent update has removed the need for a "prehook" plugin (see previous [documentation](https://github.com/benduran/simplestyle/blob/276aac7fd8b64c6cbfced152249aac7024351092/README.md#prehook-plugin-example-poor-mans-autoprefixer) for historical purposes).
-There is a single type of plugin:
-- `posthook`
-  - Called on all style rule objects *after* the CSS string has been generated, but before it has been written to the DOM in a `<style />` tag
-- When creating a plugin, for improved SEO, it is **highly recommended** that you prefix the plugin package name with `simplestyle-js-plugin-*`.
-  - See the official `postcss` Simplestyle plugin as an example: [simplestyle-js-plugin-postcss](https://www.npmjs.com/package/simplestyle-js-plugin-postcss)
+#### 3. Create your styles and have fun!
 
-### Posthook Plugin Example *Full Autoprefixer and PostCSS integration*
-```javascript
-import autoprefixer from 'autoprefixer';
-import postcss from 'postcss';
-import { createStyles, registerPostHook } from 'simplestyle-js';
+```jsx
+import { createStyles } from '../styleLib.js';
 
-const posthookVendorPrefix = sheetContents => postcss([autoprefixer()]).process(s.getStyles()).css;
-registerPostHook(posthookVendorPrefix);
-const styles = createStyles({
-  postHookRoot: {
-    userSelect: 'none',
+// create your styles
+const { classes } = createStyles({
+  awesome: {
+    backgroundColor: 'purple',
+    fontSize: '2rem',
+    padding: '2rem',
+
+    '& > span': {
+      fontStyle: 'italic',
+      fontWeight: 'bold',
+      textDecoration: 'underline',
+    },
   },
 });
-const div = document.createElement('div');
-div.classList.add(styles.posthookRoot); // This div will have all vendor prefixed CSS properties based on how PostCSS and Autoprefixer transform the CSS
-document.body.appendChild(div);
-
-// Or in a React / JSX-style component
 
-const MyComponent = () => <div className={styles.postHookRoot}>Some stuff here</div>
+export function MyCoolComponent() {
+  // use your styles here!
+  return (
+    <div className={classes.awesome}>
+      This is super <span>cool.</span>
+    </div>
+  );
+}
 ```
-### Plugin API
-SimpleStyle does one thing out of the box well, and that's providing an intuitive way for you to write your CSS-in-JS in ways that are very similar to popular CSS Preprocessors like LESS, SASS, Stylus, among others. If you need to provide additional functionality that's not offered in the core library, `simplestyle-js` provides easy ways to tie into lifecycle hooks in the style rendering process if you need to stub out additional behavior. This allows you to create and chain an infinite number of plugins, based on your needs. 
 
-In order to use a plugin, you need to **register** each plugin you'd like to use *before* you issue any calls to `createStyles`. Plugins will be executed in the order in which they were registered. The methods available for you to register plugins are as follows:
+## Creating a simplestyle-js plugin
+
+Do this if you want to integrate with `postcss`, `autoprefixer`, or any other CSS transformation utility you desire.
 
-- `registerPostHook(postHookFnc)`
-  - `postHookFnc` is a function that accepts one parameter, which is the string contents of the sheet that should eventually be written to the DOM. This function should return a string, after you've done any desired transformations to the sheetContents.
+### Plugin Example (Autoprefixer)
 
-## What this library isn't
-This library isn't trying to make grandiose assumptions about how your styles should be rendered. Its goal is to simply provide a typed way of 
-easily creating reusable styles close to your JavaScript / TypeScript components. It is a super compact, small file size way of creating CSS in JS and assumes that you're wise enough to know
-whether you've made a styling mistake (wrong property, wrong unit, invalid rule format, etc).
+```ts
+import autoprefixer from 'autoprefixer';
+import postcss from 'postcss';
+import { registerPosthook } from 'simplestyle-js';
+
+registerPosthook(css => postcss([autoprefixer]).process(css, { from: undefined }).css);
+```
 
-There are, currently, **no plans** for creating an SSR-variant of this library, as it would be in-confict of the goal of SimpleStyle, which is to be an easy and lightweight way to use CSS-in-JS.
-If you need SSR rendering in a CSS-in-JS engine, consider using [Emotion](https://emotion.sh/docs/introduction), instead.
+Any future `createStyles`, `rawStyles`, or `keyframes` calls will run through the posthook chain.
 
 ## License
 [MIT](https://en.wikipedia.org/wiki/MIT_License)

package/dist/cjs/createStyles.cjs

@@ -15,8 +15,14 @@ _export(exports, {
     get keyframes () {
         return keyframes;
     },
-    get makeCreateStyle () {
-        return makeCreateStyle;
+    get makeCreateStyles () {
+        return makeCreateStyles;
+    },
+    get makeKeyframes () {
+        return makeKeyframes;
+    },
+    get makeRawStyles () {
+        return makeRawStyles;
     },
     get rawStyles () {
         return rawStyles;
@@ -151,6 +157,13 @@ function rawStyles(ruleId, rules, options) {
     if (coerced.flush) flushSheetContents(ruleId, mergedContents, options);
     return mergedContents;
 }
+function makeRawStyles(registry) {
+    return function wrappedRawStyles(ruleId, rules) {
+        return rawStyles(ruleId, rules, {
+            registry
+        });
+    };
+}
 function keyframes(ruleId, frames, options) {
     const coerced = coerceCreateStylesOptions(options);
     const keyframeName = (0, _generateClassName.generateClassName)(`${ruleId}_keyframes_`);
@@ -162,7 +175,14 @@ function keyframes(ruleId, frames, options) {
         sheetContents
     ];
 }
-function makeCreateStyle(registry) {
+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
@@ -175,9 +195,8 @@ function createStyles(ruleId, rules, options) {
     const mergedContents = `${sheetContents}${mediaQueriesContents}`;
     const replacedSheetContents = replaceBackReferences(out, mergedContents);
     let sheet = null;
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const updateSheet = (updatedRules)=>{
-        if ((options?.flush || options?.registry) && sheet || !options?.flush) {
+        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), {
                 flush: false
@@ -185,6 +204,9 @@ function createStyles(ruleId, rules, options) {
             const updatedMergedContents = `${updatedSheetContents}${updatedMediaQueriesContents}`;
             const updatedReplacedSheetContents = replaceBackReferences(out, updatedMergedContents);
             if (sheet) sheet.innerHTML = updatedReplacedSheetContents;
+            else if (options?.registry) {
+                options.registry.add(ruleId, updatedReplacedSheetContents);
+            }
             return {
                 classes: updatedOut,
                 stylesheet: updatedSheetContents

package/dist/cjs/createStyles.d.ts

@@ -26,12 +26,14 @@ export type CreateStylesOptions = Partial<{
      */
     registry?: SimpleStyleRegistry;
 }>;
-export declare function rawStyles<T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rules: T, options?: Partial<CreateStylesOptions>): string;
+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 makeCreateStyle(registry: SimpleStyleRegistry): <T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rules: T) => {
+export declare function makeKeyframes(registry: SimpleStyleRegistry): <T extends Record<string, Properties>>(ruleId: string, rules: T) => [string, 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, K2 extends keyof T2, O2 extends Record<K2, string>>(updatedRules: Partial<T2>) => {
+    updateSheet: <T2 extends SimpleStyleRules>(updatedRules: Partial<T2>) => {
         classes: Record<string | number | keyof T2, string>;
         stylesheet: string;
     } | null;
@@ -39,7 +41,7 @@ export declare function makeCreateStyle(registry: SimpleStyleRegistry): <T exten
 export default function createStyles<T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rules: T, options?: Partial<CreateStylesOptions>): {
     classes: O;
     stylesheet: string;
-    updateSheet: <T2 extends SimpleStyleRules, K2 extends keyof T2, O2 extends Record<K2, string>>(updatedRules: Partial<T2>) => {
+    updateSheet: <T2 extends SimpleStyleRules>(updatedRules: Partial<T2>) => {
         classes: Record<string | number | keyof T2, string>;
         stylesheet: string;
     } | null;

package/dist/cjs/index.cjs

@@ -15,8 +15,14 @@ _export(exports, {
     get keyframes () {
         return _createStyles.keyframes;
     },
-    get makeCreateStyle () {
-        return _createStyles.makeCreateStyle;
+    get makeCreateStyles () {
+        return _createStyles.makeCreateStyles;
+    },
+    get makeKeyframes () {
+        return _createStyles.makeKeyframes;
+    },
+    get makeRawStyles () {
+        return _createStyles.makeRawStyles;
     },
     get rawStyles () {
         return _createStyles.rawStyles;

package/dist/cjs/index.d.ts

@@ -1,5 +1,5 @@
 export type { CreateStylesArgs, CreateStylesOptions } from './createStyles.js';
-export { default as createStyles, keyframes, makeCreateStyle, rawStyles } from './createStyles.js';
+export { default as createStyles, keyframes, makeCreateStyles, makeKeyframes, makeRawStyles, rawStyles, } from './createStyles.js';
 export { setSeed } from './generateClassName.js';
 export type { PosthookPlugin } from './plugins.js';
 export { registerPosthook } from './plugins.js';

package/dist/cjs/simpleStyleRegistry.cjs

@@ -33,4 +33,16 @@ ${contents}`, '');
         return this.sheets.entries().reduce((prev, [ruleId, contents])=>`${prev}
 <style id="${ruleId}">${contents}</style>`, '');
     }
+    /**
+   * returns an array of tuples, [string, string][]
+   * where the first item in the tuple is the ID for the style rule
+   * and the second item is the actual CSS.
+   * Use this if you need to fully-control how you're rendering
+   * style tags BUT BE SURE TO USE THE ID or else HMR
+   * won't work during local development
+   */ getRulesById() {
+        return [
+            ...this.sheets.entries()
+        ];
+    }
 }

package/dist/cjs/simpleStyleRegistry.d.ts

@@ -16,4 +16,13 @@ export declare class SimpleStyleRegistry {
      * mapped to their internal ruleset IDs
      */
     getHTML(): string;
+    /**
+     * returns an array of tuples, [string, string][]
+     * where the first item in the tuple is the ID for the style rule
+     * and the second item is the actual CSS.
+     * Use this if you need to fully-control how you're rendering
+     * style tags BUT BE SURE TO USE THE ID or else HMR
+     * won't work during local development
+     */
+    getRulesById(): [string, string][];
 }

package/dist/esm/createStyles.d.ts

@@ -26,12 +26,14 @@ export type CreateStylesOptions = Partial<{
      */
     registry?: SimpleStyleRegistry;
 }>;
-export declare function rawStyles<T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rules: T, options?: Partial<CreateStylesOptions>): string;
+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 makeCreateStyle(registry: SimpleStyleRegistry): <T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rules: T) => {
+export declare function makeKeyframes(registry: SimpleStyleRegistry): <T extends Record<string, Properties>>(ruleId: string, rules: T) => [string, 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, K2 extends keyof T2, O2 extends Record<K2, string>>(updatedRules: Partial<T2>) => {
+    updateSheet: <T2 extends SimpleStyleRules>(updatedRules: Partial<T2>) => {
         classes: Record<string | number | keyof T2, string>;
         stylesheet: string;
     } | null;
@@ -39,7 +41,7 @@ export declare function makeCreateStyle(registry: SimpleStyleRegistry): <T exten
 export default function createStyles<T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(ruleId: string, rules: T, options?: Partial<CreateStylesOptions>): {
     classes: O;
     stylesheet: string;
-    updateSheet: <T2 extends SimpleStyleRules, K2 extends keyof T2, O2 extends Record<K2, string>>(updatedRules: Partial<T2>) => {
+    updateSheet: <T2 extends SimpleStyleRules>(updatedRules: Partial<T2>) => {
         classes: Record<string | number | keyof T2, string>;
         stylesheet: string;
     } | null;

package/dist/esm/createStyles.mjs

@@ -115,7 +115,6 @@ function coerceCreateStylesOptions(options) {
         flush: options && typeof options.flush === 'boolean' ? options.flush : true
     };
 }
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function rawStyles(ruleId, rules, options) {
     const coerced = coerceCreateStylesOptions(options);
     const { sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(ruleId, rules, coerced, null, true);
@@ -123,6 +122,13 @@ export function rawStyles(ruleId, rules, options) {
     if (coerced.flush) flushSheetContents(ruleId, mergedContents, options);
     return mergedContents;
 }
+export function makeRawStyles(registry) {
+    return function wrappedRawStyles(ruleId, rules) {
+        return rawStyles(ruleId, rules, {
+            registry
+        });
+    };
+}
 export function keyframes(ruleId, frames, options) {
     const coerced = coerceCreateStylesOptions(options);
     const keyframeName = generateClassName(`${ruleId}_keyframes_`);
@@ -134,7 +140,14 @@ export function keyframes(ruleId, frames, options) {
         sheetContents
     ];
 }
-export function makeCreateStyle(registry) {
+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
@@ -147,9 +160,8 @@ export default function createStyles(ruleId, rules, options) {
     const mergedContents = `${sheetContents}${mediaQueriesContents}`;
     const replacedSheetContents = replaceBackReferences(out, mergedContents);
     let sheet = null;
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const updateSheet = (updatedRules)=>{
-        if ((options?.flush || options?.registry) && sheet || !options?.flush) {
+        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), {
                 flush: false
@@ -157,6 +169,9 @@ export default function createStyles(ruleId, rules, options) {
             const updatedMergedContents = `${updatedSheetContents}${updatedMediaQueriesContents}`;
             const updatedReplacedSheetContents = replaceBackReferences(out, updatedMergedContents);
             if (sheet) sheet.innerHTML = updatedReplacedSheetContents;
+            else if (options?.registry) {
+                options.registry.add(ruleId, updatedReplacedSheetContents);
+            }
             return {
                 classes: updatedOut,
                 stylesheet: updatedSheetContents

package/dist/esm/index.d.ts

@@ -1,5 +1,5 @@
 export type { CreateStylesArgs, CreateStylesOptions } from './createStyles.js';
-export { default as createStyles, keyframes, makeCreateStyle, rawStyles } from './createStyles.js';
+export { default as createStyles, keyframes, makeCreateStyles, makeKeyframes, makeRawStyles, rawStyles, } from './createStyles.js';
 export { setSeed } from './generateClassName.js';
 export type { PosthookPlugin } from './plugins.js';
 export { registerPosthook } from './plugins.js';

package/dist/esm/index.mjs

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

package/dist/esm/simpleStyleRegistry.d.ts

@@ -16,4 +16,13 @@ export declare class SimpleStyleRegistry {
      * mapped to their internal ruleset IDs
      */
     getHTML(): string;
+    /**
+     * returns an array of tuples, [string, string][]
+     * where the first item in the tuple is the ID for the style rule
+     * and the second item is the actual CSS.
+     * Use this if you need to fully-control how you're rendering
+     * style tags BUT BE SURE TO USE THE ID or else HMR
+     * won't work during local development
+     */
+    getRulesById(): [string, string][];
 }

package/dist/esm/simpleStyleRegistry.mjs

@@ -28,4 +28,16 @@ ${contents}`, '');
         return this.sheets.entries().reduce((prev, [ruleId, contents])=>`${prev}
 <style id="${ruleId}">${contents}</style>`, '');
     }
+    /**
+   * returns an array of tuples, [string, string][]
+   * where the first item in the tuple is the ID for the style rule
+   * and the second item is the actual CSS.
+   * Use this if you need to fully-control how you're rendering
+   * style tags BUT BE SURE TO USE THE ID or else HMR
+   * won't work during local development
+   */ getRulesById() {
+        return [
+            ...this.sheets.entries()
+        ];
+    }
 }

package/package.json

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