astroturf/runtime/styled.js

"use strict";

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var React = require('react'); // eslint-disable-line import/no-extraneous-dependencies
// eslint-disable-next-line no-control-regex


var reWords = /[A-Z\xc0-\xd6\xd8-\xde]?[a-z\xdf-\xf6\xf8-\xff]+(?:['’](?:d|ll|m|re|s|t|ve))?(?=[\xac\xb1\xd7\xf7\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\xbf\u2000-\u206f \t\x0b\f\xa0\ufeff\n\r\u2028\u2029\u1680\u180e\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000]|[A-Z\xc0-\xd6\xd8-\xde]|$)|(?:[A-Z\xc0-\xd6\xd8-\xde]|[^\ud800-\udfff\xac\xb1\xd7\xf7\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\xbf\u2000-\u206f \t\x0b\f\xa0\ufeff\n\r\u2028\u2029\u1680\u180e\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\d+\u2700-\u27bfa-z\xdf-\xf6\xf8-\xffA-Z\xc0-\xd6\xd8-\xde])+(?:['’](?:D|LL|M|RE|S|T|VE))?(?=[\xac\xb1\xd7\xf7\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\xbf\u2000-\u206f \t\x0b\f\xa0\ufeff\n\r\u2028\u2029\u1680\u180e\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000]|[A-Z\xc0-\xd6\xd8-\xde](?:[a-z\xdf-\xf6\xf8-\xff]|[^\ud800-\udfff\xac\xb1\xd7\xf7\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\xbf\u2000-\u206f \t\x0b\f\xa0\ufeff\n\r\u2028\u2029\u1680\u180e\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\d+\u2700-\u27bfa-z\xdf-\xf6\xf8-\xffA-Z\xc0-\xd6\xd8-\xde])|$)|[A-Z\xc0-\xd6\xd8-\xde]?(?:[a-z\xdf-\xf6\xf8-\xff]|[^\ud800-\udfff\xac\xb1\xd7\xf7\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\xbf\u2000-\u206f \t\x0b\f\xa0\ufeff\n\r\u2028\u2029\u1680\u180e\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\d+\u2700-\u27bfa-z\xdf-\xf6\xf8-\xffA-Z\xc0-\xd6\xd8-\xde])+(?:['’](?:d|ll|m|re|s|t|ve))?|[A-Z\xc0-\xd6\xd8-\xde]+(?:['’](?:D|LL|M|RE|S|T|VE))?|\d*(?:1ST|2ND|3RD|(?![123])\dTH)(?=\b|[a-z_])|\d*(?:1st|2nd|3rd|(?![123])\dth)(?=\b|[A-Z_])|\d+|(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe2f\u20d0-\u20ff]|\ud83c[\udffb-\udfff])?(?:\u200d(?:[^\ud800-\udfff]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe2f\u20d0-\u20ff]|\ud83c[\udffb-\udfff])?)*/g;

var camelCase = function camelCase(str) {
  return (str.match(reWords) || []).reduce(function (acc, next) {
    return acc + (!acc ? next : next[0].toUpperCase() + next.slice(1));
  }, '');
};

function varsToStyles(props, vars) {
  if (!vars || !vars.length) return props.style;

  var style = _extends({}, props.style);

  vars.forEach(function (_ref) {
    var id = _ref[0],
        value = _ref[1],
        _ref$ = _ref[2],
        unit = _ref$ === void 0 ? '' : _ref$;
    var result = typeof value === 'function' ? value(props) : value;
    style["--" + id] = "" + result + unit;
  });
  return style;
}

function propsToStyles(props, styles, hasModifiers) {
  var componentClassName = styles.cls2 || styles.cls1;
  var className = props.className ? props.className + " " + componentClassName : componentClassName;

  if (hasModifiers) {
    Object.keys(props).forEach(function (propName) {
      var propValue = props[propName];
      var typeOf = typeof propValue;

      if (typeOf === 'boolean' || propValue == null) {
        if (styles[propName]) {
          if (propValue) {
            className += " " + styles[propName];
          }

          delete props[propName];
        } else {
          var camelPropName = camelCase(propName);

          if (styles[camelPropName]) {
            if (propValue) {
              className += " " + styles[camelPropName];
            }

            delete props[propName];
          }
        }
      } else if (typeOf === 'string' || typeOf === 'number') {
        var propKey = propName + "-" + propValue;

        if (styles[propKey]) {
          className += " " + styles[propKey];
          delete props[propName];
        } else {
          var camelPropKey = camelCase(propKey);

          if (styles[camelPropKey]) {
            className += " " + styles[camelPropKey];
            delete props[propName];
          }
        }
      }
    });
  }

  return className;
}

function styled(type, options, settings) {
  if (process.env.NODE_ENV !== "production") {
    if (Array.isArray(type)) throw new Error('This styled() template tag was mistakenly evaluated at runtime. ' + 'Make sure astroturf is properly configured to compile this file');
    if (typeof settings === 'string') throw new Error('It looks like you have incompatible astroturf versions in your app. ' + 'This runtime expects styles compiled with a newer version of astroturf, ' + 'ensure that your versions are properly deduped and upgraded. ');
  }

  var displayName = settings.displayName,
      attrs = settings.attrs,
      vars = settings.vars,
      styles = settings.styles;
  options = options || {
    allowAs: typeof type === 'string'
  }; // always passthrough if the type is a styled component

  var allowAs = type.isAstroturf ? false : options.allowAs;
  var hasModifiers = Object.keys(styles).some(function (className) {
    return className !== (styles.cls2 || styles.cls1);
  });

  function Styled(rawProps, ref) {
    var props = attrs ? attrs(rawProps) : rawProps;

    var childProps = _extends({}, props, {
      ref: ref
    });

    if (allowAs) delete childProps.as;
    childProps.style = varsToStyles(childProps, vars);
    childProps.className = propsToStyles(childProps, styles, hasModifiers);
    return React.createElement(allowAs && props.as ? props.as : type, childProps);
  }

  var decorated = React.forwardRef ? React.forwardRef(Styled) : function (props) {
    return Styled(props, null);
  };
  decorated.displayName = displayName;

  decorated.withComponent = function (nextType) {
    return styled(nextType, options, settings);
  };

  decorated.isAstroturf = true;
  return decorated;
}

function jsx(type, props) {
  if (props && props.css) {
    var _props = props,
        css = _props.css,
        childProps = _objectWithoutPropertiesLoose(_props, ["css"]);

    childProps.style = varsToStyles(childProps, css[1]);
    childProps.className = propsToStyles(childProps, css[0] || css, true);
    props = childProps;
  }

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

  return React.createElement.apply(React, [type, props].concat(children));
}

module.exports = styled;
module.exports.styled = styled;
module.exports.jsx = jsx;
module.exports.F = React.Fragment;

if (process.env.NODE_ENV !== "production") {
  module.exports.css = function () {
    throw new Error('css template literal evaluated at runtime. ' + 'Make sure astroturf is properly configured to compile this file');
  };
}