@dyst/react/dist/esm/StyleSheet.js

Dynamic Css-in-Js styles engine, based on Emotion for React

import React from 'react';
import { CssFactory } from './css/CssFactory.js';
import { useGuaranteedMemo } from './hooks/useGuaranteedMemo.js';
import createCache from '@emotion/cache';
import { CacheContext } from './cache/CacheProvider.js';

var __defProp = Object.defineProperty;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
class StyleSheet {
  constructor(config = {}) {
    var _a;
    this.key = (_a = config.key) != null ? _a : "dyst";
    this.useTheme = typeof config.theme !== "function" ? () => config.theme || {} : config.theme;
    this.cache = createCache(__spreadValues({
      key: this.key,
      prepend: true
    }, (config == null ? void 0 : config.cache) || {}));
  }
  withParams() {
    return {
      create: (styles) => this.createStyles(true, styles)
    };
  }
  withoutParams() {
    return {
      create: (styles) => this.createStyles(false, styles)
    };
  }
  create(styles) {
    return this.createStyles(true, styles);
  }
  createStyles(withParams, styles) {
    const getStyles = typeof styles === "function" ? styles : () => styles;
    return (paramsOrConfig = {}, config = {}) => {
      var _a, _b;
      const _config = withParams ? config : paramsOrConfig;
      const _params = withParams ? paramsOrConfig : void 0;
      const expandedStyles = (_a = _config.styles) != null ? _a : {};
      const classNames = (_b = _config.classNames) != null ? _b : {};
      const name = _config.name;
      const theme = this.useTheme();
      const { css, cx } = this.useCss();
      let count = 0;
      const createRef = (refName) => {
        count += 1;
        return `${this.key}-ref_${refName != null ? refName : "unknown"}_${count}`;
      };
      const assignRef = (refName, style) => {
        return cx(refName, css(style));
      };
      const getStylesConfig = withParams ? { theme, params: _params, createRef, assignRef } : { theme, createRef, assignRef };
      const _styles = getStyles(getStylesConfig);
      const _expandedStyles = typeof expandedStyles === "function" ? expandedStyles(theme) : expandedStyles;
      return React.useMemo(() => {
        const classes = {};
        for (const key of Object.keys(_styles)) {
          classes[key] = typeof _styles[key] !== "string" ? css(_styles[key]) : _styles[key];
        }
        const expandedClasses = {};
        for (const key of Object.keys(_expandedStyles)) {
          expandedClasses[key] = cx(typeof _expandedStyles[key] !== "string" ? css(_expandedStyles[key]) : _expandedStyles[key], classNames);
        }
        return {
          classes: this.mergeClassNames(classes, expandedClasses, cx, name),
          cx,
          theme
        };
      }, [_styles, _expandedStyles, classNames, name]);
    };
  }
  useCss() {
    const cache = this.useCache();
    const cssFactory = new CssFactory(this.key);
    return useGuaranteedMemo(() => cssFactory.build(cache), [cache]);
  }
  useCache() {
    const cache = React.useContext(CacheContext);
    return cache != null ? cache : this.cache;
  }
  mergeClassNames(classNames, expandingClassNames, cx, name) {
    const mergedClasses = {};
    for (const classKey of Object.keys(classNames)) {
      const toMergeClassName = expandingClassNames[classKey];
      mergedClasses[classKey] = cx(classNames[classKey], toMergeClassName || null, name ? `${this.key}-${name}-${classKey}` : null);
    }
    return mergedClasses;
  }
}

export { StyleSheet };