simplestyle-js 3.4.0 → 3.4.1

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Benjamin Duran
+Copyright (c) 2025 Benjamin Duran
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/cjs/createStyles.cjs

@@ -0,0 +1,191 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get default () {
+        return createStyles;
+    },
+    get keyframes () {
+        return keyframes;
+    },
+    get rawStyles () {
+        return rawStyles;
+    }
+});
+const _deepmerge = /*#__PURE__*/ _interop_require_default(require("deepmerge"));
+const _generateClassName = require("./generateClassName.cjs");
+const _plugins = require("./plugins.cjs");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+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 : (0, _generateClassName.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 (0, _plugins.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
+    };
+}
+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;
+}
+function keyframes(frames, options) {
+    const coerced = coerceCreateStylesOptions(options);
+    const keyframeName = (0, _generateClassName.generateClassName)('keyframes_');
+    const { sheetBuffer: keyframesContents } = execCreateStyles(frames, coerced, null, true);
+    const sheetContents = `@keyframes ${keyframeName}{${keyframesContents}}`;
+    if (coerced.flush) flushSheetContents(sheetContents);
+    return [
+        keyframeName,
+        sheetContents
+    ];
+}
+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 && sheet || !options?.flush) {
+            // We prefer the first set, and then we shallow merge
+            const { classes: updatedOut, sheetBuffer: updatedSheetContents, mediaQueriesBuffer: updatedMediaQueriesContents } = execCreateStyles((0, _deepmerge.default)(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 (coerced.flush) sheet = flushSheetContents(replacedSheetContents, options);
+    // Need this TS cast to get solid code assist from the consumption-side
+    return {
+        classes: out,
+        stylesheet: replacedSheetContents,
+        updateSheet
+    };
+}

package/dist/cjs/createStyles.d.ts

@@ -0,0 +1,30 @@
+import { Properties } from 'csstype';
+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;
+}>;
+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 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/cjs/generateClassName.cjs

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get generateClassName () {
+        return generateClassName;
+    },
+    get getUniqueSuffix () {
+        return getUniqueSuffix;
+    },
+    get setSeed () {
+        return setSeed;
+    }
+});
+const _numToAlpha = /*#__PURE__*/ _interop_require_default(require("./numToAlpha.cjs"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+let inc = Date.now();
+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;
+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 += `${(0, _numToAlpha.default)(Number(first))}${(0, _numToAlpha.default)(Number(second))}`;
+        } else out += (0, _numToAlpha.default)(val);
+    }
+    inc += 1;
+    return out;
+}
+function generateClassName(c) {
+    return `${c}${getUniqueSuffix()}`;
+}

package/dist/cjs/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/cjs/index.cjs

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get createStyles () {
+        return _createStyles.default;
+    },
+    get keyframes () {
+        return _createStyles.keyframes;
+    },
+    get rawStyles () {
+        return _createStyles.rawStyles;
+    },
+    get registerPosthook () {
+        return _plugins.registerPosthook;
+    },
+    get setSeed () {
+        return _generateClassName.setSeed;
+    }
+});
+const _createStyles = /*#__PURE__*/ _interop_require_wildcard(require("./createStyles.cjs"));
+const _generateClassName = require("./generateClassName.cjs");
+const _plugins = require("./plugins.cjs");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}

package/dist/cjs/numToAlpha.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return numToAlpha;
+    }
+});
+const alphas = 'abcdefghijklmnopqrstuvwxyz'.split('');
+function numToAlpha(num) {
+    return String(alphas[num]);
+}

package/dist/cjs/numToAlpha.d.ts

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

package/dist/cjs/package.json

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

package/dist/cjs/plugins.cjs

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get getPosthooks () {
+        return getPosthooks;
+    },
+    get registerPosthook () {
+        return registerPosthook;
+    }
+});
+const posthooks = [];
+function getPosthooks() {
+    return posthooks;
+}
+function registerPosthook(posthook) {
+    posthooks.push(posthook);
+}

package/dist/cjs/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/cjs/react/index.cjs

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./useCreateStyles.cjs"), exports);
+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;
+}

package/dist/cjs/react/useCreateStyles.cjs

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useCreateStyles", {
+    enumerable: true,
+    get: function() {
+        return useCreateStyles;
+    }
+});
+const _react = require("react");
+const _createStyles = /*#__PURE__*/ _interop_require_default(require("../createStyles.cjs"));
+const _index = require("../util/index.cjs");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function useCreateStyles(rules, options) {
+    // cache rules to compare later
+    const [cachedRules, setCachedRules] = (0, _react.useState)(()=>rules);
+    // memoize options but keep them live
+    const cachedOptions = (0, _react.useMemo)(()=>({
+            ...options
+        }), [
+        options
+    ]);
+    const didFirstWriteRef = (0, _react.useRef)(false);
+    const styleTagRef = (0, _react.useRef)(typeof document === 'undefined' ? null : document.createElement('style'));
+    // initialize styles
+    const [styleState, setStyleState] = (0, _react.useState)(()=>(0, _createStyles.default)(rules, {
+            ...cachedOptions,
+            flush: false
+        }));
+    const { classes, stylesheet, updateSheet } = styleState;
+    // mount/unmount style tag
+    (0, _react.useEffect)(()=>{
+        if (!styleTagRef.current) return;
+        const { current: s } = styleTagRef;
+        document.head.append(s);
+        return ()=>{
+            s.remove();
+        };
+    }, []);
+    // update stylesheet when rules change
+    (0, _react.useEffect)(()=>{
+        if (!styleTagRef.current) return;
+        if (!didFirstWriteRef.current) {
+            didFirstWriteRef.current = true;
+            styleTagRef.current.innerHTML = stylesheet;
+            return;
+        }
+        if (!(0, _index.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/cjs/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/cjs/types.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/{src/types.ts → dist/cjs/types.d.ts}

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

package/dist/cjs/util/deepEqual.cjs

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "deepEqual", {
+    enumerable: true,
+    get: function() {
+        return deepEqual;
+    }
+});
+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/cjs/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/cjs/util/index.cjs

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./deepEqual.cjs"), exports);
+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;
+}

package/dist/esm/createStyles.d.ts

@@ -0,0 +1,30 @@
+import { Properties } from 'csstype';
+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;
+}>;
+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 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>;