diff --git a/.gitignore b/.gitignore index 06dc7cdef..25290d0fb 100644 --- a/.gitignore +++ b/.gitignore @@ -37,4 +37,3 @@ compare/output/bitmaps_test/ compare/output/config\.js \.vscode/ -/compare/output/index_bundle.js diff --git a/compare/output/index_bundle.js b/compare/output/index_bundle.js new file mode 100644 index 000000000..f235d9991 --- /dev/null +++ b/compare/output/index_bundle.js @@ -0,0 +1,33223 @@ +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) { +/******/ return installedModules[moduleId].exports; +/******/ } +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ i: moduleId, +/******/ l: false, +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); +/******/ +/******/ // Flag the module as loaded +/******/ module.l = true; +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/******/ +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; +/******/ +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; +/******/ +/******/ // define getter function for harmony exports +/******/ __webpack_require__.d = function(exports, name, getter) { +/******/ if(!__webpack_require__.o(exports, name)) { +/******/ Object.defineProperty(exports, name, { +/******/ configurable: false, +/******/ enumerable: true, +/******/ get: getter +/******/ }); +/******/ } +/******/ }; +/******/ +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = function(module) { +/******/ var getter = module && module.__esModule ? +/******/ function getDefault() { return module['default']; } : +/******/ function getModuleExports() { return module; }; +/******/ __webpack_require__.d(getter, 'a', getter); +/******/ return getter; +/******/ }; +/******/ +/******/ // Object.prototype.hasOwnProperty.call +/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; +/******/ +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; +/******/ +/******/ // Load entry module and return exports +/******/ return __webpack_require__(__webpack_require__.s = 111); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ (function(module, exports) { + +// shim for using process in browser +var process = module.exports = {}; + +// cached from whatever global is present so that test runners that stub it +// don't break things. But we need to wrap it in a try catch in case it is +// wrapped in strict mode code which doesn't define any globals. It's inside a +// function because try/catches deoptimize in certain engines. + +var cachedSetTimeout; +var cachedClearTimeout; + +function defaultSetTimout() { + throw new Error('setTimeout has not been defined'); +} +function defaultClearTimeout () { + throw new Error('clearTimeout has not been defined'); +} +(function () { + try { + if (typeof setTimeout === 'function') { + cachedSetTimeout = setTimeout; + } else { + cachedSetTimeout = defaultSetTimout; + } + } catch (e) { + cachedSetTimeout = defaultSetTimout; + } + try { + if (typeof clearTimeout === 'function') { + cachedClearTimeout = clearTimeout; + } else { + cachedClearTimeout = defaultClearTimeout; + } + } catch (e) { + cachedClearTimeout = defaultClearTimeout; + } +} ()) +function runTimeout(fun) { + if (cachedSetTimeout === setTimeout) { + //normal enviroments in sane situations + return setTimeout(fun, 0); + } + // if setTimeout wasn't available but was latter defined + if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) { + cachedSetTimeout = setTimeout; + return setTimeout(fun, 0); + } + try { + // when when somebody has screwed with setTimeout but no I.E. maddness + return cachedSetTimeout(fun, 0); + } catch(e){ + try { + // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally + return cachedSetTimeout.call(null, fun, 0); + } catch(e){ + // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error + return cachedSetTimeout.call(this, fun, 0); + } + } + + +} +function runClearTimeout(marker) { + if (cachedClearTimeout === clearTimeout) { + //normal enviroments in sane situations + return clearTimeout(marker); + } + // if clearTimeout wasn't available but was latter defined + if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) { + cachedClearTimeout = clearTimeout; + return clearTimeout(marker); + } + try { + // when when somebody has screwed with setTimeout but no I.E. maddness + return cachedClearTimeout(marker); + } catch (e){ + try { + // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally + return cachedClearTimeout.call(null, marker); + } catch (e){ + // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error. + // Some versions of I.E. have different rules for clearTimeout vs setTimeout + return cachedClearTimeout.call(this, marker); + } + } + + + +} +var queue = []; +var draining = false; +var currentQueue; +var queueIndex = -1; + +function cleanUpNextTick() { + if (!draining || !currentQueue) { + return; + } + draining = false; + if (currentQueue.length) { + queue = currentQueue.concat(queue); + } else { + queueIndex = -1; + } + if (queue.length) { + drainQueue(); + } +} + +function drainQueue() { + if (draining) { + return; + } + var timeout = runTimeout(cleanUpNextTick); + draining = true; + + var len = queue.length; + while(len) { + currentQueue = queue; + queue = []; + while (++queueIndex < len) { + if (currentQueue) { + currentQueue[queueIndex].run(); + } + } + queueIndex = -1; + len = queue.length; + } + currentQueue = null; + draining = false; + runClearTimeout(timeout); +} + +process.nextTick = function (fun) { + var args = new Array(arguments.length - 1); + if (arguments.length > 1) { + for (var i = 1; i < arguments.length; i++) { + args[i - 1] = arguments[i]; + } + } + queue.push(new Item(fun, args)); + if (queue.length === 1 && !draining) { + runTimeout(drainQueue); + } +}; + +// v8 likes predictible objects +function Item(fun, array) { + this.fun = fun; + this.array = array; +} +Item.prototype.run = function () { + this.fun.apply(null, this.array); +}; +process.title = 'browser'; +process.browser = true; +process.env = {}; +process.argv = []; +process.version = ''; // empty string to avoid regexp issues +process.versions = {}; + +function noop() {} + +process.on = noop; +process.addListener = noop; +process.once = noop; +process.off = noop; +process.removeListener = noop; +process.removeAllListeners = noop; +process.emit = noop; +process.prependListener = noop; +process.prependOnceListener = noop; + +process.listeners = function (name) { return [] } + +process.binding = function (name) { + throw new Error('process.binding is not supported'); +}; + +process.cwd = function () { return '/' }; +process.chdir = function (dir) { + throw new Error('process.chdir is not supported'); +}; +process.umask = function() { return 0; }; + + +/***/ }), +/* 1 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; +/* WEBPACK VAR INJECTION */(function(process) {/** + * Copyright (c) 2013-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + */ + + + +/** + * Use invariant() to assert state which your program assumes to be true. + * + * Provide sprintf-style format (only %s is supported) and arguments + * to provide information about what broke and what you were + * expecting. + * + * The invariant message will be stripped in production, but the invariant + * will remain to ensure logic does not differ in production. + */ + +var validateFormat = function validateFormat(format) {}; + +if (process.env.NODE_ENV !== 'production') { + validateFormat = function validateFormat(format) { + if (format === undefined) { + throw new Error('invariant requires an error message argument'); + } + }; +} + +function invariant(condition, format, a, b, c, d, e, f) { + validateFormat(format); + + if (!condition) { + var error; + if (format === undefined) { + error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.'); + } else { + var args = [a, b, c, d, e, f]; + var argIndex = 0; + error = new Error(format.replace(/%s/g, function () { + return args[argIndex++]; + })); + error.name = 'Invariant Violation'; + } + + error.framesToPop = 1; // we don't care about invariant's own frame + throw error; + } +} + +module.exports = invariant; +/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0))) + +/***/ }), +/* 2 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; +/* WEBPACK VAR INJECTION */(function(process) {/** + * Copyright (c) 2014-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + */ + + + +var emptyFunction = __webpack_require__(12); + +/** + * Similar to invariant but only logs a warning if the condition is not met. + * This can be used to log issues in development environments in critical + * paths. Removing the logging code for production environments will keep the + * same logic and follow the same code paths. + */ + +var warning = emptyFunction; + +if (process.env.NODE_ENV !== 'production') { + var printWarning = function printWarning(format) { + for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + args[_key - 1] = arguments[_key]; + } + + var argIndex = 0; + var message = 'Warning: ' + format.replace(/%s/g, function () { + return args[argIndex++]; + }); + if (typeof console !== 'undefined') { + console.error(message); + } + try { + // --- Welcome to debugging React --- + // This error was thrown as a convenience so that you can use this stack + // to find the callsite that caused this warning to fire. + throw new Error(message); + } catch (x) {} + }; + + warning = function warning(condition, format) { + if (format === undefined) { + throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument'); + } + + if (format.indexOf('Failed Composite propType: ') === 0) { + return; // Ignore CompositeComponent proptype check. + } + + if (!condition) { + for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) { + args[_key2 - 2] = arguments[_key2]; + } + + printWarning.apply(undefined, [format].concat(args)); + } + }; +} + +module.exports = warning; +/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0))) + +/***/ }), +/* 3 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +module.exports = __webpack_require__(21); + + +/***/ }), +/* 4 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; +/** + * Copyright (c) 2013-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * + */ + + +/** + * WARNING: DO NOT manually require this module. + * This is a replacement for `invariant(...)` used by the error code system + * and will _only_ be required by the corresponding babel pass. + * It always throws. + */ + +function reactProdInvariant(code) { + var argCount = arguments.length - 1; + + var message = 'Minified React error #' + code + '; visit ' + 'http://facebook.github.io/react/docs/error-decoder.html?invariant=' + code; + + for (var argIdx = 0; argIdx < argCount; argIdx++) { + message += '&args[]=' + encodeURIComponent(arguments[argIdx + 1]); + } + + message += ' for the full message or use the non-minified dev environment' + ' for full errors and additional helpful warnings.'; + + var error = new Error(message); + error.name = 'Invariant Violation'; + error.framesToPop = 1; // we don't care about reactProdInvariant's own frame + + throw error; +} + +module.exports = reactProdInvariant; + +/***/ }), +/* 5 */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); +/* WEBPACK VAR INJECTION */(function(process, module) {/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "css", function() { return css; }); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "keyframes", function() { return keyframes; }); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "injectGlobal", function() { return injectGlobal; }); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ThemeProvider", function() { return ThemeProvider; }); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "withTheme", function() { return wrapWithTheme; }); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ServerStyleSheet", function() { return ServerStyleSheet; }); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "StyleSheetManager", function() { return StyleSheetManager; }); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_is_plain_object__ = __webpack_require__(246); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_is_plain_object___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_is_plain_object__); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_stylis__ = __webpack_require__(248); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_stylis___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_stylis__); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_react__ = __webpack_require__(3); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_react__); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_prop_types__ = __webpack_require__(20); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3_prop_types__); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_hoist_non_react_statics__ = __webpack_require__(249); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_hoist_non_react_statics___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_4_hoist_non_react_statics__); + + + + + + +/** + * Copyright (c) 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @typechecks + */ + +var _uppercasePattern = /([A-Z])/g; + +/** + * Hyphenates a camelcased string, for example: + * + * > hyphenate('backgroundColor') + * < "background-color" + * + * For CSS style names, use `hyphenateStyleName` instead which works properly + * with all vendor prefixes, including `ms`. + * + * @param {string} string + * @return {string} + */ +function hyphenate$2(string) { + return string.replace(_uppercasePattern, '-$1').toLowerCase(); +} + +var hyphenate_1 = hyphenate$2; + +var hyphenate = hyphenate_1; + +var msPattern = /^ms-/; + +/** + * Hyphenates a camelcased CSS property name, for example: + * + * > hyphenateStyleName('backgroundColor') + * < "background-color" + * > hyphenateStyleName('MozTransition') + * < "-moz-transition" + * > hyphenateStyleName('msTransition') + * < "-ms-transition" + * + * As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix + * is converted to `-ms-`. + * + * @param {string} string + * @return {string} + */ +function hyphenateStyleName(string) { + return hyphenate(string).replace(msPattern, '-ms-'); +} + +var hyphenateStyleName_1 = hyphenateStyleName; + +// +var objToCss = function objToCss(obj, prevKey) { + var css = Object.keys(obj).filter(function (key) { + var chunk = obj[key]; + return chunk !== undefined && chunk !== null && chunk !== false && chunk !== ''; + }).map(function (key) { + if (__WEBPACK_IMPORTED_MODULE_0_is_plain_object___default()(obj[key])) return objToCss(obj[key], key); + return hyphenateStyleName_1(key) + ': ' + obj[key] + ';'; + }).join(' '); + return prevKey ? prevKey + ' {\n ' + css + '\n}' : css; +}; + +var flatten = function flatten(chunks, executionContext) { + return chunks.reduce(function (ruleSet, chunk) { + /* Remove falsey values */ + if (chunk === undefined || chunk === null || chunk === false || chunk === '') { + return ruleSet; + } + /* Flatten ruleSet */ + if (Array.isArray(chunk)) { + return [].concat(ruleSet, flatten(chunk, executionContext)); + } + + /* Handle other components */ + if (chunk.hasOwnProperty('styledComponentId')) { + // $FlowFixMe not sure how to make this pass + return [].concat(ruleSet, ['.' + chunk.styledComponentId]); + } + + /* Either execute or defer the function */ + if (typeof chunk === 'function') { + return executionContext ? ruleSet.concat.apply(ruleSet, flatten([chunk(executionContext)], executionContext)) : ruleSet.concat(chunk); + } + + /* Handle objects */ + return ruleSet.concat( + // $FlowFixMe have to add %checks somehow to isPlainObject + __WEBPACK_IMPORTED_MODULE_0_is_plain_object___default()(chunk) ? objToCss(chunk) : chunk.toString()); + }, []); +}; + +// +var stylis = new __WEBPACK_IMPORTED_MODULE_1_stylis___default.a({ + global: false, + cascade: true, + keyframe: false, + prefix: true, + compress: false, + semicolon: true +}); + +var stringifyRules = function stringifyRules(rules, selector, prefix) { + var flatCSS = rules.join('').replace(/^\s*\/\/.*$/gm, ''); // replace JS comments + + var cssStr = selector && prefix ? prefix + ' ' + selector + ' { ' + flatCSS + ' }' : flatCSS; + + return stylis(prefix || !selector ? '' : selector, cssStr); +}; + +// +var chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''); +var charsLength = chars.length; + +/* Some high number, usually 9-digit base-10. Map it to base-😎 */ +var generateAlphabeticName = function generateAlphabeticName(code) { + var name = ''; + var x = void 0; + + for (x = code; x > charsLength; x = Math.floor(x / charsLength)) { + name = chars[x % charsLength] + name; + } + + return chars[x % charsLength] + name; +}; + +// + + +var interleave = (function (strings, interpolations) { + return interpolations.reduce(function (array, interp, i) { + return array.concat(interp, strings[i + 1]); + }, [strings[0]]); +}); + +// +var css = (function (strings) { + for (var _len = arguments.length, interpolations = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + interpolations[_key - 1] = arguments[_key]; + } + + return flatten(interleave(strings, interpolations)); +}); + +// +var SC_COMPONENT_ID = /^[^\S\n]*?\/\* sc-component-id:\s+(\S+)\s+\*\//gm; + +var extractCompsFromCSS = (function (maybeCSS) { + var css = '' + (maybeCSS || ''); // Definitely a string, and a clone + var existingComponents = []; + css.replace(SC_COMPONENT_ID, function (match, componentId, matchIndex) { + existingComponents.push({ componentId: componentId, matchIndex: matchIndex }); + return match; + }); + return existingComponents.map(function (_ref, i) { + var componentId = _ref.componentId, + matchIndex = _ref.matchIndex; + + var nextComp = existingComponents[i + 1]; + var cssFromDOM = nextComp ? css.slice(matchIndex, nextComp.matchIndex) : css.slice(matchIndex); + return { componentId: componentId, cssFromDOM: cssFromDOM }; + }); +}); + +// +/* eslint-disable camelcase, no-undef */ + +var getNonce = (function () { + return true ? __webpack_require__.nc : null; +}); + +var classCallCheck = function (instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } +}; + +var createClass = function () { + function defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } + } + + return function (Constructor, protoProps, staticProps) { + if (protoProps) defineProperties(Constructor.prototype, protoProps); + if (staticProps) defineProperties(Constructor, staticProps); + return Constructor; + }; +}(); + + + + + + + +var _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; +}; + + + +var inherits = function (subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); + } + + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + enumerable: false, + writable: true, + configurable: true + } + }); + if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; +}; + + + + + + + + + +var objectWithoutProperties = function (obj, keys) { + var target = {}; + + for (var i in obj) { + if (keys.indexOf(i) >= 0) continue; + if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; + target[i] = obj[i]; + } + + return target; +}; + +var possibleConstructorReturn = function (self, call) { + if (!self) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } + + return call && (typeof call === "object" || typeof call === "function") ? call : self; +}; + +// +/* eslint-disable no-underscore-dangle */ +/* + * Browser Style Sheet with Rehydration + * + * + * + * Note: replace · with * in the above snippet. + * */ +var COMPONENTS_PER_TAG = 40; + +var BrowserTag = function () { + function BrowserTag(el, isLocal) { + var existingSource = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ''; + classCallCheck(this, BrowserTag); + + this.el = el; + this.isLocal = isLocal; + this.ready = false; + + var extractedComps = extractCompsFromCSS(existingSource); + + this.size = extractedComps.length; + this.components = extractedComps.reduce(function (acc, obj) { + acc[obj.componentId] = obj; // eslint-disable-line no-param-reassign + return acc; + }, {}); + } + + BrowserTag.prototype.isFull = function isFull() { + return this.size >= COMPONENTS_PER_TAG; + }; + + BrowserTag.prototype.addComponent = function addComponent(componentId) { + if (!this.ready) this.replaceElement(); + if (process.env.NODE_ENV !== 'production' && this.components[componentId]) { + throw new Error('Trying to add Component \'' + componentId + '\' twice!'); + } + + var comp = { componentId: componentId, textNode: document.createTextNode('') }; + this.el.appendChild(comp.textNode); + + this.size += 1; + this.components[componentId] = comp; + }; + + BrowserTag.prototype.inject = function inject(componentId, css, name) { + if (!this.ready) this.replaceElement(); + var comp = this.components[componentId]; + + if (process.env.NODE_ENV !== 'production' && !comp) { + throw new Error('Must add a new component before you can inject css into it'); + } + if (comp.textNode.data === '') { + comp.textNode.appendData('\n/* sc-component-id: ' + componentId + ' */\n'); + } + + comp.textNode.appendData(css); + if (name) { + var existingNames = this.el.getAttribute(SC_ATTR); + this.el.setAttribute(SC_ATTR, existingNames ? existingNames + ' ' + name : name); + } + + var nonce = getNonce(); + + if (nonce) { + this.el.setAttribute('nonce', nonce); + } + }; + + BrowserTag.prototype.toHTML = function toHTML() { + return this.el.outerHTML; + }; + + BrowserTag.prototype.toReactElement = function toReactElement() { + throw new Error("BrowserTag doesn't implement toReactElement!"); + }; + + BrowserTag.prototype.clone = function clone() { + throw new Error('BrowserTag cannot be cloned!'); + }; + + /* Because we care about source order, before we can inject anything we need to + * create a text node for each component and replace the existing CSS. */ + + + BrowserTag.prototype.replaceElement = function replaceElement() { + var _this = this; + + this.ready = true; + // We have nothing to inject. Use the current el. + if (this.size === 0) return; + + // Build up our replacement style tag + var newEl = this.el.cloneNode(); + newEl.appendChild(document.createTextNode('\n')); + + Object.keys(this.components).forEach(function (key) { + var comp = _this.components[key]; + + // eslint-disable-next-line no-param-reassign + comp.textNode = document.createTextNode(comp.cssFromDOM); + newEl.appendChild(comp.textNode); + }); + + if (!this.el.parentNode) { + throw new Error("Trying to replace an element that wasn't mounted!"); + } + + // The ol' switcheroo + this.el.parentNode.replaceChild(newEl, this.el); + this.el = newEl; + }; + + return BrowserTag; +}(); + +/* Factory function to separate DOM operations from logical ones*/ + + +var BrowserStyleSheet = { + create: function create() { + var tags = []; + var names = {}; + + /* Construct existing state from DOM */ + var nodes = document.querySelectorAll('[' + SC_ATTR + ']'); + var nodesLength = nodes.length; + + for (var i = 0; i < nodesLength; i += 1) { + var el = nodes[i]; + + tags.push(new BrowserTag(el, el.getAttribute(LOCAL_ATTR) === 'true', el.innerHTML)); + + var attr = el.getAttribute(SC_ATTR); + if (attr) { + attr.trim().split(/\s+/).forEach(function (name) { + names[name] = true; + }); + } + } + + /* Factory for making more tags */ + var tagConstructor = function tagConstructor(isLocal) { + var el = document.createElement('style'); + el.type = 'text/css'; + el.setAttribute(SC_ATTR, ''); + el.setAttribute(LOCAL_ATTR, isLocal ? 'true' : 'false'); + if (!document.head) throw new Error('Missing document
'); + document.head.appendChild(el); + return new BrowserTag(el, isLocal); + }; + + return new StyleSheet(tagConstructor, tags, names); + } +}; + +// +var SC_ATTR = 'data-styled-components'; +var LOCAL_ATTR = 'data-styled-components-is-local'; +var CONTEXT_KEY = '__styled-components-stylesheet__'; + +/* eslint-disable flowtype/object-type-delimiter */ + +/* eslint-enable flowtype/object-type-delimiter */ + +var instance = null; +// eslint-disable-next-line no-use-before-define +var clones = []; + +var StyleSheet = function () { + function StyleSheet(tagConstructor) { + var tags = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : []; + var names = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; + classCallCheck(this, StyleSheet); + this.hashes = {}; + this.deferredInjections = {}; + this.stylesCacheable = typeof document !== 'undefined'; + + this.tagConstructor = tagConstructor; + this.tags = tags; + this.names = names; + this.constructComponentTagMap(); + } + + // helper for `ComponentStyle` to know when it cache static styles. + // staticly styled-component can not safely cache styles on the server + // without all `ComponentStyle` instances saving a reference to the + // the styleSheet instance they last rendered with, + // or listening to creation / reset events. otherwise you might create + // a component with one stylesheet and render it another api response + // with another, losing styles on from your server-side render. + + + StyleSheet.prototype.constructComponentTagMap = function constructComponentTagMap() { + var _this = this; + + this.componentTags = {}; + + this.tags.forEach(function (tag) { + Object.keys(tag.components).forEach(function (componentId) { + _this.componentTags[componentId] = tag; + }); + }); + }; + + /* Best level of caching—get the name from the hash straight away. */ + + + StyleSheet.prototype.getName = function getName(hash) { + return this.hashes[hash.toString()]; + }; + + /* Second level of caching—if the name is already in the dom, don't + * inject anything and record the hash for getName next time. */ + + + StyleSheet.prototype.alreadyInjected = function alreadyInjected(hash, name) { + if (!this.names[name]) return false; + + this.hashes[hash.toString()] = name; + return true; + }; + + /* Third type of caching—don't inject components' componentId twice. */ + + + StyleSheet.prototype.hasInjectedComponent = function hasInjectedComponent(componentId) { + return !!this.componentTags[componentId]; + }; + + StyleSheet.prototype.deferredInject = function deferredInject(componentId, isLocal, css) { + if (this === instance) { + clones.forEach(function (clone) { + clone.deferredInject(componentId, isLocal, css); + }); + } + + this.getOrCreateTag(componentId, isLocal); + this.deferredInjections[componentId] = css; + }; + + StyleSheet.prototype.inject = function inject(componentId, isLocal, css, hash, name) { + if (this === instance) { + clones.forEach(function (clone) { + clone.inject(componentId, isLocal, css); + }); + } + + var tag = this.getOrCreateTag(componentId, isLocal); + + var deferredInjection = this.deferredInjections[componentId]; + if (deferredInjection) { + tag.inject(componentId, deferredInjection); + delete this.deferredInjections[componentId]; + } + + tag.inject(componentId, css, name); + + if (hash && name) { + this.hashes[hash.toString()] = name; + } + }; + + StyleSheet.prototype.toHTML = function toHTML() { + return this.tags.map(function (tag) { + return tag.toHTML(); + }).join(''); + }; + + StyleSheet.prototype.toReactElements = function toReactElements() { + return this.tags.map(function (tag, i) { + return tag.toReactElement('sc-' + i); + }); + }; + + StyleSheet.prototype.getOrCreateTag = function getOrCreateTag(componentId, isLocal) { + var existingTag = this.componentTags[componentId]; + if (existingTag) { + return existingTag; + } + + var lastTag = this.tags[this.tags.length - 1]; + var componentTag = !lastTag || lastTag.isFull() || lastTag.isLocal !== isLocal ? this.createNewTag(isLocal) : lastTag; + this.componentTags[componentId] = componentTag; + componentTag.addComponent(componentId); + return componentTag; + }; + + StyleSheet.prototype.createNewTag = function createNewTag(isLocal) { + var newTag = this.tagConstructor(isLocal); + this.tags.push(newTag); + return newTag; + }; + + StyleSheet.reset = function reset(isServer) { + instance = StyleSheet.create(isServer); + }; + + /* We can make isServer totally implicit once Jest 20 drops and we + * can change environment on a per-test basis. */ + + + StyleSheet.create = function create() { + var isServer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : typeof document === 'undefined'; + + return (isServer ? ServerStyleSheet : BrowserStyleSheet).create(); + }; + + StyleSheet.clone = function clone(oldSheet) { + var newSheet = new StyleSheet(oldSheet.tagConstructor, oldSheet.tags.map(function (tag) { + return tag.clone(); + }), _extends({}, oldSheet.names)); + + newSheet.hashes = _extends({}, oldSheet.hashes); + newSheet.deferredInjections = _extends({}, oldSheet.deferredInjections); + clones.push(newSheet); + + return newSheet; + }; + + createClass(StyleSheet, null, [{ + key: 'instance', + get: function get$$1() { + return instance || (instance = StyleSheet.create()); + } + }]); + return StyleSheet; +}(); + +var _StyleSheetManager$ch; + +// +var StyleSheetManager = function (_Component) { + inherits(StyleSheetManager, _Component); + + function StyleSheetManager() { + classCallCheck(this, StyleSheetManager); + return possibleConstructorReturn(this, _Component.apply(this, arguments)); + } + + StyleSheetManager.prototype.getChildContext = function getChildContext() { + var _ref; + + return _ref = {}, _ref[CONTEXT_KEY] = this.props.sheet, _ref; + }; + + StyleSheetManager.prototype.render = function render() { + /* eslint-disable react/prop-types */ + // Flow v0.43.1 will report an error accessing the `children` property, + // but v0.47.0 will not. It is necessary to use a type cast instead of + // a "fixme" comment to satisfy both Flow versions. + return __WEBPACK_IMPORTED_MODULE_2_react___default.a.Children.only(this.props.children); + }; + + return StyleSheetManager; +}(__WEBPACK_IMPORTED_MODULE_2_react__["Component"]); + +StyleSheetManager.childContextTypes = (_StyleSheetManager$ch = {}, _StyleSheetManager$ch[CONTEXT_KEY] = __WEBPACK_IMPORTED_MODULE_3_prop_types___default.a.oneOfType([__WEBPACK_IMPORTED_MODULE_3_prop_types___default.a.instanceOf(StyleSheet), __WEBPACK_IMPORTED_MODULE_3_prop_types___default.a.instanceOf(ServerStyleSheet)]).isRequired, _StyleSheetManager$ch); + +StyleSheetManager.propTypes = { + sheet: __WEBPACK_IMPORTED_MODULE_3_prop_types___default.a.oneOfType([__WEBPACK_IMPORTED_MODULE_3_prop_types___default.a.instanceOf(StyleSheet), __WEBPACK_IMPORTED_MODULE_3_prop_types___default.a.instanceOf(ServerStyleSheet)]).isRequired +}; + +// +/* eslint-disable no-underscore-dangle */ +var ServerTag = function () { + function ServerTag(isLocal) { + classCallCheck(this, ServerTag); + + this.isLocal = isLocal; + this.components = {}; + this.size = 0; + this.names = []; + } + + ServerTag.prototype.isFull = function isFull() { + return false; + }; + + ServerTag.prototype.addComponent = function addComponent(componentId) { + if (process.env.NODE_ENV !== 'production' && this.components[componentId]) { + throw new Error('Trying to add Component \'' + componentId + '\' twice!'); + } + this.components[componentId] = { componentId: componentId, css: '' }; + this.size += 1; + }; + + ServerTag.prototype.concatenateCSS = function concatenateCSS() { + var _this = this; + + return Object.keys(this.components).reduce(function (styles, k) { + return styles + _this.components[k].css; + }, ''); + }; + + ServerTag.prototype.inject = function inject(componentId, css, name) { + var comp = this.components[componentId]; + + if (process.env.NODE_ENV !== 'production' && !comp) { + throw new Error('Must add a new component before you can inject css into it'); + } + if (comp.css === '') comp.css = '/* sc-component-id: ' + componentId + ' */\n'; + + comp.css += css.replace(/\n*$/, '\n'); + + if (name) this.names.push(name); + }; + + ServerTag.prototype.toHTML = function toHTML() { + var attrs = ['type="text/css"', SC_ATTR + '="' + this.names.join(' ') + '"', LOCAL_ATTR + '="' + (this.isLocal ? 'true' : 'false') + '"']; + + var nonce = getNonce(); + + if (nonce) { + attrs.push('nonce="' + nonce + '"'); + } + + return ''; + }; + + ServerTag.prototype.toReactElement = function toReactElement(key) { + var _attrs; + + var attrs = (_attrs = {}, _attrs[SC_ATTR] = this.names.join(' '), _attrs[LOCAL_ATTR] = this.isLocal.toString(), _attrs); + + var nonce = getNonce(); + + if (nonce) { + attrs.nonce = nonce; + } + + return __WEBPACK_IMPORTED_MODULE_2_react___default.a.createElement('style', _extends({ + key: key, + type: 'text/css' + }, attrs, { + dangerouslySetInnerHTML: { __html: this.concatenateCSS() } + })); + }; + + ServerTag.prototype.clone = function clone() { + var _this2 = this; + + var copy = new ServerTag(this.isLocal); + copy.names = [].concat(this.names); + copy.size = this.size; + copy.components = Object.keys(this.components).reduce(function (acc, key) { + acc[key] = _extends({}, _this2.components[key]); // eslint-disable-line no-param-reassign + return acc; + }, {}); + + return copy; + }; + + return ServerTag; +}(); + +var ServerStyleSheet = function () { + function ServerStyleSheet() { + classCallCheck(this, ServerStyleSheet); + + this.instance = StyleSheet.clone(StyleSheet.instance); + } + + ServerStyleSheet.prototype.collectStyles = function collectStyles(children) { + if (this.closed) { + throw new Error("Can't collect styles once you've called getStyleTags!"); + } + return __WEBPACK_IMPORTED_MODULE_2_react___default.a.createElement( + StyleSheetManager, + { sheet: this.instance }, + children + ); + }; + + ServerStyleSheet.prototype.getStyleTags = function getStyleTags() { + if (!this.closed) { + clones.splice(clones.indexOf(this.instance), 1); + this.closed = true; + } + + return this.instance.toHTML(); + }; + + ServerStyleSheet.prototype.getStyleElement = function getStyleElement() { + if (!this.closed) { + clones.splice(clones.indexOf(this.instance), 1); + this.closed = true; + } + + return this.instance.toReactElements(); + }; + + ServerStyleSheet.create = function create() { + return new StyleSheet(function (isLocal) { + return new ServerTag(isLocal); + }); + }; + + return ServerStyleSheet; +}(); + +// + +var LIMIT = 200; + +var createWarnTooManyClasses = (function (displayName) { + var generatedClasses = {}; + var warningSeen = false; + + return function (className) { + if (!warningSeen) { + generatedClasses[className] = true; + if (Object.keys(generatedClasses).length >= LIMIT) { + // Unable to find latestRule in test environment. + /* eslint-disable no-console, prefer-template */ + console.warn('Over ' + LIMIT + ' classes were generated for component ' + displayName + '. \n' + 'Consider using the attrs method, together with a style object for frequently changed styles.\n' + 'Example:\n' + ' const Component = styled.div.attrs({\n' + ' style: ({ background }) => ({\n' + ' background,\n' + ' }),\n' + ' })`width: 100%;`\n\n' + '