styletron-vue/dist/styletron-vue.es.js

Vue bindings for styletron.

/*!
 * styletron-vue v0.4.1
 * (c) 2017-present egoist <0x142857@gmail.com>
 * Released under the MIT License.
 */
import { injectStylePrefixed } from 'styletron-utils';
import assign from 'nano-assign';

function plugin (Vue) {
  Vue.mixin({
    beforeCreate: function beforeCreate() {
      this.$styletron = this.$options.styletron || this.$parent && this.$parent.$options.styletron;
    }
  });
}

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
  return typeof obj;
} : function (obj) {
  return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};



















var defineProperty = function (obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
};

var STYLETRON_KEY = '__STYLETRON';

function array2obj(source) {
  if (Array.isArray(source)) {
    return source.reduce(function (res, key) {
      res[key] = null;
      return res;
    }, {});
  }

  return source;
}

function createComponent(tag, stylesArray, props) {
  var _Component;

  var Component = (_Component = {
    props: props,
    functional: true
  }, defineProperty(_Component, STYLETRON_KEY, {
    tag: tag,
    styles: stylesArray
  }), defineProperty(_Component, 'inject', {
    theme: {
      default: null
    },
    styletron: {
      default: null
    }
  }), defineProperty(_Component, 'render', function render(h, ctx) {
    var resolvedStyle = {};

    for (var i = 0; i < Component[STYLETRON_KEY].styles.length; i++) {
      var style = Component[STYLETRON_KEY].styles[i];
      if (typeof style === 'function') {
        assign(resolvedStyle, style(ctx.props, ctx));
      } else if ((typeof style === 'undefined' ? 'undefined' : _typeof(style)) === 'object') {
        assign(resolvedStyle, style);
      }
    }

    var styletron = ctx.parent.$styletron || ctx.injections.styletron;

    if (process.env.NODE_ENV === 'development' && !styletron) {
      throw new Error('[styletron-vue] You need to bind styletron instance first!');
    }

    var styletronClassName = injectStylePrefixed(styletron, resolvedStyle);

    var className = [ctx.data.class, styletronClassName];

    return h(tag, assign({}, ctx.data, { class: className, props: ctx.props }), ctx.children);
  }), _Component);

  return Component;
}

function styled(base, styleArg, props) {
  var inheritProps = (typeof base === 'undefined' ? 'undefined' : _typeof(base)) === 'object' ? array2obj(base.props) : null;
  var finalProps = assign({}, inheritProps, array2obj(props));

  if ((typeof base === 'undefined' ? 'undefined' : _typeof(base)) === 'object' && base[STYLETRON_KEY]) {
    var _base$STYLETRON_KEY = base[STYLETRON_KEY],
        tag = _base$STYLETRON_KEY.tag,
        styles = _base$STYLETRON_KEY.styles;

    return createComponent(tag, styles.concat(styleArg), finalProps);
  } else if (typeof base === 'string' || (typeof base === 'undefined' ? 'undefined' : _typeof(base)) === 'object') {
    return createComponent(base, [styleArg], finalProps);
  }

  if (process.env.NODE_ENV !== 'production') {
    throw new Error('`styled` takes either a DOM element name or a component');
  }
}

export { styled };
export default plugin;