nanostyled/index.umd.js

Style React components as if with CSS-in-JS, without CSS-in-JS

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
  typeof define === 'function' && define.amd ? define(['react'], factory) :
  (global = global || self, global.nanostyled = factory(global.React));
}(this, function (React) { 'use strict';

  React = React && React.hasOwnProperty('default') ? React['default'] : React;

  // wrap nanostyled in a factory that can accept any React-compatible
  // +createElement+ function. Works with React, Preact, Inferno, etc
  function factory(createElement) {
    return function nanostyled(tag, styleProps) {
      var Component = function(props) {
        var separatedProps = Object.keys(styleProps).reduce(
          function(memo, key) {
            var style = props[key] === undefined ? styleProps[key] : props[key];
            if (style) memo.styles.push(style);
            delete memo.notStyles[key];
            return memo;
          },
          {
            styles: [props.className].filter(Boolean),
            notStyles: assign({}, props),
          }
        );

        var passedProps = assign(separatedProps.notStyles, {
          className: separatedProps.styles.join(' '),
          as: undefined,
        });

        return createElement(props.as || tag, passedProps);
      };

      Component.displayName = 'nanostyled-'.concat(tag);
      return Component;
    };
  }

  // borrow IE-compatible Object.assign from @developit/preact
  function assign(obj, props) {
    for (var i in props) obj[i] = props[i];
    return obj;
  }

  var nanostyled = factory(React.createElement);

  return nanostyled;

}));