@bianic-ui/system/dist/esm/jsx.js

Bianic UI system primitives

import { runIfFn } from "@bianic-ui/utils";
import { jsx as emotion } from "@emotion/core";
import { css } from "@bianic-ui/styled-system";

function getCSS(props) {
  if (!props.sx && !props.css) return undefined;
  /**
   * Leverage emotion's css function interpolation to access the theme
   */

  return theme => {
    /**
     * process the theme-aware cx prop
     */
    var sxStyles = css(props.sx)(theme);
    /**
     * process the normal emotion's css prop
     * (NB: This is not theme-aware, and you can't use shorthand style props)
     */

    var cssStyles = runIfFn(props.css, theme);
    /**
     * return an array value and allow emotion do the rest.
     * By default, emotion can handle array style values
     */

    return [cssStyles, sxStyles];
  };
}

function parse(props) {
  if (!props) return null;
  var computedProps = {};

  for (var prop in props) {
    if (prop === "sx") continue;
    computedProps[prop] = props[prop];
  }

  var css = getCSS(props);
  if (css) computedProps.css = css;
  return computedProps;
}

export var jsx = function jsx(type, props) {
  for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
    children[_key - 2] = arguments[_key];
  }

  return emotion.apply(undefined, [type, parse(props), ...children]);
};
export default jsx;
//# sourceMappingURL=jsx.js.map