styled-components
Version:
**This is a work in progress** based off of [this demo](https://github.com/geelen/css-components-demo).
1,587 lines (1,289 loc) • 463 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("React"));
else if(typeof define === 'function' && define.amd)
define(["React"], factory);
else if(typeof exports === 'object')
exports["styled-components"] = factory(require("React"));
else
root["styled-components"] = factory(root["React"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_14__) {
return /******/ (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] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = 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;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.keyframes = exports.global = exports.toggle = exports.css = undefined;
var _css = __webpack_require__(1);
var _css2 = _interopRequireDefault(_css);
var _toggle = __webpack_require__(11);
var _toggle2 = _interopRequireDefault(_toggle);
var _styled = __webpack_require__(12);
var _styled2 = _interopRequireDefault(_styled);
var _global = __webpack_require__(69);
var _global2 = _interopRequireDefault(_global);
var _keyframes = __webpack_require__(71);
var _keyframes2 = _interopRequireDefault(_keyframes);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.css = _css2.default;
exports.toggle = _toggle2.default;
exports.global = _global2.default;
exports.keyframes = _keyframes2.default;
/**
* Export constructors for consumption by users
*/
exports.default = _styled2.default;
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _interleave = __webpack_require__(2);
var _interleave2 = _interopRequireDefault(_interleave);
var _flatten = __webpack_require__(3);
var _flatten2 = _interopRequireDefault(_flatten);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = 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 (0, _flatten2.default)((0, _interleave2.default)(strings, interpolations));
};
module.exports = exports['default'];
/***/ },
/* 2 */
/***/ function(module, exports) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = function (strings, interpolations) {
return interpolations.reduce(function (array, interp, i) {
return array.concat(interp, strings[i + 1]);
}, [strings[0]]);
};
module.exports = exports['default'];
/***/ },
/* 3 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.objToCss = undefined;
var _hyphenateStyleName = __webpack_require__(4);
var _hyphenateStyleName2 = _interopRequireDefault(_hyphenateStyleName);
var _isPlainObject = __webpack_require__(6);
var _isPlainObject2 = _interopRequireDefault(_isPlainObject);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
var objToCss = exports.objToCss = function objToCss(obj) {
return Object.keys(obj).map(function (k) {
return (0, _hyphenateStyleName2.default)(k) + ': ' + obj[k] + ';';
}).join(' ');
};
var flatten = function flatten(chunks, executionContext) {
return chunks.reduce(function (array, chunk) {
/* Remove falsey values */
if (chunk === undefined || chunk === null || chunk === false || chunk === '') return array;
/* Flatten arrays */
if (Array.isArray(chunk)) return array.concat.apply(array, _toConsumableArray(flatten(chunk, executionContext)));
/* Either execute or defer the function */
if (typeof chunk === 'function') {
return executionContext ? array.concat.apply(array, _toConsumableArray(flatten([chunk(executionContext)], executionContext))) : array.concat(chunk);
}
/* Handle objects */
return array.concat((0, _isPlainObject2.default)(chunk) ? objToCss(chunk) : chunk.toString());
}, []);
};
exports.default = flatten;
/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {
/**
* 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
*/
'use strict';
var hyphenate = __webpack_require__(5);
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-');
}
module.exports = hyphenateStyleName;
/***/ },
/* 5 */
/***/ function(module, exports) {
'use strict';
/**
* 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(string) {
return string.replace(_uppercasePattern, '-$1').toLowerCase();
}
module.exports = hyphenate;
/***/ },
/* 6 */
/***/ function(module, exports, __webpack_require__) {
var getPrototype = __webpack_require__(7),
isHostObject = __webpack_require__(9),
isObjectLike = __webpack_require__(10);
/** `Object#toString` result references. */
var objectTag = '[object Object]';
/** Used for built-in method references. */
var funcProto = Function.prototype,
objectProto = Object.prototype;
/** Used to resolve the decompiled source of functions. */
var funcToString = funcProto.toString;
/** Used to check objects for own properties. */
var hasOwnProperty = objectProto.hasOwnProperty;
/** Used to infer the `Object` constructor. */
var objectCtorString = funcToString.call(Object);
/**
* Used to resolve the
* [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
* of values.
*/
var objectToString = objectProto.toString;
/**
* Checks if `value` is a plain object, that is, an object created by the
* `Object` constructor or one with a `[[Prototype]]` of `null`.
*
* @static
* @memberOf _
* @since 0.8.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a plain object, else `false`.
* @example
*
* function Foo() {
* this.a = 1;
* }
*
* _.isPlainObject(new Foo);
* // => false
*
* _.isPlainObject([1, 2, 3]);
* // => false
*
* _.isPlainObject({ 'x': 0, 'y': 0 });
* // => true
*
* _.isPlainObject(Object.create(null));
* // => true
*/
function isPlainObject(value) {
if (!isObjectLike(value) ||
objectToString.call(value) != objectTag || isHostObject(value)) {
return false;
}
var proto = getPrototype(value);
if (proto === null) {
return true;
}
var Ctor = hasOwnProperty.call(proto, 'constructor') && proto.constructor;
return (typeof Ctor == 'function' &&
Ctor instanceof Ctor && funcToString.call(Ctor) == objectCtorString);
}
module.exports = isPlainObject;
/***/ },
/* 7 */
/***/ function(module, exports, __webpack_require__) {
var overArg = __webpack_require__(8);
/** Built-in value references. */
var getPrototype = overArg(Object.getPrototypeOf, Object);
module.exports = getPrototype;
/***/ },
/* 8 */
/***/ function(module, exports) {
/**
* Creates a unary function that invokes `func` with its argument transformed.
*
* @private
* @param {Function} func The function to wrap.
* @param {Function} transform The argument transform.
* @returns {Function} Returns the new function.
*/
function overArg(func, transform) {
return function(arg) {
return func(transform(arg));
};
}
module.exports = overArg;
/***/ },
/* 9 */
/***/ function(module, exports) {
/**
* Checks if `value` is a host object in IE < 9.
*
* @private
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a host object, else `false`.
*/
function isHostObject(value) {
// Many host objects are `Object` objects that can coerce to strings
// despite having improperly defined `toString` methods.
var result = false;
if (value != null && typeof value.toString != 'function') {
try {
result = !!(value + '');
} catch (e) {}
}
return result;
}
module.exports = isHostObject;
/***/ },
/* 10 */
/***/ function(module, exports) {
/**
* Checks if `value` is object-like. A value is object-like if it's not `null`
* and has a `typeof` result of "object".
*
* @static
* @memberOf _
* @since 4.0.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is object-like, else `false`.
* @example
*
* _.isObjectLike({});
* // => true
*
* _.isObjectLike([1, 2, 3]);
* // => true
*
* _.isObjectLike(_.noop);
* // => false
*
* _.isObjectLike(null);
* // => false
*/
function isObjectLike(value) {
return !!value && typeof value == 'object';
}
module.exports = isObjectLike;
/***/ },
/* 11 */
/***/ function(module, exports) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
exports.default = function (name, options) {
return function () {
var _ref;
var valueString = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var throwUnknown = function throwUnknown(unknownValue) {
var validValues = Object.keys(options).filter(function (v) {
return v !== 'default';
});
throw new Error(name + ': Unknown value \'' + unknownValue + '\'. Valid values are:\n' + validValues.join('\n'));
};
var values = valueString.split(/ +/).filter(function (s) {
return s.length > 0;
});
return (_ref = options.default ? [options.default] : []).concat.apply(_ref, _toConsumableArray(values.map(function (v) {
return v in options ? options[v] : throwUnknown(v);
}))).map(function (v) {
return v + ';';
});
};
};
/*
* Toggle: Simple Namespaced styling
*
* example: flex = toggle('flex', {
* default: rules.display('flex'), // always included
* inline: rules.display('inline-flex'),
* vertical: rules.flexDirection('column'),
* })
*
* flex() => `display: flex;`
* flex('inline vertical') => `display: flex; display: inline-flex; flex-direction: column;`
* */
module.exports = exports['default'];
/***/ },
/* 12 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _css = __webpack_require__(1);
var _css2 = _interopRequireDefault(_css);
var _StyledComponent = __webpack_require__(13);
var _StyledComponent2 = _interopRequireDefault(_StyledComponent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var styled = function styled(tag) {
return 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 (0, _StyledComponent2.default)(tag, _css2.default.apply(undefined, [strings].concat(interpolations)));
};
};
exports.default = styled;
/* Shorthands for all valid HTML properties */
// Thanks to ReactDOMFactories for this handy list!
styled.a = styled('a');
styled.abbr = styled('abbr');
styled.address = styled('address');
styled.area = styled('area');
styled.article = styled('article');
styled.aside = styled('aside');
styled.audio = styled('audio');
styled.b = styled('b');
styled.base = styled('base');
styled.bdi = styled('bdi');
styled.bdo = styled('bdo');
styled.big = styled('big');
styled.blockquote = styled('blockquote');
styled.body = styled('body');
styled.br = styled('br');
styled.button = styled('button');
styled.canvas = styled('canvas');
styled.caption = styled('caption');
styled.cite = styled('cite');
styled.code = styled('code');
styled.col = styled('col');
styled.colgroup = styled('colgroup');
styled.data = styled('data');
styled.datalist = styled('datalist');
styled.dd = styled('dd');
styled.del = styled('del');
styled.details = styled('details');
styled.dfn = styled('dfn');
styled.dialog = styled('dialog');
styled.div = styled('div');
styled.dl = styled('dl');
styled.dt = styled('dt');
styled.em = styled('em');
styled.embed = styled('embed');
styled.fieldset = styled('fieldset');
styled.figcaption = styled('figcaption');
styled.figure = styled('figure');
styled.footer = styled('footer');
styled.form = styled('form');
styled.h1 = styled('h1');
styled.h2 = styled('h2');
styled.h3 = styled('h3');
styled.h4 = styled('h4');
styled.h5 = styled('h5');
styled.h6 = styled('h6');
styled.head = styled('head');
styled.header = styled('header');
styled.hgroup = styled('hgroup');
styled.hr = styled('hr');
styled.html = styled('html');
styled.i = styled('i');
styled.iframe = styled('iframe');
styled.img = styled('img');
styled.input = styled('input');
styled.ins = styled('ins');
styled.kbd = styled('kbd');
styled.keygen = styled('keygen');
styled.label = styled('label');
styled.legend = styled('legend');
styled.li = styled('li');
styled.link = styled('link');
styled.main = styled('main');
styled.map = styled('map');
styled.mark = styled('mark');
styled.menu = styled('menu');
styled.menuitem = styled('menuitem');
styled.meta = styled('meta');
styled.meter = styled('meter');
styled.nav = styled('nav');
styled.noscript = styled('noscript');
styled.object = styled('object');
styled.ol = styled('ol');
styled.optgroup = styled('optgroup');
styled.option = styled('option');
styled.output = styled('output');
styled.p = styled('p');
styled.param = styled('param');
styled.picture = styled('picture');
styled.pre = styled('pre');
styled.progress = styled('progress');
styled.q = styled('q');
styled.rp = styled('rp');
styled.rt = styled('rt');
styled.ruby = styled('ruby');
styled.s = styled('s');
styled.samp = styled('samp');
styled.script = styled('script');
styled.section = styled('section');
styled.select = styled('select');
styled.small = styled('small');
styled.source = styled('source');
styled.span = styled('span');
styled.strong = styled('strong');
styled.style = styled('style');
styled.sub = styled('sub');
styled.summary = styled('summary');
styled.sup = styled('sup');
styled.table = styled('table');
styled.tbody = styled('tbody');
styled.td = styled('td');
styled.textarea = styled('textarea');
styled.tfoot = styled('tfoot');
styled.th = styled('th');
styled.thead = styled('thead');
styled.time = styled('time');
styled.title = styled('title');
styled.tr = styled('tr');
styled.track = styled('track');
styled.u = styled('u');
styled.ul = styled('ul');
styled.var = styled('var');
styled.video = styled('video');
styled.wbr = styled('wbr');
// SVG
styled.circle = styled('circle');
styled.clipPath = styled('clipPath');
styled.defs = styled('defs');
styled.ellipse = styled('ellipse');
styled.g = styled('g');
styled.image = styled('image');
styled.line = styled('line');
styled.linearGradient = styled('linearGradient');
styled.mask = styled('mask');
styled.path = styled('path');
styled.pattern = styled('pattern');
styled.polygon = styled('polygon');
styled.polyline = styled('polyline');
styled.radialGradient = styled('radialGradient');
styled.rect = styled('rect');
styled.stop = styled('stop');
styled.svg = styled('svg');
styled.text = styled('text');
styled.tspan = styled('tspan');
module.exports = exports['default'];
/***/ },
/* 13 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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 _react = __webpack_require__(14);
var _ComponentStyle = __webpack_require__(15);
var _ComponentStyle2 = _interopRequireDefault(_ComponentStyle);
var _validAttr = __webpack_require__(63);
var _validAttr2 = _interopRequireDefault(_validAttr);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(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; }
function _inherits(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; }
/* eslint-disable react/prefer-stateless-function */
var AbstractStyledComponent = function (_Component) {
_inherits(AbstractStyledComponent, _Component);
function AbstractStyledComponent() {
_classCallCheck(this, AbstractStyledComponent);
return _possibleConstructorReturn(this, (AbstractStyledComponent.__proto__ || Object.getPrototypeOf(AbstractStyledComponent)).apply(this, arguments));
}
return AbstractStyledComponent;
}(_react.Component);
var createStyledComponent = function createStyledComponent(target, rules, options) {
/* Handle styled(OtherStyledComponent) differently */
var isStyledComponent = {}.isPrototypeOf.call(AbstractStyledComponent, target);
if (isStyledComponent) return createStyledComponent(target.target, target.rules.concat(rules), options);
var isTag = typeof target === 'string';
var componentStyle = new _ComponentStyle2.default(rules);
var StyledComponent = function (_AbstractStyledCompon) {
_inherits(StyledComponent, _AbstractStyledCompon);
function StyledComponent() {
_classCallCheck(this, StyledComponent);
return _possibleConstructorReturn(this, (StyledComponent.__proto__ || Object.getPrototypeOf(StyledComponent)).apply(this, arguments));
}
_createClass(StyledComponent, [{
key: 'getChildContext',
value: function getChildContext() {
return { theme: this.theme };
}
}, {
key: 'componentWillMount',
value: function componentWillMount() {
this.componentWillReceiveProps(this.props, this.context);
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(newProps, newContext) {
// Always pass down a theme, even if it's empty
this.theme = newContext && newContext.theme || {};
// Local copy for this instance with an update() method
var theme = Object.assign({}, this.theme, {
update: function update(values) {
this.theme = Object.assign({}, this.theme, values);
}
});
/* Generate and inject the styles and potentially update theme */
var executionContext = Object.assign({}, newProps, { theme: theme });
this.generatedClassName = componentStyle.generateAndInjectStyles(executionContext);
}
/* eslint-disable react/prop-types */
}, {
key: 'render',
value: function render() {
var _this3 = this;
var _props = this.props;
var className = _props.className;
var children = _props.children;
var propsForElement = {};
/* Don't pass through non HTML tags through to HTML elements */
Object.keys(this.props).filter(function (propName) {
return !isTag || (0, _validAttr2.default)(propName);
}).forEach(function (propName) {
propsForElement[propName] = _this3.props[propName];
});
propsForElement.className = [className, this.generatedClassName].filter(function (x) {
return x;
}).join(' ');
return (0, _react.createElement)(target, propsForElement, children);
}
}]);
return StyledComponent;
}(AbstractStyledComponent);
/* Used for inheritance */
StyledComponent.rules = rules;
StyledComponent.target = target;
StyledComponent.displayName = isTag ? 'styled.' + target : 'Styled(' + target.displayName + ')';
StyledComponent.childContextTypes = {
theme: _react.PropTypes.object
};
StyledComponent.contextTypes = {
theme: _react.PropTypes.object
};
return StyledComponent;
};
exports.default = createStyledComponent;
module.exports = exports['default'];
/***/ },
/* 14 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_14__;
/***/ },
/* 15 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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 _hash = __webpack_require__(16);
var _hash2 = _interopRequireDefault(_hash);
var _sheet = __webpack_require__(17);
var _flatten = __webpack_require__(3);
var _flatten2 = _interopRequireDefault(_flatten);
var _parse = __webpack_require__(18);
var _parse2 = _interopRequireDefault(_parse);
var _postcssNested = __webpack_require__(61);
var _postcssNested2 = _interopRequireDefault(_postcssNested);
var _toEmoji = __webpack_require__(62);
var _toEmoji2 = _interopRequireDefault(_toEmoji);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var styleSheet = new _sheet.StyleSheet({ speedy: false, maxLength: 40 });
var inserted = {};
/*
ComponentStyle is all the CSS-specific stuff, not
the React-specific stuff.
*/
var ComponentStyle = function () {
function ComponentStyle(rules) {
_classCallCheck(this, ComponentStyle);
this.rules = rules;
if (!styleSheet.injected) styleSheet.inject();
this.insertedRule = styleSheet.insert('');
}
/*
* Flattens a rule set into valid CSS
* Hashes it, wraps the whole chunk in a ._hashName {}
* Parses that with PostCSS then runs PostCSS-Nested on it
* Returns the hash to be injected on render()
* */
_createClass(ComponentStyle, [{
key: 'generateAndInjectStyles',
value: function generateAndInjectStyles(executionContext) {
var flatCSS = (0, _flatten2.default)(this.rules, executionContext).join('');
var hash = (0, _hash2.default)(flatCSS);
if (!inserted[hash]) {
var selector = (0, _toEmoji2.default)(hash);
inserted[hash] = selector;
var root = (0, _parse2.default)('.' + selector + ' { ' + flatCSS + ' }');
(0, _postcssNested2.default)(root);
this.insertedRule.appendRule(root.toResult().css);
}
return inserted[hash];
}
}]);
return ComponentStyle;
}();
exports.default = ComponentStyle;
module.exports = exports['default'];
/***/ },
/* 16 */
/***/ function(module, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = doHash;
// murmurhash2 via https://gist.github.com/raycmorgan/588423
function doHash(str, seed) {
var m = 0x5bd1e995;
var r = 24;
var h = seed ^ str.length;
var length = str.length;
var currentIndex = 0;
while (length >= 4) {
var k = UInt32(str, currentIndex);
k = Umul32(k, m);
k ^= k >>> r;
k = Umul32(k, m);
h = Umul32(h, m);
h ^= k;
currentIndex += 4;
length -= 4;
}
switch (length) {
case 3:
h ^= UInt16(str, currentIndex);
h ^= str.charCodeAt(currentIndex + 2) << 16;
h = Umul32(h, m);
break;
case 2:
h ^= UInt16(str, currentIndex);
h = Umul32(h, m);
break;
case 1:
h ^= str.charCodeAt(currentIndex);
h = Umul32(h, m);
break;
}
h ^= h >>> 13;
h = Umul32(h, m);
h ^= h >>> 15;
return h >>> 0;
}
function UInt32(str, pos) {
return str.charCodeAt(pos++) + (str.charCodeAt(pos++) << 8) + (str.charCodeAt(pos++) << 16) + (str.charCodeAt(pos) << 24);
}
function UInt16(str, pos) {
return str.charCodeAt(pos++) + (str.charCodeAt(pos++) << 8);
}
function Umul32(n, m) {
n = n | 0;
m = m | 0;
var nlo = n & 0xffff;
var nhi = n >>> 16;
var res = nlo * m + ((nhi * m & 0xffff) << 16) | 0;
return res;
}
/***/ },
/* 17 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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; }; }();
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/*
high performance StyleSheet for css-in-js systems
- uses multiple style tags behind the scenes for millions of rules
- uses `insertRule` for appending in production for *much* faster performance
- 'polyfills' on server side
// usage
import StyleSheet from 'glamor/lib/sheet'
let styleSheet = new StyleSheet()
styleSheet.inject()
- 'injects' the stylesheet into the page (or into memory if on server)
styleSheet.insert('#box { border: 1px solid red; }')
- appends a css rule into the stylesheet
styleSheet.flush()
- empties the stylesheet of all its contents
*/
function last(arr) {
return arr[arr.length - 1];
}
function sheetForTag(tag) {
for (var i = 0; i < document.styleSheets.length; i++) {
if (document.styleSheets[i].ownerNode === tag) {
return document.styleSheets[i];
}
}
}
var isBrowser = typeof document !== 'undefined';
var isDev = function (x) {
return x === 'development' || !x;
}((production));
var isTest = (production) === 'test';
var oldIE = function () {
if (isBrowser) {
var div = document.createElement('div');
div.innerHTML = '<!--[if lt IE 10]><i></i><![endif]-->';
return div.getElementsByTagName('i').length === 1;
}
}();
function makeStyleTag() {
var tag = document.createElement('style');
tag.type = 'text/css';
tag.appendChild(document.createTextNode(''));
(document.head || document.getElementsByTagName('head')[0]).appendChild(tag);
return tag;
}
var StyleSheet = exports.StyleSheet = function () {
function StyleSheet() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref$speedy = _ref.speedy;
var speedy = _ref$speedy === undefined ? !isDev && !isTest : _ref$speedy;
var _ref$maxLength = _ref.maxLength;
var maxLength = _ref$maxLength === undefined ? isBrowser && oldIE ? 4000 : 65000 : _ref$maxLength;
_classCallCheck(this, StyleSheet);
this.isSpeedy = speedy; // the big drawback here is that the css won't be editable in devtools
this.sheet = undefined;
this.tags = [];
this.maxLength = maxLength;
this.ctr = 0;
}
_createClass(StyleSheet, [{
key: 'inject',
value: function inject() {
var _this = this;
if (this.injected) {
throw new Error('already injected stylesheet!');
}
if (isBrowser) {
// this section is just weird alchemy I found online off many sources
this.tags[0] = makeStyleTag();
// this weirdness brought to you by firefox
this.sheet = sheetForTag(this.tags[0]);
} else {
// server side 'polyfill'. just enough behavior to be useful.
this.sheet = {
cssRules: [],
insertRule: function insertRule(rule) {
// enough 'spec compliance' to be able to extract the rules later
// in other words, just the cssText field
var serverRule = { cssText: rule };
_this.sheet.cssRules.push(serverRule);
return { serverRule: serverRule, appendRule: function appendRule(newCss) {
return serverRule.cssText += newCss;
} };
}
};
}
this.injected = true;
}
}, {
key: 'speedy',
value: function speedy(bool) {
if (this.ctr !== 0) {
throw new Error('cannot change speedy mode after inserting any rule to sheet. Either call speedy(' + bool + ') earlier in your app, or call flush() before speedy(' + bool + ')');
}
this.isSpeedy = !!bool;
}
}, {
key: '_insert',
value: function _insert(rule) {
// this weirdness for perf, and chrome's weird bug
// https://stackoverflow.com/questions/20007992/chrome-suddenly-stopped-accepting-insertrule
try {
this.sheet.insertRule(rule, this.sheet.cssRules.length); // todo - correct index here
} catch (e) {
if (isDev) {
// might need beter dx for this
console.warn('whoops, illegal rule inserted', rule); //eslint-disable-line no-console
}
}
}
}, {
key: 'insert',
value: function insert(rule) {
var _this2 = this;
var insertedRule = void 0;
if (isBrowser) {
// this is the ultrafast version, works across browsers
if (this.isSpeedy && this.sheet.insertRule) {
this._insert(rule);
}
// more browser weirdness. I don't even know
else if (this.tags.length > 0 && last(this.tags).styleSheet) {
last(this.tags).styleSheet.cssText += rule;
} else {
(function () {
var textNode = document.createTextNode(rule);
last(_this2.tags).appendChild(textNode);
insertedRule = { textNode: textNode, appendRule: function appendRule(newCss) {
return textNode.appendData(newCss);
} };
if (!_this2.isSpeedy) {
// sighhh
_this2.sheet = sheetForTag(last(_this2.tags));
}
})();
}
} else {
// server side is pretty simple
insertedRule = this.sheet.insertRule(rule);
}
this.ctr++;
if (isBrowser && this.ctr % this.maxLength === 0) {
this.tags.push(makeStyleTag());
this.sheet = sheetForTag(last(this.tags));
}
return insertedRule;
}
}, {
key: 'flush',
value: function flush() {
if (isBrowser) {
this.tags.forEach(function (tag) {
return tag.parentNode.removeChild(tag);
});
this.tags = [];
this.sheet = null;
this.ctr = 0;
// todo - look for remnants in document.styleSheets
} else {
// simpler on server
this.sheet.cssRules = [];
}
this.injected = false;
}
}, {
key: 'rules',
value: function rules() {
if (!isBrowser) {
return this.sheet.cssRules;
}
var arr = [];
this.tags.forEach(function (tag) {
return arr.splice.apply(arr, [arr.length, 0].concat(_toConsumableArray(Array.from(sheetForTag(tag).cssRules))));
});
return arr;
}
}]);
return StyleSheet;
}();
/***/ },
/* 18 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = safeParse;
var _input = __webpack_require__(19);
var _input2 = _interopRequireDefault(_input);
var _safeParser = __webpack_require__(27);
var _safeParser2 = _interopRequireDefault(_safeParser);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function safeParse(css, opts) {
var input = new _input2.default(css, opts);
var parser = new _safeParser2.default(input);
parser.tokenize();
parser.loop();
return parser.root;
}
module.exports = exports['default'];
/***/ },
/* 19 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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; }; }();
// import PreviousMap from './previous-map';
var _cssSyntaxError = __webpack_require__(20);
var _cssSyntaxError2 = _interopRequireDefault(_cssSyntaxError);
var _path = __webpack_require__(25);
var _path2 = _interopRequireDefault(_path);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var sequence = 0;
/**
* @typedef {object} filePosition
* @property {string} file - path to file
* @property {number} line - source line in file
* @property {number} column - source column in file
*/
/**
* Represents the source CSS.
*
* @example
* const root = postcss.parse(css, { from: file });
* const input = root.source.input;
*/
var Input = function () {
/**
* @param {string} css - input CSS source
* @param {object} [opts] - {@link Processor#process} options
*/
function Input(css) {
var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
_classCallCheck(this, Input);
/**
* @member {string} - input CSS source
*
* @example
* const input = postcss.parse('a{}', { from: file }).input;
* input.css //=> "a{}";
*/
this.css = css.toString();
if (this.css[0] === '' || this.css[0] === '') {
this.css = this.css.slice(1);
}
if (opts.from) {
if (/^\w+:\/\//.test(opts.from)) {
/**
* @member {string} - The absolute path to the CSS source file
* defined with the `from` option.
*
* @example
* const root = postcss.parse(css, { from: 'a.css' });
* root.source.input.file //=> '/home/ai/a.css'
*/
this.file = opts.from;
} else {
this.file = _path2.default.resolve(opts.from);
}
}
/*
let map = new PreviousMap(this.css, opts);
if ( map.text ) {
/!**
* @member {PreviousMap} - The input source map passed from
* a compilation step before PostCSS
* (for example, from Sass compiler).
*
* @example
* root.source.input.map.consumer().sources //=> ['a.sass']
*!/
this.map = map;
let file = map.consumer().file;
if ( !this.file && file ) this.file = this.mapResolve(file);
}
*/
if (!this.file) {
sequence += 1;
/**
* @member {string} - The unique ID of the CSS source. It will be
* created if `from` option is not provided
* (because PostCSS does not know the file path).
*
* @example
* const root = postcss.parse(css);
* root.source.input.file //=> undefined
* root.source.input.id //=> "<input css 1>"
*/
this.id = '<input css ' + sequence + '>';
}
if (this.map) this.map.file = this.from;
}
_createClass(Input, [{
key: 'error',
value: function error(message, line, column) {
var opts = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
var result = void 0;
var origin = this.origin(line, column);
if (origin) {
result = new _cssSyntaxError2.default(message, origin.line, origin.column, origin.source, origin.file, opts.plugin);
} else {
result = new _cssSyntaxError2.default(message, line, column, this.css, this.file, opts.plugin);
}
result.input = { line: line, column: column, source: this.css };
if (this.file) result.input.file = this.file;
return result;
}
/**
* Reads the input source map and returns a symbol position
* in the input source (e.g., in a Sass file that was compiled
* to CSS before being passed to PostCSS).
*
* @param {number} line - line in input CSS
* @param {number} column - column in input CSS
*
* @return {filePosition} position in input source
*
* @example
* root.source.input.origin(1, 1) //=> { file: 'a.css', line: 3, column: 1 }
*/
}, {
key: 'origin',
value: function origin(line, column) {
if (!this.map) return false;
var consumer = this.map.consumer();
var from = consumer.originalPositionFor({ line: line, column: column });
if (!from.source) return false;
var result = {
file: this.mapResolve(from.source),
line: from.line,
column: from.column
};
var source = consumer.sourceContentFor(from.source);
if (source) result.source = source;
return result;
}
}, {
key: 'mapResolve',
value: function mapResolve(file) {
if (/^\w+:\/\//.test(file)) {
return file;
} else {
return _path2.default.resolve(this.map.consumer().sourceRoot || '.', file);
}
}
/**
* The CSS source identifier. Contains {@link Input#file} if the user
* set the `from` option, or {@link Input#id} if they did not.
* @type {string}
*
* @example
* const root = postcss.parse(css, { from: 'a.css' });
* root.source.input.from //=> "/home/ai/a.css"
*
* const root = postcss.parse(css);
* root.source.input.from //=> "<input css 1>"
*/
}, {
key: 'from',
get: function get() {
return this.file || this.id;
}
}]);
return Input;
}();
exports.default = Input;
module.exports = exports['default'];
/***/ },
/* 20 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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 _supportsColor = __webpack_require__(21);
var _supportsColor2 = _interopRequireDefault(_supportsColor);
var _terminalHighlight = __webpack_require__(22);
var _terminalHighlight2 = _interopRequireDefault(_terminalHighlight);
var _warnOnce = __webpack_require__(24);
var _warnOnce2 = _interopRequireDefault(_warnOnce);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/**
* The CSS parser throws this error for broken CSS.
*
* Custom parsers can throw this error for broken custom syntax using
* the {@link Node#error} method.
*
* PostCSS will use the input source map to detect the original error location.
* If you wrote a Sass file, compiled it to CSS and then parsed it with PostCSS,
* PostCSS will show the original position in the Sass file.
*
* If you need the position in the PostCSS input
* (e.g., to debug the previous compiler), use `error.input.file`.
*
* @example
* // Catching and checking syntax error
* try {
* postcss.parse('a{')
* } catch (error) {
* if ( error.name === 'CssSyntaxError' ) {
* error //=> CssSyntaxError
* }
* }
*
* @example
* // Raising error from plugin
* throw node.error('Unknown variable', { plugin: 'postcss-vars' });
*/
var CssSyntaxError = function () {
/**
* @param {string} message - error message
* @param {number} [line] - source line of the error
* @param {number} [column] - source column of the error
* @param {string} [source] - source code of the broken file
* @param {string} [file] - absolute path to the broken file
* @param {string} [plugin] - PostCSS plugin name, if error came from plugin
*/
function CssSyntaxError(message, line, column, source, file, plugin) {
_classCallCheck(this, CssSyntaxError);
/**
* @member {string} - Always equal to `'CssSyntaxError'`. You should
* always check error type
* by `error.name === 'CssSyntaxError'` instead of
* `error instanceof CssSyntaxError`, because
* npm could have several PostCSS versions.
*
* @example
* if ( error.name === 'CssSyntaxError' ) {
* error //=> CssSyntaxError
* }
*/
this.name = 'CssSyntaxError';
/**
* @member {string} - Error message.
*
* @example
* error.message //=> 'Unclosed block'
*/
this.reason = message;
if (file) {
/**
* @member {string} - Absolute path to the broken file.
*
* @example
* error.file //=> 'a.sass'
* error.input.file //=> 'a.css'
*/
this.file = file;
}
if (source) {
/**
* @member {string} - Source code of the broken file.
*
* @example
* error.source //=> 'a { b {} }'
* error.input.column //=> 'a b { }'
*/
this.source = source;
}
if (plugin) {
/**
* @member {string} - Plugin name, if error came from plugin.
*
* @example
* error.plugin //=> 'postcss-vars'
*/
this.plugin = plugin;
}
if (typeof line !== 'undefined' && typeof column !== 'undefined') {
/**
* @member {number} - Source line of the error.
*
* @example
* error.line //=> 2
* error.input.line //=> 4
*/
this.line = line;
/**
* @member {number} - Source column of the error.
*
* @example
* error.column //=> 1
* error.input.column //=> 4
*/
this.column = column;
}
this.setMessage();
if (Error.captureStackTrace) {
Error.captureStackTrace(this, CssSyntaxError);
}
}
_createClass(CssSyntaxError, [{
key: 'setMessage',
value: function setMessage() {
/**
* @member {string} - Full error text in the GNU error format
* with plugin, file, line and column.
*
* @example
* error.message //=> 'a.css:1:1: Unclosed block'
*/
this.message = this.plugin ? this.plugin + ': ' : '';
this.message += this.file ? this.file : '<css input>';
if (typeof this.line !== 'undefined') {
this.message += ':' + this.line + ':' + this.column;
}
this.message += ': ' + this.reason;
}
/**
* Returns a few lines of CSS source that caused the error.
*
* If the CSS has a