simplestyle-js 3.4.0 → 3.4.2-alpha.0

package/dist/esm/createStyles.d.ts

@@ -0,0 +1,47 @@
+import { Properties } from 'csstype';
+import { SimpleStyleRegistry } from './simpleStyleRegistry.js';
+import { SimpleStyleRules } from './types.js';
+export type CreateStylesOptions = Partial<{
+    /**
+     * If true, automatically renders generated styles
+     * to the DOM in an injected <style /> tag
+     */
+    flush: boolean;
+    /**
+     * If set, along with flush: true,
+     * will render the injected <style /> after this element
+     */
+    insertAfter?: HTMLElement;
+    /**
+     * If set, along with flush: true,
+     * will render the injects <style /> before this element
+     */
+    insertBefore?: HTMLElement;
+    /**
+     * if set, will automatically prevent any styles from
+     * being flushed to the DOM or inserted at all.
+     * All styles will be accumulated in the registry
+     * and it will be up to you to determine how they should
+     * be flushed.
+     */
+    registry?: SimpleStyleRegistry;
+}>;
+export declare function rawStyles<T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(rules: T, options?: Partial<CreateStylesOptions>): string;
+export declare function keyframes<T extends Record<string, Properties>>(frames: T, options?: CreateStylesOptions): [string, string];
+export declare function makeCreateStyle(registry: SimpleStyleRegistry): <T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(rules: T) => {
+    classes: O;
+    stylesheet: string;
+    updateSheet: <T2 extends SimpleStyleRules, K2 extends keyof T2, O2 extends Record<K2, string>>(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>>(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>) => {
+        classes: Record<string | number | keyof T2, string>;
+        stylesheet: string;
+    } | null;
+};
+export type CreateStylesArgs = Parameters<typeof createStyles>;

package/dist/esm/createStyles.mjs

@@ -0,0 +1,174 @@
+import merge from 'deepmerge';
+import { generateClassName } from './generateClassName.mjs';
+import { getPosthooks } from './plugins.mjs';
+function isNestedSelector(r) {
+    return /&/g.test(r);
+}
+function isMedia(r) {
+    return r.toLowerCase().startsWith('@media');
+}
+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)};`, '');
+}
+function execCreateStyles(rules, options, parentSelector, noGenerateClassName = false) {
+    const out = {};
+    let sheetBuffer = '';
+    let mediaQueriesBuffer = '';
+    const styleEntries = Object.entries(rules);
+    let ruleWriteOpen = false;
+    const guardCloseRuleWrite = ()=>{
+        if (ruleWriteOpen) sheetBuffer += '}';
+        ruleWriteOpen = false;
+    };
+    for (const [classNameOrCSSRule, classNameRules] of styleEntries){
+        // if the classNameRules is a string, we are dealing with a display: none; type rule
+        if (isMedia(classNameOrCSSRule)) {
+            if (typeof classNameRules !== 'object') throw new Error('Unable to map @media query because rules / props are an invalid type');
+            guardCloseRuleWrite();
+            mediaQueriesBuffer += `${classNameOrCSSRule}{`;
+            const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(classNameRules, options, parentSelector);
+            mediaQueriesBuffer += regularOutput;
+            mediaQueriesBuffer += '}';
+            mediaQueriesBuffer += mediaQueriesOutput;
+        } else if (isNestedSelector(classNameOrCSSRule)) {
+            if (!parentSelector) throw new Error('Unable to generate nested rule because parentSelector is missing');
+            guardCloseRuleWrite();
+            // format of { '& > span': { display: 'none' } } (or further nesting)
+            const replaced = classNameOrCSSRule.replaceAll('&', parentSelector);
+            for (const selector of replaced.split(/,\s*/)){
+                const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(classNameRules, options, selector);
+                sheetBuffer += regularOutput;
+                mediaQueriesBuffer += mediaQueriesOutput;
+            }
+        } else if (!parentSelector && typeof classNameRules === 'object') {
+            guardCloseRuleWrite();
+            const generated = noGenerateClassName ? classNameOrCSSRule : generateClassName(classNameOrCSSRule);
+            // @ts-expect-error - yes, we can index this object here, so be quiet
+            out[classNameOrCSSRule] = generated;
+            const generatedSelector = `${noGenerateClassName ? '' : '.'}${generated}`;
+            const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(classNameRules, options, generatedSelector);
+            sheetBuffer += regularOutput;
+            mediaQueriesBuffer += mediaQueriesOutput;
+        } else {
+            if (!parentSelector) throw new Error('Unable to write css props because parent selector is null');
+            if (ruleWriteOpen) {
+                sheetBuffer += formatCSSRules({
+                    [classNameOrCSSRule]: classNameRules
+                });
+            } else {
+                sheetBuffer += `${parentSelector}{${formatCSSRules({
+                    [classNameOrCSSRule]: classNameRules
+                })}`;
+                ruleWriteOpen = true;
+            }
+        }
+    }
+    guardCloseRuleWrite();
+    return {
+        classes: out,
+        sheetBuffer,
+        mediaQueriesBuffer
+    };
+}
+function replaceBackReferences(out, sheetContents) {
+    let outputSheetContents = sheetContents;
+    const toReplace = [];
+    const toReplaceRegex = /\$\w([a-zA-Z0-9_-]+)?/gm;
+    let matches = toReplaceRegex.exec(outputSheetContents);
+    while(matches){
+        toReplace.push(matches[0].valueOf());
+        matches = toReplaceRegex.exec(outputSheetContents);
+    }
+    for (const r of toReplace){
+        outputSheetContents = outputSheetContents.replace(r, `.${out[r.slice(1)] ?? ''}`);
+    }
+    return getPosthooks().reduce((prev, hook)=>hook(prev), outputSheetContents);
+}
+function createSheet(sheetContents) {
+    const doc = globalThis.document;
+    if (doc === undefined) return null;
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    if (typeof doc?.head?.appendChild !== 'function' || typeof doc.createElement !== 'function') return null;
+    const styleTag = doc.createElement('style');
+    styleTag.innerHTML = sheetContents;
+    return styleTag;
+}
+function flushSheetContents(sheetContents, options) {
+    // In case we're in come weird test environment that doesn't support JSDom
+    const styleTag = createSheet(sheetContents);
+    if (styleTag) {
+        if (options?.insertAfter && options.insertBefore) {
+            throw new Error('Both insertAfter and insertBefore were provided. Please choose only one.');
+        }
+        if (options?.insertAfter?.after) options.insertAfter.after(styleTag);
+        else if (options?.insertBefore?.before) options.insertBefore.before(styleTag);
+        else document.head.append(styleTag);
+    }
+    return styleTag;
+}
+function coerceCreateStylesOptions(options) {
+    return {
+        flush: options && typeof options.flush === 'boolean' ? options.flush : true
+    };
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function rawStyles(rules, options) {
+    const coerced = coerceCreateStylesOptions(options);
+    const { sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(rules, coerced, null, true);
+    const mergedContents = `${sheetContents}${mediaQueriesContents}`;
+    if (coerced.flush) flushSheetContents(mergedContents, options);
+    return mergedContents;
+}
+export function keyframes(frames, options) {
+    const coerced = coerceCreateStylesOptions(options);
+    const keyframeName = generateClassName('keyframes_');
+    const { sheetBuffer: keyframesContents } = execCreateStyles(frames, coerced, null, true);
+    const sheetContents = `@keyframes ${keyframeName}{${keyframesContents}}`;
+    if (coerced.flush) flushSheetContents(sheetContents);
+    return [
+        keyframeName,
+        sheetContents
+    ];
+}
+export function makeCreateStyle(registry) {
+    return function wrappedCreateStyles(rules) {
+        return createStyles(rules, {
+            registry
+        });
+    };
+}
+export default function createStyles(rules, options) {
+    const coerced = coerceCreateStylesOptions(options);
+    const { classes: out, sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(rules, coerced, null);
+    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) {
+            // We prefer the first set, and then we shallow merge
+            const { classes: updatedOut, sheetBuffer: updatedSheetContents, mediaQueriesBuffer: updatedMediaQueriesContents } = execCreateStyles(merge(rules, updatedRules), {
+                flush: false
+            }, null);
+            const updatedMergedContents = `${updatedSheetContents}${updatedMediaQueriesContents}`;
+            const updatedReplacedSheetContents = replaceBackReferences(out, updatedMergedContents);
+            if (sheet) sheet.innerHTML = updatedReplacedSheetContents;
+            return {
+                classes: updatedOut,
+                stylesheet: updatedSheetContents
+            };
+        }
+        return null;
+    };
+    if (!options?.registry && coerced.flush) sheet = flushSheetContents(replacedSheetContents, options);
+    else if (options?.registry) options.registry.add(replacedSheetContents);
+    // Need this TS cast to get solid code assist from the consumption-side
+    return {
+        classes: out,
+        stylesheet: replacedSheetContents,
+        updateSheet
+    };
+}

package/dist/esm/generateClassName.d.ts

@@ -0,0 +1,3 @@
+export declare function setSeed(seed: number | null): void;
+export declare function getUniqueSuffix(): string;
+export declare function generateClassName(c: string): string;

package/dist/esm/generateClassName.mjs

@@ -0,0 +1,36 @@
+import numToAlpha from './numToAlpha.mjs';
+let inc = Date.now();
+export function setSeed(seed) {
+    if (seed === null) {
+        inc = Date.now();
+        return;
+    }
+    if (typeof seed !== 'number') throw new Error('Unable to setSeed as provided seed was not a valid number');
+    if (seed === Number.MAX_SAFE_INTEGER) throw new Error('Unable to setSeed because the seed was already the maximum safe JavaScript number allowed');
+    if (seed === Number.POSITIVE_INFINITY || seed === Number.NEGATIVE_INFINITY) throw new Error('Unable to setSeed. Positive or negative infinity is not allowed');
+    if (seed < 0) throw new Error('Unable to setSeed. Seed must be a number >= 0');
+    inc = seed;
+}
+const numPairsRegex = /(\d{1,2})/g;
+export function getUniqueSuffix() {
+    const numPairs = [];
+    const incStr = inc.toString();
+    let result = numPairsRegex.exec(incStr);
+    while(result){
+        numPairs.push(result[0]);
+        result = numPairsRegex.exec(incStr);
+    }
+    let out = '_';
+    for (const pair of numPairs){
+        const val = +pair;
+        if (val > 25) {
+            const [first, second] = pair.split('');
+            out += `${numToAlpha(Number(first))}${numToAlpha(Number(second))}`;
+        } else out += numToAlpha(val);
+    }
+    inc += 1;
+    return out;
+}
+export function generateClassName(c) {
+    return `${c}${getUniqueSuffix()}`;
+}

package/dist/esm/index.d.ts

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

package/dist/esm/index.mjs

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

package/dist/esm/numToAlpha.d.ts

@@ -0,0 +1 @@
+export default function numToAlpha(num: number): string;

package/dist/esm/numToAlpha.mjs

@@ -0,0 +1,4 @@
+const alphas = 'abcdefghijklmnopqrstuvwxyz'.split('');
+export default function numToAlpha(num) {
+    return String(alphas[num]);
+}

package/dist/esm/package.json

@@ -0,0 +1 @@
+{ "type": "module" }

package/dist/esm/plugins.d.ts

@@ -0,0 +1,3 @@
+export type PosthookPlugin = (sheetContents: string) => string;
+export declare function getPosthooks(): PosthookPlugin[];
+export declare function registerPosthook(posthook: PosthookPlugin): void;

package/dist/esm/plugins.mjs

@@ -0,0 +1,7 @@
+const posthooks = [];
+export function getPosthooks() {
+    return posthooks;
+}
+export function registerPosthook(posthook) {
+    posthooks.push(posthook);
+}

package/dist/esm/react/index.d.ts

@@ -0,0 +1 @@
+export * from './useCreateStyles.js';

package/dist/esm/react/index.mjs

@@ -0,0 +1 @@
+export * from './useCreateStyles.mjs';

package/dist/esm/react/useCreateStyles.d.ts

@@ -0,0 +1,3 @@
+import { CreateStylesOptions } from '../createStyles.js';
+import { SimpleStyleRules } from '../types.js';
+export declare function useCreateStyles<T extends SimpleStyleRules, K extends keyof T, O extends Record<K, string>>(rules: T, options?: Partial<Omit<CreateStylesOptions, 'flush'>>): O;

package/dist/esm/react/useCreateStyles.mjs

@@ -0,0 +1,58 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import createStyles from '../createStyles.mjs';
+import { deepEqual } from '../util/index.mjs';
+export function useCreateStyles(rules, options) {
+    // cache rules to compare later
+    const [cachedRules, setCachedRules] = useState(()=>rules);
+    // memoize options but keep them live
+    const cachedOptions = useMemo(()=>({
+            ...options
+        }), [
+        options
+    ]);
+    const didFirstWriteRef = useRef(false);
+    const styleTagRef = useRef(typeof document === 'undefined' ? null : document.createElement('style'));
+    // initialize styles
+    const [styleState, setStyleState] = useState(()=>createStyles(rules, {
+            ...cachedOptions,
+            flush: false
+        }));
+    const { classes, stylesheet, updateSheet } = styleState;
+    // mount/unmount style tag
+    useEffect(()=>{
+        if (!styleTagRef.current) return;
+        const { current: s } = styleTagRef;
+        document.head.append(s);
+        return ()=>{
+            s.remove();
+        };
+    }, []);
+    // update stylesheet when rules change
+    useEffect(()=>{
+        if (!styleTagRef.current) return;
+        if (!didFirstWriteRef.current) {
+            didFirstWriteRef.current = true;
+            styleTagRef.current.innerHTML = stylesheet;
+            return;
+        }
+        if (!deepEqual(rules, cachedRules)) {
+            setCachedRules(rules);
+            const updated = updateSheet(rules);
+            if (updated) {
+                styleTagRef.current.innerHTML = updated.stylesheet;
+                // use the fresh updateSheet from updated
+                // @ts-expect-error - this cast is safe and is only for us, internally, anyways
+                setStyleState({
+                    ...updated,
+                    updateSheet
+                });
+            }
+        }
+    }, [
+        cachedRules,
+        rules,
+        stylesheet,
+        updateSheet
+    ]); // only depend on rules + updater
+    return classes;
+}

package/dist/esm/simpleStyleRegistry.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Acts as an accumulator for all
+ * generated css that occurs via createStyles().
+ *
+ * React variant of this will come after the baseline one is created
+ */
+export declare class SimpleStyleRegistry {
+    private sheets;
+    add(contents: string): void;
+    getCSS(): string;
+}

package/dist/esm/simpleStyleRegistry.mjs

@@ -0,0 +1,15 @@
+/**
+ * Acts as an accumulator for all
+ * generated css that occurs via createStyles().
+ *
+ * React variant of this will come after the baseline one is created
+ */ export class SimpleStyleRegistry {
+    sheets = [];
+    add(contents) {
+        this.sheets.push(contents);
+    }
+    getCSS() {
+        return this.sheets.reduce((prev, contents)=>`${prev}
+${contents}`, '');
+    }
+}

package/dist/esm/types.d.ts

@@ -0,0 +1,5 @@
+import { Properties } from 'csstype';
+export type SimpleStyleRules = {
+    [key: string]: Properties | SimpleStyleRules;
+};
+export type RenderableSimpleStyleRules = SimpleStyleRules & Record<string, Properties[]>;

package/dist/esm/types.mjs

@@ -0,0 +1 @@
+export { };

package/dist/esm/util/deepEqual.d.ts

@@ -0,0 +1 @@
+export declare function deepEqual<O1 extends Record<string | number | symbol, any>, O2 extends Record<string | number | symbol, any>>(o1: O1, o2: O2): boolean;

package/dist/esm/util/deepEqual.mjs

@@ -0,0 +1,17 @@
+export function deepEqual(o1, o2) {
+    // We'll sort the keys, just in case the user kept things the same but the object is all wonky, order-wise
+    const o1Keys = Object.keys(o1).sort();
+    const o2Keys = Object.keys(o2).sort();
+    if (o1Keys.length !== o2Keys.length) return false;
+    if (o1Keys.some((key, i)=>o2Keys[i] !== key)) return false;
+    // Okay, the keys SHOULD be the same
+    // so we need to test their values, recursively, to verify equality
+    return o1Keys.reduce((prev, key)=>{
+        if (!prev) return prev; // we've already failed equality checks here
+        if (!(key in o2)) return false;
+        if (typeof o1[key] !== 'object') {
+            return o1[key] === o2[key];
+        }
+        return deepEqual(o1[key], o2[key]);
+    }, true);
+}

package/dist/esm/util/index.d.ts

@@ -0,0 +1 @@
+export * from './deepEqual.js';

package/dist/esm/util/index.mjs

@@ -0,0 +1 @@
+export * from './deepEqual.mjs';

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "simplestyle-js",
-  "version": "3.4.0",
+  "version": "3.4.2-alpha.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": {
     "type": "git",
     "url": "git+https://github.com/benduran/simplestyle.git"
   },
+  "files": [
+    "dist/**"
+  ],
   "scripts": {
     "build": "bun run clean && bun run build:package",
     "build:package": "ts-duality --clean",
@@ -126,6 +129,16 @@
         "default": "./dist/esm/react/useCreateStyles.mjs"
       }
     },
+    "./simpleStyleRegistry": {
+      "require": {
+        "types": "./dist/cjs/simpleStyleRegistry.d.ts",
+        "default": "./dist/cjs/simpleStyleRegistry.cjs"
+      },
+      "import": {
+        "types": "./dist/esm/simpleStyleRegistry.d.ts",
+        "default": "./dist/esm/simpleStyleRegistry.mjs"
+      }
+    },
     "./types": {
       "require": {
         "types": "./dist/cjs/types.d.ts",

package/.coveralls.yml

@@ -1,2 +0,0 @@
-
-repo_token: uY6uUzkf19sVsimk8VD7MbdoaBexQiuCJ

package/.editorconfig

@@ -1,7 +0,0 @@
-[*]
-root = true
-charset = utf-8
-end_of_line = lf
-indent_size = 2
-indent_style = space
-insert_final_newline = true

package/.prettierrc

@@ -1,7 +0,0 @@
-{
-  "endOfLine": "lf",
-  "printWidth": 180,
-  "semi": true,
-  "trailingComma": "all",
-  "singleQuote": true
-}

package/.tool-versions

@@ -1,3 +0,0 @@
-bun 1.3.3
-node 22.21.0
-npm 11.6.2

package/.travis.yml

@@ -1,8 +0,0 @@
-language: node_js
-node_js:
-  - 20
-script:
-  - npm i -g bun@1.3.3
-  - bun run ci
-  - bun run test
-  - bun run coveralls

package/.vscode/launch.json

@@ -1,36 +0,0 @@
-{
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-  {
-    "name": "Attach",
-    "port": 9229,
-    "request": "attach",
-    "skipFiles": [
-      "<node_internals>/**"
-    ],
-    "type": "pwa-node"
-  },
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "Jest Current File",
-      "program": "${workspaceFolder}/node_modules/.bin/jest",
-      "args": [
-        "${fileBasenameNoExtension}",
-        "--config",
-        "jest.config.js",
-        "--env",
-        "jsdom"
-      ],
-      "console": "integratedTerminal",
-      "internalConsoleOptions": "neverOpen",
-      "disableOptimisticBPs": true,
-      "windows": {
-        "program": "${workspaceFolder}/node_modules/jest/bin/jest",
-      }
-    }
-  ]
-}

package/.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-  "editor.formatOnSave": false
-}