		@@ -7,61 +7,54 @@ (function (global, factory) {

		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; };
		function _extends() {
		_extends = Object.assign \|\| function (target) {
		for (var i = 1; i < arguments.length; i++) {
		var source = arguments[i];

		var isBrowser = (typeof window === "undefined" ? "undefined" : _typeof(window)) === "object" && (typeof document === "undefined" ? "undefined" : _typeof(document)) === 'object' && document.nodeType === 9;
		for (var key in source) {
		if (Object.prototype.hasOwnProperty.call(source, key)) {
		target[key] = source[key];
		}
		}
		}

		/**
		* Link rule with CSSStyleRule and nested rules with corresponding nested cssRules if both exists.
		*/
		function linkRule(rule, cssRule) {
		rule.renderable = cssRule;
		if (rule.rules && cssRule.cssRules) rule.rules.link(cssRule.cssRules);
		return target;
		};

		return _extends.apply(this, arguments);
		}

		var global$1 = (typeof global !== "undefined" ? global :
		typeof self !== "undefined" ? self :
		typeof window !== "undefined" ? window : {});
		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;
		};

		if (typeof global$1.setTimeout === 'function') ;
		if (typeof global$1.clearTimeout === 'function') ;
		var isBrowser = (typeof window === "undefined" ? "undefined" : _typeof(window)) === "object" && (typeof document === "undefined" ? "undefined" : _typeof(document)) === 'object' && document.nodeType === 9;

		// from https://github.com/kumavis/browser-process-hrtime/blob/master/index.js
		var performance = global$1.performance \|\| {};
		var performanceNow =
		performance.now \|\|
		performance.mozNow \|\|
		performance.msNow \|\|
		performance.oNow \|\|
		performance.webkitNow \|\|
		function(){ return (new Date()).getTime() };

		/**
		* 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.
		* Copyright 2014-2015, 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.
		*/

		var __DEV__ = "development" !== 'production';
		var warning = function warning() {};

		var warning = function() {};

		if (__DEV__) {
		warning = function(condition, format, args) {
		{
		warning = function warning(condition, format, args) {
		var len = arguments.length;
		args = new Array(len > 2 ? len - 2 : 0);

		for (var key = 2; key < len; key++) {
		args[key - 2] = arguments[key];
		}

		if (format === undefined) {
		throw new Error(
		'`warning(condition, format, ...args)` requires a warning ' +
		'message argument'
		);
		throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument');
		}

		if (format.length < 10 \|\| (/^[s\W]*$/).test(format)) {
		throw new Error(
		'The warning format should be able to uniquely identify this ' +
		'warning. Please, use a more descriptive format than: ' + format
		);
		if (format.length < 10 \|\| /^[s\W]*$/.test(format)) {
		throw new Error('The warning format should be able to uniquely identify this ' + 'warning. Please, use a more descriptive format than: ' + format);
		}
		@@ -71,9 +64,10 @@
		var argIndex = 0;
		var message = 'Warning: ' +
		format.replace(/%s/g, function() {
		return args[argIndex++];
		});
		var message = 'Warning: ' + format.replace(/%s/g, function () {
		return args[argIndex++];
		});

		if (typeof console !== 'undefined') {
		console.error(message);
		}

		try {
		@@ -83,3 +77,3 @@ // This error was thrown as a convenience so that you can use this stack
		throw new Error(message);
		} catch(x) {}
		} catch (x) {}
		}
		@@ -91,4 +85,135 @@ };

		var global$1 = typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {};

		function symbolObservablePonyfill(root) {
		var result;
		var Symbol = root.Symbol;

		if (typeof Symbol === 'function') {
		if (Symbol.observable) {
		result = Symbol.observable;
		} else {
		result = Symbol('observable');
		Symbol.observable = result;
		}
		} else {
		result = '@@observable';
		}

		return result;
		}

		var root;

		if (typeof self !== 'undefined') {
		root = self;
		} else if (typeof window !== 'undefined') {
		root = window;
		} else if (typeof global$1 !== 'undefined') {
		root = global$1;
		} else if (typeof module !== 'undefined') {
		root = module;
		} else {
		root = Function('return this')();
		}

		var result = symbolObservablePonyfill(root);

		var isArray = Array.isArray; // TODO: This should propably not be here, need to find a better place

		var isObservable = function isObservable(value) {
		return value && value[result] && value === value[result]();
		};

		function cloneStyle(style) {
		// Support empty values in case user ends up with them by accident.
		if (style == null) return style; // Support string value for SimpleRule.

		var typeOfStyle = typeof style;

		if (typeOfStyle === 'string' \|\| typeOfStyle === 'number' \|\| typeOfStyle === 'function') {
		return style;
		} // It is a CSSTOM value.
		// TODO will not work if instance comes from a different window.


		if (global$1.CSSStyleValue && style instanceof global$1.CSSStyleValue) {
		return style;
		} // Support array for FontFaceRule.


		if (isArray(style)) return style.map(cloneStyle); // Support Observable styles. Observables are immutable, so we don't need to
		// copy them.

		if (isObservable(style)) return style;
		var newStyle = {};

		for (var name in style) {
		var value = style[name];

		if (typeof value === 'object') {
		newStyle[name] = cloneStyle(value);
		continue;
		}

		newStyle[name] = value;
		}

		return newStyle;
		}

		/**
		* Create a rule instance.
		*/

		function createRule(name, decl, options) {
		if (name === void 0) {
		name = 'unnamed';
		}

		var jss = options.jss;
		var declCopy = cloneStyle(decl);
		var rule = jss.plugins.onCreateRule(name, declCopy, options);
		if (rule) return rule; // It is an at-rule and it has no instance.

		if (name[0] === '@') {
		warning_1(false, '[JSS] Unknown rule %s', name);
		}

		return null;
		}

		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);
		}
		}

		function _createClass(Constructor, protoProps, staticProps) {
		if (protoProps) _defineProperties(Constructor.prototype, protoProps);
		if (staticProps) _defineProperties(Constructor, staticProps);
		return Constructor;
		}

		function _inheritsLoose(subClass, superClass) {
		subClass.prototype = Object.create(superClass.prototype);
		subClass.prototype.constructor = subClass;
		subClass.__proto__ = superClass;
		}

		function _assertThisInitialized(self) {
		if (self === void 0) {
		throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
		}

		return self;
		}

		var join = function join(value, by) {
		var result = '';

		for (var i = 0; i < value.length; i++) {
		@@ -100,5 +225,5 @@ // Remove !important from the value, it will be readded later.
		}

		return result;
		};

		/**
		@@ -112,10 +237,12 @@ * Converts array values to string.
		*/
		function toCssValue(value) {
		var ignoreImportant = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;


		function toCssValue(value, ignoreImportant) {
		if (ignoreImportant === void 0) {
		ignoreImportant = false;
		}

		if (!Array.isArray(value)) return value;
		var cssValue = ''; // Support space separated values via `[['5px', '10px']]`.

		var cssValue = '';

		// Support space separated values via `[['5px', '10px']]`.
		if (Array.isArray(value[0])) {
		@@ -127,5 +254,5 @@ for (var i = 0; i < value.length; i++) {
		}
		} else cssValue = join(value, ', ');
		} else cssValue = join(value, ', '); // Add !important, because it was ignored.

		// Add !important, because it was ignored.

		if (!ignoreImportant && value[value.length - 1] === '!important') {
		@@ -144,25 +271,27 @@ cssValue += ' !important';
		var result = '';

		for (var index = 0; index < indent; index++) {
		result += ' ';
		}return result + str;
		}

		return result + str;
		}

		/**
		* Converts a Rule to CSS string.
		*/
		function toCss(selector, style) {
		var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};


		function toCss(selector, style, options) {
		if (options === void 0) {
		options = {};
		}

		var result = '';

		if (!style) return result;

		var _options$indent = options.indent,
		indent = _options$indent === undefined ? 0 : _options$indent;
		var _options = options,
		_options$indent = _options.indent,
		indent = _options$indent === void 0 ? 0 : _options$indent;
		var fallbacks = style.fallbacks;
		if (selector) indent++; // Apply fallbacks first.


		indent++;

		// Apply fallbacks first.
		if (fallbacks) {
		@@ -173,6 +302,9 @@ // Array syntax {fallbacks: [{prop: value}]}
		var fallback = fallbacks[index];

		for (var prop in fallback) {
		var value = fallback[prop];

		if (value != null) {
		result += '\n' + indentStr(prop + ': ' + toCssValue(value) + ';', indent);
		if (result) result += '\n';
		result += "" + indentStr(prop + ": " + toCssValue(value) + ";", indent);
		}
		@@ -185,4 +317,6 @@ }
		var _value = fallbacks[_prop];

		if (_value != null) {
		result += '\n' + indentStr(_prop + ': ' + toCssValue(_value) + ';', indent);
		if (result) result += '\n';
		result += "" + indentStr(_prop + ": " + toCssValue(_value) + ";", indent);
		}
		@@ -195,185 +329,175 @@ }
		var _value2 = style[_prop2];

		if (_value2 != null && _prop2 !== 'fallbacks') {
		result += '\n' + indentStr(_prop2 + ': ' + toCssValue(_value2) + ';', indent);
		if (result) result += '\n';
		result += "" + indentStr(_prop2 + ": " + toCssValue(_value2) + ";", indent);
		}
		}
		} // Allow empty style in this case, because properties will be added dynamically.

		// Allow empty style in this case, because properties will be added dynamically.
		if (!result && !options.allowEmpty) return result;

		if (!result && !options.allowEmpty) return result; // When rule is being stringified before selector was defined.

		if (!selector) return result;
		indent--;
		result = indentStr(selector + ' {' + result + '\n', indent) + indentStr('}', indent);

		return result;
		if (result) result = "\n" + result + "\n";
		return indentStr(selector + " {" + result, indent) + indentStr('}', indent);
		}

		var _typeof$1 = 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 escapeRegex = /([[\].#*$><+~=\|^:(),"'`\s])/g;
		var escape = (function (str) {
		var nativeEscape = typeof CSS !== 'undefined' && CSS.escape;
		return nativeEscape ? nativeEscape(str) : str.replace(escapeRegex, '\\$1');
		});

		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 StyleRule = function () {
		function StyleRule(key, style, options) {
		classCallCheck(this, StyleRule);
		var BaseStyleRule =
		/#__PURE__/
		function () {
		function BaseStyleRule(key, style, options) {
		this.type = 'style';
		this.key = void 0;
		this.isProcessed = false;
		this.style = void 0;
		this.renderer = void 0;
		this.renderable = void 0;
		this.options = void 0;
		var sheet = options.sheet,
		Renderer = options.Renderer,
		selector = options.selector;

		Renderer = options.Renderer;
		this.key = key;
		this.options = options;
		this.style = style;
		if (selector) this.selectorText = selector;
		this.renderer = sheet ? sheet.renderer : new Renderer();
		}

		/**
		* Set selector string.
		* Attention: use this with caution. Most browsers didn't implement
		* selectorText setter, so this may result in rerendering of entire Style Sheet.
		* Get or set a style property.
		*/


		createClass(StyleRule, [{
		key: 'prop',
		var _proto = BaseStyleRule.prototype;

		_proto.prop = function prop(name, value, options) {
		// It's a getter.
		if (value === undefined) return this.style[name]; // Don't do anything if the value has not changed.

		/**
		* Get or set a style property.
		*/
		value: function prop(name, value) {
		// It's a getter.
		if (value === undefined) return this.style[name];
		var force = options ? options.force : false;
		if (!force && this.style[name] === value) return this;
		var newValue = value;

		// Don't do anything if the value has not changed.
		if (this.style[name] === value) return this;
		if (!options \|\| options.process !== false) {
		newValue = this.options.jss.plugins.onChangeValue(value, name, this);
		}

		value = this.options.jss.plugins.onChangeValue(value, name, this);
		var isEmpty = newValue == null \|\| newValue === false;
		var isDefined = name in this.style; // Value is empty and wasn't defined before.

		var isEmpty = value == null \|\| value === false;
		var isDefined = name in this.style;
		if (isEmpty && !isDefined) return this; // We are going to remove this value.

		// Value is empty and wasn't defined before.
		if (isEmpty && !isDefined) return this;
		var remove = isEmpty && isDefined;
		if (remove) delete this.style[name];else this.style[name] = newValue; // Renderable is defined if StyleSheet option `link` is true.

		// We are going to remove this value.
		var remove = isEmpty && isDefined;
		if (this.renderable) {
		if (remove) this.renderer.removeProperty(this.renderable, name);else this.renderer.setProperty(this.renderable, name, newValue);
		return this;
		}

		if (remove) delete this.style[name];else this.style[name] = value;
		var sheet = this.options.sheet;

		// Renderable is defined if StyleSheet option `link` is true.
		if (this.renderable) {
		if (remove) this.renderer.removeProperty(this.renderable, name);else this.renderer.setProperty(this.renderable, name, value);
		return this;
		}
		if (sheet && sheet.attached) {
		warning_1(false, '[JSS] Rule is not linked. Missing sheet option "link: true".');
		}

		var sheet = this.options.sheet;
		return this;
		};

		if (sheet && sheet.attached) {
		warning_1(false, 'Rule is not linked. Missing sheet option "link: true".');
		}
		return this;
		return BaseStyleRule;
		}();
		var StyleRule =
		/#__PURE__/
		function (_BaseStyleRule) {
		_inheritsLoose(StyleRule, _BaseStyleRule);

		function StyleRule(key, style, options) {
		var _this;

		_this = _BaseStyleRule.call(this, key, style, options) \|\| this;
		_this.selectorText = void 0;
		_this.id = void 0;
		_this.renderable = void 0;
		var selector = options.selector,
		scoped = options.scoped,
		sheet = options.sheet,
		generateId = options.generateId;

		if (selector) {
		_this.selectorText = selector;
		} else if (scoped !== false) {
		_this.id = generateId(_assertThisInitialized(_assertThisInitialized(_this)), sheet);
		_this.selectorText = "." + escape(_this.id);
		}

		/**
		* Apply rule to an element inline.
		*/
		return _this;
		}
		/**
		* Set selector string.
		* Attention: use this with caution. Most browsers didn't implement
		* selectorText setter, so this may result in rerendering of entire Style Sheet.
		*/

		}, {
		key: 'applyTo',
		value: function applyTo(renderable) {
		var json = this.toJSON();
		for (var prop in json) {
		this.renderer.setProperty(renderable, prop, json[prop]);
		}return this;

		var _proto2 = StyleRule.prototype;

		/**
		* Apply rule to an element inline.
		*/
		_proto2.applyTo = function applyTo(renderable) {
		var json = this.toJSON();

		for (var prop in json) {
		this.renderer.setProperty(renderable, prop, json[prop]);
		}

		/**
		* Returns JSON representation of the rule.
		* Fallbacks are not supported.
		* Useful for inline styles.
		*/
		return this;
		};
		/**
		* Returns JSON representation of the rule.
		* Fallbacks are not supported.
		* Useful for inline styles.
		*/

		}, {
		key: 'toJSON',
		value: function toJSON() {
		var json = {};
		for (var prop in this.style) {
		var value = this.style[prop];
		if ((typeof value === 'undefined' ? 'undefined' : _typeof$1(value)) !== 'object') json[prop] = value;else if (Array.isArray(value)) json[prop] = toCssValue(value);
		}
		return json;

		_proto2.toJSON = function toJSON() {
		var json = {};

		for (var prop in this.style) {
		var value = this.style[prop];
		if (typeof value !== 'object') json[prop] = value;else if (Array.isArray(value)) json[prop] = toCssValue(value);
		}

		/**
		* Generates a CSS string.
		*/
		return json;
		};
		/**
		* Generates a CSS string.
		*/

		}, {
		key: 'toString',
		value: function toString(options) {
		var sheet = this.options.sheet;

		var link = sheet ? sheet.options.link : false;
		var opts = link ? _extends({}, options, { allowEmpty: true }) : options;
		return toCss(this.selector, this.style, opts);
		}
		}, {
		key: 'selector',
		set: function set$$1(selector) {
		_proto2.toString = function toString(options) {
		var sheet = this.options.sheet;
		var link = sheet ? sheet.options.link : false;
		var opts = link ? _extends({}, options, {
		allowEmpty: true
		}) : options;
		return toCss(this.selectorText, this.style, opts);
		};

		_createClass(StyleRule, [{
		key: "selector",
		set: function set(selector) {
		if (selector === this.selectorText) return;

		this.selectorText = selector;

		if (!this.renderable) return;
		var hasChanged = this.renderer.setSelector(this.renderable, selector); // If selector setter is not implemented, rerender the rule.

		var hasChanged = this.renderer.setSelector(this.renderable, selector);

		// If selector setter is not implemented, rerender the rule.
		if (!hasChanged && this.renderable) {
		var renderable = this.renderer.replaceRule(this.renderable, this);
		if (renderable) this.renderable = renderable;
		if (!hasChanged) {
		this.renderer.replaceRule(this.renderable, this);
		}
		}

		/**
		@@ -383,1104 +507,1002 @@ * Get selector string.
		,
		get: function get$$1() {
		get: function get() {
		return this.selectorText;
		}
		}]);

		return StyleRule;
		}();
		}(BaseStyleRule);
		var pluginStyleRule = {
		onCreateRule: function onCreateRule(name, style, options) {
		if (name[0] === '@' \|\| options.parent && options.parent.type === 'keyframes') {
		return null;
		}

		function unwrapExports (x) {
		return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
		}
		return new StyleRule(name, style, options);
		}
		};

		function createCommonjsModule(fn, module) {
		return module = { exports: {} }, fn(module, module.exports), module.exports;
		}
		var defaultToStringOptions = {
		indent: 1,
		children: true
		};
		var atRegExp = /@([\w-]+)/;
		/**
		* Conditional rule for @media, @supports
		*/

		var ponyfill = createCommonjsModule(function (module, exports) {
		var ConditionalRule =
		/#__PURE__/
		function () {
		function ConditionalRule(key, styles, options) {
		this.type = 'conditional';
		this.at = void 0;
		this.key = void 0;
		this.rules = void 0;
		this.options = void 0;
		this.isProcessed = false;
		this.renderable = void 0;
		this.key = key;
		var atMatch = key.match(atRegExp);
		this.at = atMatch ? atMatch[1] : 'unknown';
		this.options = options;
		this.rules = new RuleList(_extends({}, options, {
		parent: this
		}));

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports['default'] = symbolObservablePonyfill;
		function symbolObservablePonyfill(root) {
		var result;
		var _Symbol = root.Symbol;
		for (var name in styles) {
		this.rules.add(name, styles[name]);
		}

		if (typeof _Symbol === 'function') {
		if (_Symbol.observable) {
		result = _Symbol.observable;
		} else {
		result = _Symbol('observable');
		_Symbol.observable = result;
		}
		} else {
		result = '@@observable';
		}
		this.rules.process();
		}
		/**
		* Get a rule.
		*/

		return result;
		}});

		unwrapExports(ponyfill);
		var _proto = ConditionalRule.prototype;

		var lib = createCommonjsModule(function (module, exports) {
		_proto.getRule = function getRule(name) {
		return this.rules.get(name);
		};
		/**
		* Get index of a rule.
		*/

		Object.defineProperty(exports, "__esModule", {
		value: true
		});

		_proto.indexOf = function indexOf(rule) {
		return this.rules.indexOf(rule);
		};
		/**
		* Create and register rule, run plugins.
		*/


		var _ponyfill2 = _interopRequireDefault(ponyfill);
		_proto.addRule = function addRule(name, style, options) {
		var rule = this.rules.add(name, style, options);
		if (!rule) return null;
		this.options.jss.plugins.onProcessRule(rule);
		return rule;
		};
		/**
		* Generates a CSS string.
		*/

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

		var root; /* global window */
		_proto.toString = function toString(options) {
		if (options === void 0) {
		options = defaultToStringOptions;
		}

		if (options.children === false) {
		return this.key + " {}";
		}

		if (typeof self !== 'undefined') {
		root = self;
		} else if (typeof window !== 'undefined') {
		root = window;
		} else if (typeof global$1 !== 'undefined') {
		root = global$1;
		} else {
		root = module;
		}
		var children = this.rules.toString(options);
		return children ? this.key + " {\n" + children + "\n}" : '';
		};

		var result = (0, _ponyfill2['default'])(root);
		exports['default'] = result;
		});
		return ConditionalRule;
		}();
		var keyRegExp = /@media\|@supports\s+/;
		var pluginConditionalRule = {
		onCreateRule: function onCreateRule(key, styles, options) {
		return keyRegExp.test(key) ? new ConditionalRule(key, styles, options) : null;
		}
		};

		unwrapExports(lib);
		var defaultToStringOptions$1 = {
		indent: 1,
		children: true
		};
		var nameRegExp = /@keyframes\s+([\w-]+)/;
		/**
		* Rule for @keyframes
		*/

		var symbolObservable = lib;
		var KeyframesRule =
		/#__PURE__/
		function () {
		function KeyframesRule(key, frames, options) {
		this.type = 'keyframes';
		this.at = '@keyframes';
		this.key = void 0;
		this.name = void 0;
		this.id = void 0;
		this.rules = void 0;
		this.options = void 0;
		this.isProcessed = false;
		this.renderable = void 0;
		var nameMatch = key.match(nameRegExp);

		var isObservable = (function (value) {
		return value && value[symbolObservable] && value === value[symbolObservable]();
		});
		if (nameMatch && nameMatch[1]) {
		this.name = nameMatch[1];
		} else {
		this.name = 'noname';
		warning_1(false, '[JSS] Bad keyframes name %s', key);
		}

		var isArray = Array.isArray;
		this.key = this.type + "-" + this.name;
		this.options = options;
		var scoped = options.scoped,
		sheet = options.sheet,
		generateId = options.generateId;
		this.id = scoped === false ? this.name : generateId(this, sheet);
		this.rules = new RuleList(_extends({}, options, {
		parent: this
		}));

		for (var name in frames) {
		this.rules.add(name, frames[name], _extends({}, options, {
		parent: this
		}));
		}

		function cloneStyle(style) {
		// Support empty values in case user ends up with them by accident.
		if (style == null) return style;

		// Support string value for SimpleRule.
		var typeOfStyle = typeof style === 'undefined' ? 'undefined' : _typeof$1(style);

		if (typeOfStyle === 'string' \|\| typeOfStyle === 'number' \|\| typeOfStyle === 'function') {
		return style;
		this.rules.process();
		}
		/**
		* Generates a CSS string.
		*/

		// Support array for FontFaceRule.
		if (isArray(style)) return style.map(cloneStyle);

		// Support Observable styles. Observables are immutable, so we don't need to
		// copy them.
		if (isObservable(style)) return style;
		var _proto = KeyframesRule.prototype;

		var newStyle = {};
		for (var name in style) {
		var value = style[name];
		if ((typeof value === 'undefined' ? 'undefined' : _typeof$1(value)) === 'object') {
		newStyle[name] = cloneStyle(value);
		continue;
		_proto.toString = function toString(options) {
		if (options === void 0) {
		options = defaultToStringOptions$1;
		}
		newStyle[name] = value;
		}

		return newStyle;
		}
		if (options.children === false) {
		return this.at + " " + this.id + " {}";
		}

		var children = this.rules.toString(options);
		if (children) children = "\n" + children + "\n";
		return this.at + " " + this.id + " {" + children + "}";
		};

		return KeyframesRule;
		}();
		var keyRegExp$1 = /@keyframes\s+/;
		var refRegExp = /\$([\w-]+)/;
		/**
		* Create a rule instance.
		* Replace the reference for a animation name.
		*/
		function createRule() {
		var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'unnamed';
		var decl = arguments[1];
		var options = arguments[2];
		var jss = options.jss;

		var declCopy = cloneStyle(decl);
		var replaceRef = function replaceRef(style, prop, keyframes) {
		var value = style[prop];

		var rule = jss.plugins.onCreateRule(name, declCopy, options);
		if (rule) return rule;
		if (typeof value === 'string') {
		var ref = refRegExp.exec(value);
		if (!ref) return;

		// It is an at-rule and it has no instance.
		if (name[0] === '@') {
		warning_1(false, '[JSS] Unknown at-rule %s', name);
		if (ref[1] in keyframes) {
		style[prop] = value.replace(ref[0], keyframes[ref[1]]);
		} else {
		warning_1(false, '[JSS] Referenced keyframes rule "%s" is not defined.', ref[1]);
		}
		}
		};

		return new StyleRule(name, declCopy, options);
		}
		var pluginKeyframesRule = {
		onCreateRule: function onCreateRule(key, frames, options) {
		return keyRegExp$1.test(key) ? new KeyframesRule(key, frames, options) : null;
		},
		// Animation name ref replacer.
		onProcessStyle: function onProcessStyle(style, rule, sheet) {
		if (rule.type !== 'style' \|\| !sheet) return style;
		if ('animation-name' in style) replaceRef(style, 'animation-name', sheet.keyframes);
		if ('animation' in style) replaceRef(style, 'animation', sheet.keyframes);
		return style;
		}
		};

		var CSS = global$1.CSS;
		var KeyframeRule =
		/#__PURE__/
		function (_BaseStyleRule) {
		_inheritsLoose(KeyframeRule, _BaseStyleRule);

		var env$1 = "development";
		function KeyframeRule() {
		var _this;

		var escapeRegex = /([[\].#*$><+~=\|^:(),"'`])/g;
		for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
		args[_key] = arguments[_key];
		}

		var escape = (function (str) {
		// We don't need to escape it in production, because we are not using user's
		// input for selectors, we are generating a valid selector.
		if (env$1 === 'production') return str;

		if (!CSS \|\| !CSS.escape) {
		return str.replace(escapeRegex, '\\$1');
		_this = _BaseStyleRule.call.apply(_BaseStyleRule, [this].concat(args)) \|\| this;
		_this.renderable = void 0;
		return _this;
		}

		return CSS.escape(str);
		});
		var _proto = KeyframeRule.prototype;

		/**
		* Contains rules objects and allows adding/removing etc.
		* Is used for e.g. by `StyleSheet` or `ConditionalRule`.
		*/
		var RuleList = function () {
		/**
		* Generates a CSS string.
		*/
		_proto.toString = function toString(options) {
		var sheet = this.options.sheet;
		var link = sheet ? sheet.options.link : false;
		var opts = link ? _extends({}, options, {
		allowEmpty: true
		}) : options;
		return toCss(this.key, this.style, opts);
		};

		// Original styles object.
		function RuleList(options) {
		var _this = this;
		return KeyframeRule;
		}(BaseStyleRule);
		var pluginKeyframeRule = {
		onCreateRule: function onCreateRule(key, style, options) {
		if (options.parent && options.parent.type === 'keyframes') {
		return new KeyframeRule(key, style, options);
		}

		classCallCheck(this, RuleList);
		this.map = {};
		this.raw = {};
		this.index = [];
		return null;
		}
		};

		this.update = function (name, data) {
		var _options = _this.options,
		plugins = _options.jss.plugins,
		sheet = _options.sheet;

		if (typeof name === 'string') {
		plugins.onUpdate(data, _this.get(name), sheet);
		} else {
		for (var index = 0; index < _this.index.length; index++) {
		plugins.onUpdate(name, _this.index[index], sheet);
		}
		}
		};

		var FontFaceRule =
		/#__PURE__/
		function () {
		function FontFaceRule(key, style, options) {
		this.type = 'font-face';
		this.at = '@font-face';
		this.key = void 0;
		this.style = void 0;
		this.options = void 0;
		this.isProcessed = false;
		this.renderable = void 0;
		this.key = key;
		this.style = style;
		this.options = options;
		this.classes = options.classes;
		}

		/**
		* Create and register rule.
		*
		* Will not render after Style Sheet was rendered the first time.
		* Generates a CSS string.
		*/


		// Used to ensure correct rules order.
		var _proto = FontFaceRule.prototype;

		// Rules registry for access by .get() method.
		// It contains the same rule registered by name and by selector.
		_proto.toString = function toString(options) {
		if (Array.isArray(this.style)) {
		var str = '';

		for (var index = 0; index < this.style.length; index++) {
		str += toCss(this.key, this.style[index]);
		if (this.style[index + 1]) str += '\n';
		}

		createClass(RuleList, [{
		key: 'add',
		value: function add(name, decl, options) {
		var _options2 = this.options,
		parent = _options2.parent,
		sheet = _options2.sheet,
		jss = _options2.jss,
		Renderer = _options2.Renderer,
		generateClassName = _options2.generateClassName;
		return str;
		}

		return toCss(this.key, this.style, options);
		};

		options = _extends({
		classes: this.classes,
		parent: parent,
		sheet: sheet,
		jss: jss,
		Renderer: Renderer,
		generateClassName: generateClassName
		}, options);
		return FontFaceRule;
		}();
		var pluginFontFaceRule = {
		onCreateRule: function onCreateRule(key, style, options) {
		return key === '@font-face' ? new FontFaceRule(key, style, options) : null;
		}
		};

		if (!options.selector && this.classes[name]) {
		options.selector = '.' + escape(this.classes[name]);
		}
		var ViewportRule =
		/#__PURE__/
		function () {
		function ViewportRule(key, style, options) {
		this.type = 'viewport';
		this.at = '@viewport';
		this.key = void 0;
		this.style = void 0;
		this.options = void 0;
		this.isProcessed = false;
		this.renderable = void 0;
		this.key = key;
		this.style = style;
		this.options = options;
		}
		/**
		* Generates a CSS string.
		*/

		this.raw[name] = decl;

		var rule = createRule(name, decl, options);
		var _proto = ViewportRule.prototype;

		var className = void 0;
		_proto.toString = function toString(options) {
		return toCss(this.key, this.style, options);
		};

		if (!options.selector && rule instanceof StyleRule) {
		className = generateClassName(rule, sheet);
		rule.selector = '.' + escape(className);
		}
		return ViewportRule;
		}();
		var pluginViewportRule = {
		onCreateRule: function onCreateRule(key, style, options) {
		return key === '@viewport' \|\| key === '@-ms-viewport' ? new ViewportRule(key, style, options) : null;
		}
		};

		this.register(rule, className);
		var SimpleRule =
		/#__PURE__/
		function () {
		function SimpleRule(key, value, options) {
		this.type = 'simple';
		this.key = void 0;
		this.value = void 0;
		this.options = void 0;
		this.isProcessed = false;
		this.renderable = void 0;
		this.key = key;
		this.value = value;
		this.options = options;
		}
		/**
		* Generates a CSS string.
		*/
		// eslint-disable-next-line no-unused-vars

		var index = options.index === undefined ? this.index.length : options.index;
		this.index.splice(index, 0, rule);

		return rule;
		}
		var _proto = SimpleRule.prototype;

		/**
		* Get a rule.
		*/
		_proto.toString = function toString(options) {
		if (Array.isArray(this.value)) {
		var str = '';

		}, {
		key: 'get',
		value: function get$$1(name) {
		return this.map[name];
		}
		for (var index = 0; index < this.value.length; index++) {
		str += this.key + " " + this.value[index] + ";";
		if (this.value[index + 1]) str += '\n';
		}

		/**
		* Delete a rule.
		*/

		}, {
		key: 'remove',
		value: function remove(rule) {
		this.unregister(rule);
		this.index.splice(this.indexOf(rule), 1);
		return str;
		}

		/**
		* Get index of a rule.
		*/
		return this.key + " " + this.value + ";";
		};

		}, {
		key: 'indexOf',
		value: function indexOf(rule) {
		return this.index.indexOf(rule);
		}
		return SimpleRule;
		}();
		var keysMap = {
		'@charset': true,
		'@import': true,
		'@namespace': true
		};
		var pluginSimpleRule = {
		onCreateRule: function onCreateRule(key, value, options) {
		return key in keysMap ? new SimpleRule(key, value, options) : null;
		}
		};

		/**
		* Run `onProcessRule()` plugins on every rule.
		*/
		var plugins = [pluginStyleRule, pluginConditionalRule, pluginKeyframesRule, pluginKeyframeRule, pluginFontFaceRule, pluginViewportRule, pluginSimpleRule];

		}, {
		key: 'process',
		value: function process() {
		var plugins = this.options.jss.plugins;
		// We need to clone array because if we modify the index somewhere else during a loop
		// we end up with very hard-to-track-down side effects.
		var defaultUpdateOptions = {
		process: true
		};
		var forceUpdateOptions = {
		force: true,
		process: true
		/**
		* Contains rules objects and allows adding/removing etc.
		* Is used for e.g. by `StyleSheet` or `ConditionalRule`.
		*/

		this.index.slice(0).forEach(plugins.onProcessRule, plugins);
		}
		};

		/**
		* Register a rule in `.map` and `.classes` maps.
		*/
		var RuleList =
		/#__PURE__/
		function () {
		// Rules registry for access by .get() method.
		// It contains the same rule registered by name and by selector.
		// Original styles object.
		// Used to ensure correct rules order.
		function RuleList(options) {
		this.map = {};
		this.raw = {};
		this.index = [];
		this.options = void 0;
		this.classes = void 0;
		this.keyframes = void 0;
		this.options = options;
		this.classes = options.classes;
		this.keyframes = options.keyframes;
		}
		/**
		* Create and register rule.
		*
		* Will not render after Style Sheet was rendered the first time.
		*/

		}, {
		key: 'register',
		value: function register(rule, className) {
		this.map[rule.key] = rule;
		if (rule instanceof StyleRule) {
		this.map[rule.selector] = rule;
		if (className) this.classes[rule.key] = className;
		}
		}

		/**
		* Unregister a rule.
		*/
		var _proto = RuleList.prototype;

		}, {
		key: 'unregister',
		value: function unregister(rule) {
		delete this.map[rule.key];
		if (rule instanceof StyleRule) {
		delete this.map[rule.selector];
		delete this.classes[rule.key];
		}
		}
		_proto.add = function add(key, decl, ruleOptions) {
		var _this$options = this.options,
		parent = _this$options.parent,
		sheet = _this$options.sheet,
		jss = _this$options.jss,
		Renderer = _this$options.Renderer,
		generateId = _this$options.generateId,
		scoped = _this$options.scoped;

		/**
		* Update the function values with a new data.
		*/
		var options = _extends({
		classes: this.classes,
		parent: parent,
		sheet: sheet,
		jss: jss,
		Renderer: Renderer,
		generateId: generateId,
		scoped: scoped
		}, ruleOptions); // We need to save the original decl before creating the rule
		// because cache plugin needs to use it as a key to return a cached rule.

		}, {
		key: 'link',

		this.raw[key] = decl;

		/**
		* Link renderable rules with CSSRuleList.
		*/
		value: function link(cssRules) {
		var map = this.options.sheet.renderer.getUnescapedKeysMap(this.index);

		for (var i = 0; i < cssRules.length; i++) {
		var cssRule = cssRules[i];
		var _key = this.options.sheet.renderer.getKey(cssRule);
		if (map[_key]) _key = map[_key];
		var rule = this.map[_key];
		if (rule) linkRule(rule, cssRule);
		}
		if (key in this.classes) {
		// For e.g. rules inside of @media container
		options.selector = "." + escape(this.classes[key]);
		}

		/**
		* Convert rules to a CSS string.
		*/
		var rule = createRule(key, decl, options);
		if (!rule) return null;
		this.register(rule);
		var index = options.index === undefined ? this.index.length : options.index;
		this.index.splice(index, 0, rule);
		return rule;
		};
		/**
		* Get a rule.
		*/

		}, {
		key: 'toString',
		value: function toString(options) {
		var str = '';
		var sheet = this.options.sheet;

		var link = sheet ? sheet.options.link : false;
		_proto.get = function get(name) {
		return this.map[name];
		};
		/**
		* Delete a rule.
		*/

		for (var index = 0; index < this.index.length; index++) {
		var rule = this.index[index];
		var css = rule.toString(options);

		// No need to render an empty rule.
		if (!css && !link) continue;
		_proto.remove = function remove(rule) {
		this.unregister(rule);
		delete this.raw[rule.key];
		this.index.splice(this.indexOf(rule), 1);
		};
		/**
		* Get index of a rule.
		*/

		if (str) str += '\n';
		str += css;
		}

		return str;
		}
		}]);
		return RuleList;
		}();
		_proto.indexOf = function indexOf(rule) {
		return this.index.indexOf(rule);
		};
		/**
		* Run `onProcessRule()` plugins on every rule.
		*/

		/* eslint-disable-next-line no-use-before-define */

		var StyleSheet = function () {
		function StyleSheet(styles, options) {
		var _this = this;
		_proto.process = function process() {
		var plugins$$1 = this.options.jss.plugins; // We need to clone array because if we modify the index somewhere else during a loop
		// we end up with very hard-to-track-down side effects.

		classCallCheck(this, StyleSheet);
		this.index.slice(0).forEach(plugins$$1.onProcessRule, plugins$$1);
		};
		/**
		* Register a rule in `.map` and `.classes` maps.
		*/

		this.update = function (name, data) {
		if (typeof name === 'string') {
		_this.rules.update(name, data);
		} else {
		_this.rules.update(name);
		}
		return _this;
		};

		this.attached = false;
		this.deployed = false;
		this.linked = false;
		this.classes = {};
		this.options = _extends({}, options, {
		sheet: this,
		parent: this,
		classes: this.classes
		});
		this.renderer = new options.Renderer(this);
		this.rules = new RuleList(this.options);
		_proto.register = function register(rule) {
		this.map[rule.key] = rule;

		for (var _name in styles) {
		this.rules.add(_name, styles[_name]);
		if (rule instanceof StyleRule) {
		this.map[rule.selector] = rule;
		if (rule.id) this.classes[rule.key] = rule.id;
		} else if (rule instanceof KeyframesRule && this.keyframes) {
		this.keyframes[rule.name] = rule.id;
		}

		this.rules.process();
		}

		};
		/**
		* Attach renderable to the render tree.
		* Unregister a rule.
		*/


		createClass(StyleSheet, [{
		key: 'attach',
		value: function attach() {
		if (this.attached) return this;
		if (!this.deployed) this.deploy();
		this.renderer.attach();
		if (!this.linked && this.options.link) this.link();
		this.attached = true;
		return this;
		}
		_proto.unregister = function unregister(rule) {
		delete this.map[rule.key];

		/**
		* Remove renderable from render tree.
		*/

		}, {
		key: 'detach',
		value: function detach() {
		if (!this.attached) return this;
		this.renderer.detach();
		this.attached = false;
		return this;
		if (rule instanceof StyleRule) {
		delete this.map[rule.selector];
		delete this.classes[rule.key];
		} else if (rule instanceof KeyframesRule) {
		delete this.keyframes[rule.name];
		}
		};
		/**
		* Update the function values with a new data.
		*/

		/**
		* Add a rule to the current stylesheet.
		* Will insert a rule also after the stylesheet has been rendered first time.
		*/

		}, {
		key: 'addRule',
		value: function addRule(name, decl, options) {
		var queue = this.queue;
		_proto.update = function update() {
		var name;
		var data;
		var options;

		// Plugins can create rules.
		// In order to preserve the right order, we need to queue all `.addRule` calls,
		// which happen after the first `rules.add()` call.
		if (typeof (arguments.length <= 0 ? undefined : arguments[0]) === 'string') {
		name = arguments.length <= 0 ? undefined : arguments[0]; // $FlowFixMe

		if (this.attached && !queue) this.queue = [];
		data = arguments.length <= 1 ? undefined : arguments[1]; // $FlowFixMe

		var rule = this.rules.add(name, decl, options);
		this.options.jss.plugins.onProcessRule(rule);
		options = arguments.length <= 2 ? undefined : arguments[2];
		} else {
		data = arguments.length <= 0 ? undefined : arguments[0]; // $FlowFixMe

		if (this.attached) {
		if (!this.deployed) return rule;
		// Don't insert rule directly if there is no stringified version yet.
		// It will be inserted all together when .attach is called.
		if (queue) queue.push(rule);else {
		this.insertRule(rule);
		if (this.queue) {
		this.queue.forEach(this.insertRule, this);
		this.queue = undefined;
		}
		}
		return rule;
		}

		// We can't add rules to a detached style node.
		// We will redeploy the sheet once user will attach it.
		this.deployed = false;

		return rule;
		options = arguments.length <= 1 ? undefined : arguments[1];
		name = null;
		}

		/**
		* Insert rule into the StyleSheet
		*/

		}, {
		key: 'insertRule',
		value: function insertRule(rule) {
		var renderable = this.renderer.insertRule(rule);
		if (renderable && this.options.link) linkRule(rule, renderable);
		if (name) {
		this.onUpdate(data, this.get(name), options);
		} else {
		for (var index = 0; index < this.index.length; index++) {
		this.onUpdate(data, this.index[index], options);
		}
		}
		};
		/**
		* Execute plugins, update rule props.
		*/

		/**
		* Create and add rules.
		* Will render also after Style Sheet was rendered the first time.
		*/

		}, {
		key: 'addRules',
		value: function addRules(styles, options) {
		var added = [];
		for (var _name2 in styles) {
		added.push(this.addRule(_name2, styles[_name2], options));
		}
		return added;
		_proto.onUpdate = function onUpdate(data, rule, options) {
		if (options === void 0) {
		options = defaultUpdateOptions;
		}

		/**
		* Get a rule by name.
		*/
		var _this$options2 = this.options,
		plugins$$1 = _this$options2.jss.plugins,
		sheet = _this$options2.sheet; // It is a rules container like for e.g. ConditionalRule.

		}, {
		key: 'getRule',
		value: function getRule(name) {
		return this.rules.get(name);
		if (rule.rules instanceof RuleList) {
		rule.rules.update(data, options);
		return;
		}

		/**
		* Delete a rule by name.
		* Returns `true`: if rule has been deleted from the DOM.
		*/
		var styleRule = rule;
		var style = styleRule.style;
		plugins$$1.onUpdate(data, rule, sheet, options); // We rely on a new `style` ref in case it was mutated during onUpdate hook.

		}, {
		key: 'deleteRule',
		value: function deleteRule(name) {
		var rule = this.rules.get(name);
		if (options.process && style && style !== styleRule.style) {
		// We need to run the plugins in case new `style` relies on syntax plugins.
		plugins$$1.onProcessStyle(styleRule.style, styleRule, sheet); // Update, remove and add props.

		if (!rule) return false;
		for (var prop in styleRule.style) {
		var nextValue = styleRule.style[prop];
		var prevValue = style[prop]; // Since we use `force` option, we should optimize the `.prop()` call
		// for cases where the primive value has not changed.
		// It can't do that check, because it doesn't have the previous `style`
		// object.

		this.rules.remove(rule);

		if (this.attached && rule.renderable) {
		return this.renderer.deleteRule(rule.renderable);
		if (nextValue !== prevValue) {
		styleRule.prop(prop, nextValue, forceUpdateOptions);
		}
		}

		return true;
		}
		};
		/**
		* Convert rules to a CSS string.
		*/

		/**
		* Get index of a rule.
		*/

		}, {
		key: 'indexOf',
		value: function indexOf(rule) {
		return this.rules.indexOf(rule);
		}
		_proto.toString = function toString(options) {
		var str = '';
		var sheet = this.options.sheet;
		var link = sheet ? sheet.options.link : false;

		/**
		* Deploy pure CSS string to a renderable.
		*/
		for (var index = 0; index < this.index.length; index++) {
		var rule = this.index[index];
		var css = rule.toString(options); // No need to render an empty rule.

		}, {
		key: 'deploy',
		value: function deploy() {
		this.renderer.deploy();
		this.deployed = true;
		return this;
		if (!css && !link) continue;
		if (str) str += '\n';
		str += css;
		}

		/**
		* Link renderable CSS rules from sheet with their corresponding models.
		*/
		return str;
		};

		}, {
		key: 'link',
		value: function link() {
		var cssRules = this.renderer.getRules();
		return RuleList;
		}();

		// Is undefined when VirtualRenderer is used.
		if (cssRules) this.rules.link(cssRules);
		this.linked = true;
		return this;
		}
		var StyleSheet =
		/#__PURE__/
		function () {
		function StyleSheet(styles, options) {
		this.options = void 0;
		this.deployed = void 0;
		this.attached = void 0;
		this.rules = void 0;
		this.renderer = void 0;
		this.classes = void 0;
		this.keyframes = void 0;
		this.queue = void 0;
		this.attached = false;
		this.deployed = false;
		this.classes = {};
		this.keyframes = {};
		this.options = _extends({}, options, {
		sheet: this,
		parent: this,
		classes: this.classes,
		keyframes: this.keyframes
		});
		this.renderer = new options.Renderer(this);
		this.rules = new RuleList(this.options);

		/**
		* Update the function values with a new data.
		*/

		}, {
		key: 'toString',


		/**
		* Convert rules to a CSS string.
		*/
		value: function toString(options) {
		return this.rules.toString(options);
		for (var name in styles) {
		this.rules.add(name, styles[name]);
		}
		}]);
		return StyleSheet;
		}();

		var PluginsRegistry = function () {
		function PluginsRegistry() {
		classCallCheck(this, PluginsRegistry);
		this.hooks = {
		onCreateRule: [],
		onProcessRule: [],
		onProcessStyle: [],
		onProcessSheet: [],
		onChangeValue: [],
		onUpdate: []

		/**
		* Call `onCreateRule` hooks and return an object if returned by a hook.
		*/
		};
		this.rules.process();
		}
		/**
		* Attach renderable to the render tree.
		*/

		createClass(PluginsRegistry, [{
		key: 'onCreateRule',
		value: function onCreateRule(name, decl, options) {
		for (var i = 0; i < this.hooks.onCreateRule.length; i++) {
		var rule = this.hooks.onCreateRule[i](name, decl, options);
		if (rule) return rule;
		}
		return null;
		}

		/**
		* Call `onProcessRule` hooks.
		*/
		var _proto = StyleSheet.prototype;

		}, {
		key: 'onProcessRule',
		value: function onProcessRule(rule) {
		if (rule.isProcessed) return;
		var sheet = rule.options.sheet;
		_proto.attach = function attach() {
		if (this.attached) return this;
		this.renderer.attach();
		this.attached = true; // Order is important, because we can't use insertRule API if style element is not attached.

		for (var i = 0; i < this.hooks.onProcessRule.length; i++) {
		this.hooks.onProcessRule[i](rule, sheet);
		}
		if (!this.deployed) this.deploy();
		return this;
		};
		/**
		* Remove renderable from render tree.
		*/

		// $FlowFixMe
		if (rule.style) this.onProcessStyle(rule.style, rule, sheet);

		rule.isProcessed = true;
		}
		_proto.detach = function detach() {
		if (!this.attached) return this;
		this.renderer.detach();
		this.attached = false;
		return this;
		};
		/**
		* Add a rule to the current stylesheet.
		* Will insert a rule also after the stylesheet has been rendered first time.
		*/

		/**
		* Call `onProcessStyle` hooks.
		*/

		}, {
		key: 'onProcessStyle',
		value: function onProcessStyle(style, rule, sheet) {
		var nextStyle = style;
		_proto.addRule = function addRule(name, decl, options) {
		var queue = this.queue; // Plugins can create rules.
		// In order to preserve the right order, we need to queue all `.addRule` calls,
		// which happen after the first `rules.add()` call.

		for (var i = 0; i < this.hooks.onProcessStyle.length; i++) {
		nextStyle = this.hooks.onProcessStyle[i](nextStyle, rule, sheet);
		// $FlowFixMe
		rule.style = nextStyle;
		}
		}
		if (this.attached && !queue) this.queue = [];
		var rule = this.rules.add(name, decl, options);
		if (!rule) return null;
		this.options.jss.plugins.onProcessRule(rule);

		/**
		* Call `onProcessSheet` hooks.
		*/
		if (this.attached) {
		if (!this.deployed) return rule; // Don't insert rule directly if there is no stringified version yet.
		// It will be inserted all together when .attach is called.

		}, {
		key: 'onProcessSheet',
		value: function onProcessSheet(sheet) {
		for (var i = 0; i < this.hooks.onProcessSheet.length; i++) {
		this.hooks.onProcessSheet[i](sheet);
		}
		}
		if (queue) queue.push(rule);else {
		this.insertRule(rule);

		/**
		* Call `onUpdate` hooks.
		*/

		}, {
		key: 'onUpdate',
		value: function onUpdate(data, rule, sheet) {
		for (var i = 0; i < this.hooks.onUpdate.length; i++) {
		this.hooks.onUpdate[i](data, rule, sheet);
		if (this.queue) {
		this.queue.forEach(this.insertRule, this);
		this.queue = undefined;
		}
		}
		}
		return rule;
		} // We can't add rules to a detached style node.
		// We will redeploy the sheet once user will attach it.

		/**
		* Call `onChangeValue` hooks.
		*/

		}, {
		key: 'onChangeValue',
		value: function onChangeValue(value, prop, rule) {
		var processedValue = value;
		for (var i = 0; i < this.hooks.onChangeValue.length; i++) {
		processedValue = this.hooks.onChangeValue[i](processedValue, prop, rule);
		}
		return processedValue;
		}
		this.deployed = false;
		return rule;
		};
		/**
		* Insert rule into the StyleSheet
		*/

		/**
		* Register a plugin.
		* If function is passed, it is a shortcut for `{onProcessRule}`.
		*/

		}, {
		key: 'use',
		value: function use(plugin) {
		for (var name in plugin) {
		if (this.hooks[name]) this.hooks[name].push(plugin[name]);else warning_1(false, '[JSS] Unknown hook "%s".', name);
		}
		}
		}]);
		return PluginsRegistry;
		}();

		var SimpleRule = function () {
		function SimpleRule(key, value, options) {
		classCallCheck(this, SimpleRule);
		this.type = 'simple';
		this.isProcessed = false;

		this.key = key;
		this.value = value;
		this.options = options;
		}

		_proto.insertRule = function insertRule(rule) {
		this.renderer.insertRule(rule);
		};
		/**
		* Generates a CSS string.
		* Create and add rules.
		* Will render also after Style Sheet was rendered the first time.
		*/
		// eslint-disable-next-line no-unused-vars


		createClass(SimpleRule, [{
		key: 'toString',
		value: function toString(options) {
		if (Array.isArray(this.value)) {
		var str = '';
		for (var index = 0; index < this.value.length; index++) {
		str += this.key + ' ' + this.value[index] + ';';
		if (this.value[index + 1]) str += '\n';
		}
		return str;
		}
		_proto.addRules = function addRules(styles, options) {
		var added = [];

		return this.key + ' ' + this.value + ';';
		for (var name in styles) {
		var rule = this.addRule(name, styles[name], options);
		if (rule) added.push(rule);
		}
		}]);
		return SimpleRule;
		}();

		/**
		* Rule for @keyframes
		*/
		var KeyframesRule = function () {
		function KeyframesRule(key, frames, options) {
		classCallCheck(this, KeyframesRule);
		this.type = 'keyframes';
		this.isProcessed = false;
		return added;
		};
		/**
		* Get a rule by name.
		*/

		this.key = key;
		this.options = options;
		this.rules = new RuleList(_extends({}, options, { parent: this }));

		for (var name in frames) {
		this.rules.add(name, frames[name], _extends({}, this.options, {
		parent: this,
		selector: name
		}));
		}

		this.rules.process();
		}

		_proto.getRule = function getRule(name) {
		return this.rules.get(name);
		};
		/**
		* Generates a CSS string.
		* Delete a rule by name.
		* Returns `true`: if rule has been deleted from the DOM.
		*/


		createClass(KeyframesRule, [{
		key: 'toString',
		value: function toString() {
		var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { indent: 1 };
		_proto.deleteRule = function deleteRule(name) {
		var rule = this.rules.get(name);
		if (!rule) return false;
		this.rules.remove(rule);

		var inner = this.rules.toString(options);
		if (inner) inner += '\n';
		return this.key + ' {\n' + inner + '}';
		if (this.attached && rule.renderable) {
		return this.renderer.deleteRule(rule.renderable);
		}
		}]);
		return KeyframesRule;
		}();

		/**
		* Conditional rule for @media, @supports
		*/
		var ConditionalRule = function () {
		function ConditionalRule(key, styles, options) {
		classCallCheck(this, ConditionalRule);
		this.type = 'conditional';
		this.isProcessed = false;
		return true;
		};
		/**
		* Get index of a rule.
		*/

		this.key = key;
		this.options = options;
		this.rules = new RuleList(_extends({}, options, { parent: this }));

		for (var name in styles) {
		this.rules.add(name, styles[name]);
		}
		_proto.indexOf = function indexOf(rule) {
		return this.rules.indexOf(rule);
		};
		/**
		* Deploy pure CSS string to a renderable.
		*/

		this.rules.process();
		}

		_proto.deploy = function deploy() {
		this.renderer.deploy();
		this.deployed = true;
		return this;
		};
		/**
		* Get a rule.
		* Update the function values with a new data.
		*/


		createClass(ConditionalRule, [{
		key: 'getRule',
		value: function getRule(name) {
		return this.rules.get(name);
		}
		_proto.update = function update() {
		var _this$rules;

		/**
		* Get index of a rule.
		*/
		(_this$rules = this.rules).update.apply(_this$rules, arguments);

		}, {
		key: 'indexOf',
		value: function indexOf(rule) {
		return this.rules.indexOf(rule);
		}
		return this;
		};
		/**
		* Convert rules to a CSS string.
		*/

		/**
		* Create and register rule, run plugins.
		*/

		}, {
		key: 'addRule',
		value: function addRule(name, style, options) {
		var rule = this.rules.add(name, style, options);
		this.options.jss.plugins.onProcessRule(rule);
		return rule;
		}
		_proto.toString = function toString(options) {
		return this.rules.toString(options);
		};

		/**
		* Generates a CSS string.
		*/

		}, {
		key: 'toString',
		value: function toString() {
		var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { indent: 1 };

		var inner = this.rules.toString(options);
		return inner ? this.key + ' {\n' + inner + '\n}' : '';
		}
		}]);
		return ConditionalRule;
		return StyleSheet;
		}();

		var FontFaceRule = function () {
		function FontFaceRule(key, style, options) {
		classCallCheck(this, FontFaceRule);
		this.type = 'font-face';
		this.isProcessed = false;

		this.key = key;
		this.style = style;
		this.options = options;
		var PluginsRegistry =
		/#__PURE__/
		function () {
		function PluginsRegistry() {
		this.plugins = {
		internal: [],
		external: []
		};
		this.registry = void 0;
		}

		var _proto = PluginsRegistry.prototype;

		/**
		* Generates a CSS string.
		* Call `onCreateRule` hooks and return an object if returned by a hook.
		*/
		_proto.onCreateRule = function onCreateRule(name, decl, options) {
		for (var i = 0; i < this.registry.onCreateRule.length; i++) {
		var rule = this.registry.onCreateRule[i](name, decl, options);
		if (rule) return rule;
		}

		return null;
		};
		/**
		* Call `onProcessRule` hooks.
		*/

		createClass(FontFaceRule, [{
		key: 'toString',
		value: function toString(options) {
		if (Array.isArray(this.style)) {
		var str = '';
		for (var index = 0; index < this.style.length; index++) {
		str += toCss(this.key, this.style[index]);
		if (this.style[index + 1]) str += '\n';
		}
		return str;
		}

		return toCss(this.key, this.style, options);
		}
		}]);
		return FontFaceRule;
		}();
		_proto.onProcessRule = function onProcessRule(rule) {
		if (rule.isProcessed) return;
		var sheet = rule.options.sheet;

		var ViewportRule = function () {
		function ViewportRule(key, style, options) {
		classCallCheck(this, ViewportRule);
		this.type = 'viewport';
		this.isProcessed = false;
		for (var i = 0; i < this.registry.onProcessRule.length; i++) {
		this.registry.onProcessRule[i](rule, sheet);
		} // $FlowFixMe

		this.key = key;
		this.style = style;
		this.options = options;
		}

		if (rule.style) this.onProcessStyle(rule.style, rule, sheet);
		rule.isProcessed = true;
		};
		/**
		* Generates a CSS string.
		* Call `onProcessStyle` hooks.
		*/


		createClass(ViewportRule, [{
		key: 'toString',
		value: function toString(options) {
		return toCss(this.key, this.style, options);
		_proto.onProcessStyle = function onProcessStyle(style, rule, sheet) {
		for (var i = 0; i < this.registry.onProcessStyle.length; i++) {
		// $FlowFixMe
		rule.style = this.registry.onProcessStyle[i](rule.style, rule, sheet);
		}
		}]);
		return ViewportRule;
		}();
		};
		/**
		* Call `onProcessSheet` hooks.
		*/

		var classes = {
		'@charset': SimpleRule,
		'@import': SimpleRule,
		'@namespace': SimpleRule,
		'@keyframes': KeyframesRule,
		'@media': ConditionalRule,
		'@supports': ConditionalRule,
		'@font-face': FontFaceRule,
		'@viewport': ViewportRule,
		'@-ms-viewport': ViewportRule

		_proto.onProcessSheet = function onProcessSheet(sheet) {
		for (var i = 0; i < this.registry.onProcessSheet.length; i++) {
		this.registry.onProcessSheet[i](sheet);
		}
		};
		/**
		* Generate plugins which will register all rules.
		* Call `onUpdate` hooks.
		*/
		};var plugins = Object.keys(classes).map(function (key) {
		// https://jsperf.com/indexof-vs-substr-vs-regex-at-the-beginning-3
		var re = new RegExp('^' + key);
		var RuleClass = classes[key];
		var onCreateRule = function onCreateRule(name, decl, options) {
		return re.test(name) ? new RuleClass(name, decl, options) : null;
		};
		return { onCreateRule: onCreateRule };
		});

		var observablesPlugin = {
		onCreateRule: function onCreateRule(name, decl, options) {
		if (!isObservable(decl)) return null;

		// Cast `decl` to `Observable`, since it passed the type guard.
		var style$ = decl;
		_proto.onUpdate = function onUpdate(data, rule, sheet, options) {
		for (var i = 0; i < this.registry.onUpdate.length; i++) {
		this.registry.onUpdate[i](data, rule, sheet, options);
		}
		};
		/**
		* Call `onChangeValue` hooks.
		*/

		var rule = createRule(name, {}, options);

		// TODO
		// Call `stream.subscribe()` returns a subscription, which should be explicitly
		// unsubscribed from when we know this sheet is no longer needed.
		style$.subscribe(function (style) {
		for (var prop in style) {
		rule.prop(prop, style[prop]);
		}
		});
		_proto.onChangeValue = function onChangeValue(value, prop, rule) {
		var processedValue = value;

		return rule;
		},
		onProcessRule: function onProcessRule(rule) {
		if (!(rule instanceof StyleRule)) return;
		var styleRule = rule;
		var style = styleRule.style;
		for (var i = 0; i < this.registry.onChangeValue.length; i++) {
		processedValue = this.registry.onChangeValue[i](processedValue, prop, rule);
		}

		var _loop = function _loop(prop) {
		var value = style[prop];
		if (!isObservable(value)) return 'continue';
		delete style[prop];
		value.subscribe({
		next: function next(nextValue) {
		styleRule.prop(prop, nextValue);
		}
		});
		};
		return processedValue;
		};
		/**
		* Register a plugin.
		*/

		for (var prop in style) {
		var _ret = _loop(prop);

		if (_ret === 'continue') continue;
		_proto.use = function use(newPlugin, options) {
		if (options === void 0) {
		options = {
		queue: 'external'
		};
		}
		}
		};

		// A symbol replacement.
		var now = Date.now();
		var fnValuesNs = 'fnValues' + now;
		var fnStyleNs = 'fnStyle' + ++now;
		var plugins = this.plugins[options.queue]; // Avoids applying same plugin twice, at least based on ref.

		var functionsPlugin = {
		onCreateRule: function onCreateRule(name, decl, options) {
		if (typeof decl !== 'function') return null;
		var rule = createRule(name, {}, options);
		rule[fnStyleNs] = decl;
		return rule;
		},
		onProcessStyle: function onProcessStyle(style, rule) {
		var fn = {};
		for (var prop in style) {
		var value = style[prop];
		if (typeof value !== 'function') continue;
		delete style[prop];
		fn[prop] = value;
		}
		rule = rule;
		rule[fnValuesNs] = fn;
		return style;
		},
		onUpdate: function onUpdate(data, rule) {
		// It is a rules container like for e.g. ConditionalRule.
		if (rule.rules instanceof RuleList) {
		rule.rules.update(data);
		if (plugins.indexOf(newPlugin) !== -1) {
		return;
		}
		if (!(rule instanceof StyleRule)) return;

		rule = rule;

		// If we have a fn values map, it is a rule with function values.
		if (rule[fnValuesNs]) {
		for (var prop in rule[fnValuesNs]) {
		rule.prop(prop, rule[fnValuesNs][prop](data));
		plugins.push(newPlugin);
		this.registry = this.plugins.external.concat(this.plugins.internal).reduce(function (registry, plugin) {
		for (var name in plugin) {
		if (name in registry) {
		registry[name].push(plugin[name]);
		} else warning_1(false, '[JSS] Unknown hook "%s".', name);
		}
		}

		rule = rule;
		return registry;
		}, {
		onCreateRule: [],
		onProcessRule: [],
		onProcessStyle: [],
		onProcessSheet: [],
		onChangeValue: [],
		onUpdate: []
		});
		};

		var fnStyle = rule[fnStyleNs];
		return PluginsRegistry;
		}();

		// If we have a style function, the entire rule is dynamic and style object
		// will be returned from that function.
		if (fnStyle) {
		var style = fnStyle(data);
		for (var _prop in style) {
		rule.prop(_prop, style[_prop]);
		}
		}
		}
		};

		/**
		* Sheets registry to access them all at one place.
		*/
		var SheetsRegistry = function () {
		var SheetsRegistry =
		/#__PURE__/
		function () {
		function SheetsRegistry() {
		classCallCheck(this, SheetsRegistry);
		this.registry = [];
		}

		createClass(SheetsRegistry, [{
		key: 'add',
		var _proto = SheetsRegistry.prototype;

		/**
		* Register a Style Sheet.
		*/
		_proto.add = function add(sheet) {
		var registry = this.registry;
		var index = sheet.options.index;
		if (registry.indexOf(sheet) !== -1) return;

		/**
		* Register a Style Sheet.
		*/
		value: function add(sheet) {
		var registry = this.registry;
		var index = sheet.options.index;
		if (registry.length === 0 \|\| index >= this.index) {
		registry.push(sheet);
		return;
		} // Find a position.


		if (registry.indexOf(sheet) !== -1) return;

		if (registry.length === 0 \|\| index >= this.index) {
		registry.push(sheet);
		for (var i = 0; i < registry.length; i++) {
		if (registry[i].options.index > index) {
		registry.splice(i, 0, sheet);
		return;
		}

		// Find a position.
		for (var i = 0; i < registry.length; i++) {
		if (registry[i].options.index > index) {
		registry.splice(i, 0, sheet);
		return;
		}
		}
		}
		};
		/**
		* Reset the registry.
		*/

		/**
		* Reset the registry.
		*/

		}, {
		key: 'reset',
		value: function reset() {
		this.registry = [];
		}
		_proto.reset = function reset() {
		this.registry = [];
		};
		/**
		* Remove a Style Sheet.
		*/

		/**
		* Remove a Style Sheet.
		*/

		}, {
		key: 'remove',
		value: function remove(sheet) {
		var index = this.registry.indexOf(sheet);
		this.registry.splice(index, 1);
		}
		_proto.remove = function remove(sheet) {
		var index = this.registry.indexOf(sheet);
		this.registry.splice(index, 1);
		};
		/**
		* Convert all attached sheets to a CSS string.
		*/

		/**
		* Convert all attached sheets to a CSS string.
		*/

		}, {
		key: 'toString',
		value: function toString(options) {
		return this.registry.filter(function (sheet) {
		return sheet.attached;
		}).map(function (sheet) {
		return sheet.toString(options);
		}).join('\n');
		}
		}, {
		key: 'index',
		_proto.toString = function toString(options) {
		return this.registry.filter(function (sheet) {
		return sheet.attached;
		}).map(function (sheet) {
		return sheet.toString(options);
		}).join('\n');
		};

		_createClass(SheetsRegistry, [{
		key: "index",

		@@ -1490,6 +1512,7 @@ /**
		*/
		get: function get$$1() {
		get: function get() {
		return this.registry.length === 0 ? 0 : this.registry[this.registry.length - 1].options.index;
		}
		}]);

		return SheetsRegistry;
		@@ -1504,17 +1527,14 @@ }();
		*/

		var sheets = new SheetsRegistry();

		var ns = '2f1acc6c3a606b082e5eef5e54414ffb';
		if (global$1[ns] == null) global$1[ns] = 0;

		// Bundle may contain multiple JSS versions at the same time. In order to identify
		if (global$1[ns] == null) global$1[ns] = 0; // Bundle may contain multiple JSS versions at the same time. In order to identify
		// the current version with just one short number and use it for classes generation
		// we use a counter. Also it is more accurate, because user can manually reevaluate
		// the module.

		var moduleId = global$1[ns]++;

		var maxRules = 1e10;

		var env$2 = "development";

		/**
		@@ -1525,6 +1545,6 @@ * Returns a function which generates unique class names based on counters.
		*/
		var createGenerateClassNameDefault = (function () {

		var createGenerateIdDefault = (function () {
		var ruleCounter = 0;
		var defaultPrefix = env$2 === 'production' ? 'c' : '';

		var defaultPrefix = '';
		return function (rule, sheet) {
		@@ -1545,7 +1565,3 @@ ruleCounter += 1;

		if (env$2 === 'production') {
		return '' + prefix + moduleId + jssId + ruleCounter;
		}

		return prefix + rule.key + '-' + moduleId + (jssId && '-' + jssId) + '-' + ruleCounter;
		return prefix + rule.key + "-" + moduleId + (jssId && "-" + jssId) + "-" + ruleCounter;
		};
		@@ -1558,3 +1574,3 @@ });
		var memoize = function memoize(fn) {
		var value = void 0;
		var value;
		return function () {
		@@ -1565,8 +1581,15 @@ if (!value) value = fn();
		};

		/**
		* Get a style property value.
		*/


		function getPropertyValue(cssRule, prop) {
		try {
		// Support CSSTOM.
		if ('attributeStyleMap' in cssRule) {
		// $FlowFixMe
		return cssRule.attributeStyleMap.get(prop);
		}

		return cssRule.style.getPropertyValue(prop);
		@@ -1578,6 +1601,7 @@ } catch (err) {
		}

		/**
		* Set a style property.
		*/


		function setProperty(cssRule, prop, value) {
		@@ -1594,5 +1618,11 @@ try {
		}
		} // Support CSSTOM.


		if ('attributeStyleMap' in cssRule) {
		// $FlowFixMe
		cssRule.attributeStyleMap.set(prop, cssValue);
		} else {
		cssRule.style.setProperty(prop, cssValue);
		}

		cssRule.style.setProperty(prop, cssValue);
		} catch (err) {
		@@ -1602,11 +1632,19 @@ // IE may throw if property is unknown.
		}

		return true;
		}

		/**
		* Remove a style property.
		*/


		function removeProperty(cssRule, prop) {
		try {
		cssRule.style.removeProperty(prop);
		// Support CSSTOM.
		if ('attributeStyleMap' in cssRule) {
		// $FlowFixMe
		cssRule.attributeStyleMap.delete(prop);
		} else {
		cssRule.style.removeProperty(prop);
		}
		} catch (err) {
		@@ -1616,111 +1654,30 @@ warning_1(false, '[JSS] DOMException "%s" was thrown. Tried to remove property "%s".', err.message, prop);
		}

		var CSSRuleTypes = {
		STYLE_RULE: 1,
		KEYFRAMES_RULE: 7

		/**
		* Get the CSS Rule key.
		*/

		};var getKey = function () {
		var extractKey = function extractKey(cssText) {
		var from = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
		return cssText.substr(from, cssText.indexOf('{') - 1);
		};

		return function (cssRule) {
		if (cssRule.type === CSSRuleTypes.STYLE_RULE) return cssRule.selectorText;
		if (cssRule.type === CSSRuleTypes.KEYFRAMES_RULE) {
		var name = cssRule.name;

		if (name) return '@keyframes ' + name;

		// There is no rule.name in the following browsers:
		// - IE 9
		// - Safari 7.1.8
		// - Mobile Safari 9.0.0
		var cssText = cssRule.cssText;

		return '@' + extractKey(cssText, cssText.indexOf('keyframes'));
		}

		// Conditionals.
		return extractKey(cssRule.cssText);
		};
		}();

		/**
		* Set the selector.
		*/


		function setSelector(cssRule, selectorText) {
		cssRule.selectorText = selectorText;
		cssRule.selectorText = selectorText; // Return false if setter was not successful.
		// Currently works in chrome only.

		// Return false if setter was not successful.
		// Currently works in chrome only.
		return cssRule.selectorText === selectorText;
		}

		/**
		* Gets the `head` element upon the first call and caches it.
		* We assume it can't be null.
		*/


		var getHead = memoize(function () {
		return document.head \|\| document.getElementsByTagName('head')[0];
		return document.querySelector('head');
		});

		/**
		* Gets a map of rule keys, where the property is an unescaped key and value
		* is a potentially escaped one.
		* It is used to identify CSS rules and the corresponding JSS rules. As an identifier
		* for CSSStyleRule we normally use `selectorText`. Though if original selector text
		* contains escaped code points e.g. `:not(#\\20)`, CSSOM will compile it to `:not(# )`
		* and so CSS rule's `selectorText` won't match JSS rule selector.
		*
		* https://www.w3.org/International/questions/qa-escapes#cssescapes
		* Find attached sheet with an index higher than the passed one.
		*/
		var getUnescapedKeysMap = function () {
		var style = void 0;
		var isAttached = false;

		return function (rules) {
		var map = {};
		// https://github.com/facebook/flow/issues/2696
		if (!style) style = document.createElement('style');
		for (var i = 0; i < rules.length; i++) {
		var rule = rules[i];
		if (!(rule instanceof StyleRule)) continue;
		var selector = rule.selector;
		// Only unescape selector over CSSOM if it contains a back slash.

		if (selector && selector.indexOf('\\') !== -1) {
		// Lazilly attach when needed.
		if (!isAttached) {
		getHead().appendChild(style);
		isAttached = true;
		}
		style.textContent = selector + ' {}';
		var _style = style,
		sheet = _style.sheet;

		if (sheet) {
		var cssRules = sheet.cssRules;

		if (cssRules) map[cssRules[0].selectorText] = rule.key;
		}
		}
		}
		if (isAttached) {
		getHead().removeChild(style);
		isAttached = false;
		}
		return map;
		};
		}();

		/**
		* Find attached sheet with an index higher than the passed one.
		*/
		function findHigherSheet(registry, options) {
		for (var i = 0; i < registry.length; i++) {
		var sheet = registry[i];

		if (sheet.attached && sheet.options.index > options.index && sheet.options.insertionPoint === options.insertionPoint) {
		@@ -1730,11 +1687,14 @@ return sheet;
		}

		return null;
		}

		/**
		* Find attached sheet with the highest index.
		*/


		function findHighestSheet(registry, options) {
		for (var i = registry.length - 1; i >= 0; i--) {
		var sheet = registry[i];

		if (sheet.attached && sheet.options.insertionPoint === options.insertionPoint) {
		@@ -1744,12 +1704,16 @@ return sheet;
		}

		return null;
		}

		/**
		* Find a comment with "jss" inside.
		*/


		function findCommentNode(text) {
		var head = getHead();

		for (var i = 0; i < head.childNodes.length; i++) {
		var node = head.childNodes[i];

		if (node.nodeType === 8 && node.nodeValue.trim() === text) {
		@@ -1759,2 +1723,3 @@ return node;
		}

		return null;
		@@ -1769,14 +1734,25 @@ }


		if (registry.length > 0) {
		// Try to insert before the next higher sheet.
		var sheet = findHigherSheet(registry, options);
		if (sheet) return sheet.renderer.element;

		// Otherwise insert after the last attached.
		if (sheet) {
		return {
		parent: sheet.renderer.element.parentNode,
		node: sheet.renderer.element
		};
		} // Otherwise insert after the last attached.


		sheet = findHighestSheet(registry, options);
		if (sheet) return sheet.renderer.element.nextElementSibling;
		}

		// Try to find a comment placeholder if registry is empty.
		if (sheet) {
		return {
		parent: sheet.renderer.element.parentNode,
		node: sheet.renderer.element.nextSibling
		};
		}
		} // Try to find a comment placeholder if registry is empty.


		var insertionPoint = options.insertionPoint;
		@@ -1786,42 +1762,47 @@
		var comment = findCommentNode(insertionPoint);
		if (comment) return comment.nextSibling;
		// If user specifies an insertion point and it can't be found in the document -

		if (comment) {
		return {
		parent: comment.parentNode,
		node: comment.nextSibling
		};
		} // If user specifies an insertion point and it can't be found in the document -
		// bad specificity issues may appear.


		warning_1(insertionPoint === 'jss', '[JSS] Insertion point "%s" not found.', insertionPoint);
		}

		return null;
		return false;
		}

		/**
		* Insert style element into the DOM.
		*/


		function insertStyle(style, options) {
		var insertionPoint = options.insertionPoint;
		var nextNode = findPrevNode(options);

		var prevNode = findPrevNode(options);
		if (nextNode !== false && nextNode.parent) {
		nextNode.parent.insertBefore(style, nextNode.node);
		return;
		} // Works with iframes and any node types.

		if (prevNode) {
		var parentNode = prevNode.parentNode;

		if (parentNode) parentNode.insertBefore(style, prevNode);
		return;
		}

		// Works with iframes and any node types.
		if (insertionPoint && typeof insertionPoint.nodeType === 'number') {
		// https://stackoverflow.com/questions/41328728/force-casting-in-flow
		var insertionPointElement = insertionPoint;
		var _parentNode = insertionPointElement.parentNode;

		if (_parentNode) _parentNode.insertBefore(style, insertionPointElement.nextSibling);else warning_1(false, '[JSS] Insertion point is not in the DOM.');
		var parentNode = insertionPointElement.parentNode;
		if (parentNode) parentNode.insertBefore(style, insertionPointElement.nextSibling);else warning_1(false, '[JSS] Insertion point is not in the DOM.');
		return;
		}

		getHead().insertBefore(style, prevNode);
		getHead().appendChild(style);
		}

		/**
		* Read jss nonce setting from the page if the user has set it.
		*/


		var getNonce = memoize(function () {
		@@ -1832,5 +1813,30 @@ var node = document.querySelector('meta[property="csp-nonce"]');

		var DomRenderer = function () {
		var _insertRule = function insertRule(container, rule, index) {
		if (index === void 0) {
		index = container.cssRules.length;
		}

		try {
		if ('insertRule' in container) {
		var c = container;
		c.insertRule(rule, index);
		} // Keyframes rule.
		else if ('appendRule' in container) {
		var _c = container;

		_c.appendRule(rule);
		}
		} catch (err) {
		warning_1(false, '[JSS] Can not insert an unsupported rule \n\r%s', rule);
		return false;
		}

		return container.cssRules[index];
		};

		var DomRenderer =
		/#__PURE__/
		function () {
		// HTMLStyleElement needs fixing https://github.com/facebook/flow/issues/2696
		function DomRenderer(sheet) {
		classCallCheck(this, DomRenderer);
		this.getPropertyValue = getPropertyValue;
		@@ -1840,9 +1846,7 @@ this.setProperty = setProperty;
		this.setSelector = setSelector;
		this.getKey = getKey;
		this.getUnescapedKeysMap = getUnescapedKeysMap;
		this.element = void 0;
		this.sheet = void 0;
		this.hasInsertedRules = false;

		// There is no sheet when the renderer is used from a standalone StyleRule.
		if (sheet) sheets.add(sheet);

		this.sheet = sheet;
		@@ -1862,3 +1866,2 @@
		}

		/**
		@@ -1869,123 +1872,129 @@ * Insert style element into render tree.

		// HTMLStyleElement needs fixing https://github.com/facebook/flow/issues/2696
		var _proto = DomRenderer.prototype;

		_proto.attach = function attach() {
		// In the case the element node is external and it is already in the DOM.
		if (this.element.parentNode \|\| !this.sheet) return;
		insertStyle(this.element, this.sheet.options); // When rules are inserted using `insertRule` API, after `sheet.detach().attach()`
		// browsers remove those rules.
		// TODO figure out if its a bug and if it is known.
		// Workaround is to redeploy the sheet.

		createClass(DomRenderer, [{
		key: 'attach',
		value: function attach() {
		// In the case the element node is external and it is already in the DOM.
		if (this.element.parentNode \|\| !this.sheet) return;
		if (this.hasInsertedRules) {
		this.hasInsertedRules = false;
		this.deploy();
		}
		};
		/**
		* Remove style element from render tree.
		*/

		// When rules are inserted using `insertRule` API, after `sheet.detach().attach()`
		// browsers remove those rules.
		// TODO figure out if its a bug and if it is known.
		// Workaround is to redeploy the sheet before attaching as a string.
		if (this.hasInsertedRules) {
		this.deploy();
		this.hasInsertedRules = false;
		}

		insertStyle(this.element, this.sheet.options);
		}
		_proto.detach = function detach() {
		this.element.parentNode.removeChild(this.element);
		};
		/**
		* Inject CSS string into element.
		*/

		/**
		* Remove style element from render tree.
		*/

		}, {
		key: 'detach',
		value: function detach() {
		this.element.parentNode.removeChild(this.element);
		_proto.deploy = function deploy() {
		var sheet = this.sheet;
		if (!sheet) return;

		if (sheet.options.link) {
		sheet.rules.index.forEach(this.insertRule, this);
		return;
		}

		/**
		* Inject CSS string into element.
		*/
		this.element.textContent = "\n" + sheet.toString() + "\n";
		};
		/**
		* Insert a rule into element.
		*/

		}, {
		key: 'deploy',
		value: function deploy() {
		if (!this.sheet) return;
		this.element.textContent = '\n' + this.sheet.toString() + '\n';
		}

		/**
		* Insert a rule into element.
		*/
		_proto.insertRule = function insertRule(rule, index) {
		var sheet = this.element.sheet;

		}, {
		key: 'insertRule',
		value: function insertRule(rule, index) {
		var sheet = this.element.sheet;
		var cssRules = sheet.cssRules;
		if (rule.type === 'conditional' \|\| rule.type === 'keyframes') {
		var containerRule = rule; // We need to render the container without children first.

		var str = rule.toString();
		if (!index) index = cssRules.length;
		var _cssRule = _insertRule(sheet, containerRule.toString({
		children: false
		}), index);

		if (!str) return false;

		try {
		sheet.insertRule(str, index);
		} catch (err) {
		warning_1(false, '[JSS] Can not insert an unsupported rule \n\r%s', rule);
		if (_cssRule === false) {
		return false;
		}
		this.hasInsertedRules = true;

		return cssRules[index];
		containerRule.rules.index.forEach(function (childRule, childIndex) {
		var cssChildRule = _insertRule(_cssRule, childRule.toString(), childIndex);

		if (cssChildRule !== false) childRule.renderable = cssChildRule;
		});
		return _cssRule;
		}

		/**
		* Delete a rule.
		*/
		var ruleStr = rule.toString();
		if (!ruleStr) return false;

		}, {
		key: 'deleteRule',
		value: function deleteRule(cssRule) {
		var sheet = this.element.sheet;
		var cssRule = _insertRule(sheet, ruleStr, index);

		var index = this.indexOf(cssRule);
		if (index === -1) return false;
		sheet.deleteRule(index);
		return true;
		if (cssRule === false) {
		return false;
		}

		/**
		* Get index of a CSS Rule.
		*/
		this.hasInsertedRules = true;
		rule.renderable = cssRule;
		return cssRule;
		};
		/**
		* Delete a rule.
		*/

		}, {
		key: 'indexOf',
		value: function indexOf(cssRule) {
		var cssRules = this.element.sheet.cssRules;

		for (var _index = 0; _index < cssRules.length; _index++) {
		if (cssRule === cssRules[_index]) return _index;
		}
		return -1;
		}
		_proto.deleteRule = function deleteRule(cssRule) {
		var sheet = this.element.sheet;
		var index = this.indexOf(cssRule);
		if (index === -1) return false;
		sheet.deleteRule(index);
		return true;
		};
		/**
		* Get index of a CSS Rule.
		*/

		/**
		* Generate a new CSS rule and replace the existing one.
		*/

		}, {
		key: 'replaceRule',
		value: function replaceRule(cssRule, rule) {
		var index = this.indexOf(cssRule);
		var newCssRule = this.insertRule(rule, index);
		this.element.sheet.deleteRule(index);
		return newCssRule;
		_proto.indexOf = function indexOf(cssRule) {
		var cssRules = this.element.sheet.cssRules;

		for (var index = 0; index < cssRules.length; index++) {
		if (cssRule === cssRules[index]) return index;
		}

		/**
		* Get all rules elements.
		*/
		return -1;
		};
		/**
		* Generate a new CSS rule and replace the existing one.
		*
		* Only used for some old browsers because they can't set a selector.
		*/

		}, {
		key: 'getRules',
		value: function getRules() {
		return this.element.sheet.cssRules;
		}
		}]);

		_proto.replaceRule = function replaceRule(cssRule, rule) {
		var index = this.indexOf(cssRule);
		if (index === -1) return false;
		this.element.sheet.deleteRule(index);
		return this.insertRule(rule, index);
		};
		/**
		* Get all rules elements.
		*/


		_proto.getRules = function getRules() {
		return this.element.sheet.cssRules;
		};

		return DomRenderer;
		@@ -1999,207 +2008,192 @@ }();
		*/
		var VirtualRenderer = function () {
		function VirtualRenderer() {
		classCallCheck(this, VirtualRenderer);
		}
		var VirtualRenderer =
		/#__PURE__/
		function () {
		function VirtualRenderer() {}

		createClass(VirtualRenderer, [{
		key: 'setProperty',
		value: function setProperty() {
		return true;
		}
		}, {
		key: 'getPropertyValue',
		value: function getPropertyValue() {
		return '';
		}
		}, {
		key: 'removeProperty',
		value: function removeProperty() {}
		}, {
		key: 'setSelector',
		value: function setSelector() {
		return true;
		}
		}, {
		key: 'getKey',
		value: function getKey() {
		return '';
		}
		}, {
		key: 'attach',
		value: function attach() {}
		}, {
		key: 'detach',
		value: function detach() {}
		}, {
		key: 'deploy',
		value: function deploy() {}
		}, {
		key: 'insertRule',
		value: function insertRule() {
		return false;
		}
		}, {
		key: 'deleteRule',
		value: function deleteRule() {
		return true;
		}
		}, {
		key: 'replaceRule',
		value: function replaceRule() {
		return false;
		}
		}, {
		key: 'getRules',
		value: function getRules() {}
		}, {
		key: 'indexOf',
		value: function indexOf() {
		return -1;
		}
		}]);
		var _proto = VirtualRenderer.prototype;

		_proto.setProperty = function setProperty() {
		return true;
		};

		_proto.getPropertyValue = function getPropertyValue() {
		return '';
		};

		_proto.removeProperty = function removeProperty() {};

		_proto.setSelector = function setSelector() {
		return true;
		};

		_proto.attach = function attach() {};

		_proto.detach = function detach() {};

		_proto.deploy = function deploy() {};

		_proto.insertRule = function insertRule() {
		return false;
		};

		_proto.deleteRule = function deleteRule() {
		return true;
		};

		_proto.replaceRule = function replaceRule() {
		return false;
		};

		_proto.getRules = function getRules() {};

		_proto.indexOf = function indexOf() {
		return -1;
		};

		return VirtualRenderer;
		}();

		var defaultPlugins = plugins.concat([observablesPlugin, functionsPlugin]);

		var instanceCounter = 0;

		var Jss = function () {
		var Jss =
		/#__PURE__/
		function () {
		function Jss(options) {
		classCallCheck(this, Jss);
		this.id = instanceCounter++;
		this.version = "9.8.7";
		this.version = "9.8.4";
		this.plugins = new PluginsRegistry();
		this.options = {
		createGenerateClassName: createGenerateClassNameDefault,
		createGenerateId: createGenerateIdDefault,
		Renderer: isBrowser ? DomRenderer : VirtualRenderer,
		plugins: []
		};
		this.generateClassName = createGenerateClassNameDefault();
		this.generateId = createGenerateIdDefault();

		// eslint-disable-next-line prefer-spread
		this.use.apply(this, defaultPlugins);
		for (var i = 0; i < plugins.length; i++) {
		this.plugins.use(plugins[i], {
		queue: 'internal'
		});
		}

		this.setup(options);
		}
		/**
		* Prepares various options, applies plugins.
		* Should not be used twice on the same instance, because there is no plugins
		* deduplication logic.
		*/

		createClass(Jss, [{
		key: 'setup',
		value: function setup() {
		var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

		if (options.createGenerateClassName) {
		this.options.createGenerateClassName = options.createGenerateClassName;
		// $FlowFixMe
		this.generateClassName = options.createGenerateClassName();
		}
		var _proto = Jss.prototype;

		if (options.insertionPoint != null) this.options.insertionPoint = options.insertionPoint;
		if (options.virtual \|\| options.Renderer) {
		this.options.Renderer = options.Renderer \|\| (options.virtual ? VirtualRenderer : DomRenderer);
		}
		_proto.setup = function setup(options) {
		if (options === void 0) {
		options = {};
		}

		// eslint-disable-next-line prefer-spread
		if (options.plugins) this.use.apply(this, options.plugins);
		if (options.createGenerateId) {
		this.options.createGenerateId = options.createGenerateId; // $FlowFixMe

		return this;
		this.generateId = options.createGenerateId();
		}

		/**
		* Create a Style Sheet.
		*/
		if (options.insertionPoint != null) this.options.insertionPoint = options.insertionPoint;

		}, {
		key: 'createStyleSheet',
		value: function createStyleSheet(styles) {
		var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
		if (options.virtual \|\| options.Renderer) {
		this.options.Renderer = options.Renderer \|\| (options.virtual ? VirtualRenderer : DomRenderer);
		} // eslint-disable-next-line prefer-spread

		var index = options.index;
		if (typeof index !== 'number') {
		index = sheets.index === 0 ? 0 : sheets.index + 1;
		}
		var sheet = new StyleSheet(styles, _extends({}, options, {
		jss: this,
		generateClassName: options.generateClassName \|\| this.generateClassName,
		insertionPoint: this.options.insertionPoint,
		Renderer: this.options.Renderer,
		index: index
		}));
		this.plugins.onProcessSheet(sheet);

		return sheet;
		}
		if (options.plugins) this.use.apply(this, options.plugins);
		return this;
		};
		/**
		* Create a Style Sheet.
		*/

		/**
		* Detach the Style Sheet and remove it from the registry.
		*/

		}, {
		key: 'removeStyleSheet',
		value: function removeStyleSheet(sheet) {
		sheet.detach();
		sheets.remove(sheet);
		return this;
		_proto.createStyleSheet = function createStyleSheet(styles, options) {
		if (options === void 0) {
		options = {};
		}

		/**
		* Create a rule without a Style Sheet.
		*/
		var _options = options,
		index = _options.index;

		}, {
		key: 'createRule',
		value: function createRule$$1(name) {
		var style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
		var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
		if (typeof index !== 'number') {
		index = sheets.index === 0 ? 0 : sheets.index + 1;
		}

		// Enable rule without name for inline styles.
		if ((typeof name === 'undefined' ? 'undefined' : _typeof$1(name)) === 'object') {
		options = style;
		style = name;
		name = undefined;
		}
		var sheet = new StyleSheet(styles, _extends({}, options, {
		jss: this,
		generateId: options.generateId \|\| this.generateId,
		insertionPoint: this.options.insertionPoint,
		Renderer: this.options.Renderer,
		index: index
		}));
		this.plugins.onProcessSheet(sheet);
		return sheet;
		};
		/**
		* Detach the Style Sheet and remove it from the registry.
		*/

		// Cast from RuleFactoryOptions to RuleOptions
		// https://stackoverflow.com/questions/41328728/force-casting-in-flow
		var ruleOptions = options;

		ruleOptions.jss = this;
		ruleOptions.Renderer = this.options.Renderer;
		if (!ruleOptions.generateClassName) ruleOptions.generateClassName = this.generateClassName;
		if (!ruleOptions.classes) ruleOptions.classes = {};
		var rule = createRule(name, style, ruleOptions);
		_proto.removeStyleSheet = function removeStyleSheet(sheet) {
		sheet.detach();
		sheets.remove(sheet);
		return this;
		};
		/**
		* Create a rule without a Style Sheet.
		*/

		if (!ruleOptions.selector && rule instanceof StyleRule) {
		rule.selector = '.' + ruleOptions.generateClassName(rule);
		}

		this.plugins.onProcessRule(rule);
		_proto.createRule = function createRule$$1(name, style, options) {
		if (style === void 0) {
		style = {};
		}

		return rule;
		if (options === void 0) {
		options = {};
		}

		/**
		* Register plugin. Passed function will be invoked with a rule instance.
		*/
		// Enable rule without name for inline styles.
		if (typeof name === 'object') {
		return this.createRule(undefined, name, style);
		}

		}, {
		key: 'use',
		value: function use() {
		var _this = this;
		var ruleOptions = _extends({}, options, {
		jss: this,
		Renderer: this.options.Renderer
		});

		for (var _len = arguments.length, plugins$$1 = Array(_len), _key = 0; _key < _len; _key++) {
		plugins$$1[_key] = arguments[_key];
		}
		if (!ruleOptions.generateId) ruleOptions.generateId = this.generateId;
		if (!ruleOptions.classes) ruleOptions.classes = {};
		if (!ruleOptions.keyframes) ruleOptions.keyframes = {};

		plugins$$1.forEach(function (plugin) {
		// Avoids applying same plugin twice, at least based on ref.
		if (_this.options.plugins.indexOf(plugin) === -1) {
		_this.options.plugins.push(plugin);
		_this.plugins.use(plugin);
		}
		});
		var rule = createRule(name, style, ruleOptions);

		return this;
		if (rule) this.plugins.onProcessRule(rule);
		return rule;
		};
		/**
		* Register plugin. Passed function will be invoked with a rule instance.
		*/


		_proto.use = function use() {
		var _this = this;

		for (var _len = arguments.length, plugins$$1 = new Array(_len), _key = 0; _key < _len; _key++) {
		plugins$$1[_key] = arguments[_key];
		}
		}]);

		plugins$$1.forEach(function (plugin) {
		_this.plugins.use(plugin);
		});
		return this;
		};

		return Jss;
		@@ -2216,3 +2210,3 @@ }();
		var value = styles[key];
		var type = typeof value === 'undefined' ? 'undefined' : _typeof$1(value);
		var type = typeof value;

		@@ -2224,2 +2218,3 @@ if (type === 'function') {
		var extracted = getDynamicStyles(value);

		if (extracted) {
		@@ -2239,5 +2234,6 @@ if (!to) to = {};
		*/
		var SheetsManager = function () {
		var SheetsManager =
		/#__PURE__/
		function () {
		function SheetsManager() {
		classCallCheck(this, SheetsManager);
		this.sheets = [];
		@@ -2248,55 +2244,52 @@ this.refs = [];

		createClass(SheetsManager, [{
		key: 'get',
		value: function get$$1(key) {
		var index = this.keys.indexOf(key);
		return this.sheets[index];
		}
		}, {
		key: 'add',
		value: function add(key, sheet) {
		var sheets = this.sheets,
		refs = this.refs,
		keys = this.keys;
		var _proto = SheetsManager.prototype;

		var index = sheets.indexOf(sheet);
		_proto.get = function get(key) {
		var index = this.keys.indexOf(key);
		return this.sheets[index];
		};

		if (index !== -1) return index;
		_proto.add = function add(key, sheet) {
		var sheets = this.sheets,
		refs = this.refs,
		keys = this.keys;
		var index = sheets.indexOf(sheet);
		if (index !== -1) return index;
		sheets.push(sheet);
		refs.push(0);
		keys.push(key);
		return sheets.length - 1;
		};

		sheets.push(sheet);
		refs.push(0);
		keys.push(key);
		_proto.manage = function manage(key) {
		var index = this.keys.indexOf(key);
		var sheet = this.sheets[index];
		if (this.refs[index] === 0) sheet.attach();
		this.refs[index]++;
		if (!this.keys[index]) this.keys.splice(index, 0, key);
		return sheet;
		};

		return sheets.length - 1;
		_proto.unmanage = function unmanage(key) {
		var index = this.keys.indexOf(key);

		if (index === -1) {
		// eslint-ignore-next-line no-console
		warning_1(false, "SheetsManager: can't find sheet to unmanage");
		return;
		}
		}, {
		key: 'manage',
		value: function manage(key) {
		var index = this.keys.indexOf(key);
		var sheet = this.sheets[index];
		if (this.refs[index] === 0) sheet.attach();
		this.refs[index]++;
		if (!this.keys[index]) this.keys.splice(index, 0, key);
		return sheet;

		if (this.refs[index] > 0) {
		this.refs[index]--;
		if (this.refs[index] === 0) this.sheets[index].detach();
		}
		}, {
		key: 'unmanage',
		value: function unmanage(key) {
		var index = this.keys.indexOf(key);
		if (index === -1) {
		// eslint-ignore-next-line no-console
		warning_1(false, "SheetsManager: can't find sheet to unmanage");
		return;
		}
		if (this.refs[index] > 0) {
		this.refs[index]--;
		if (this.refs[index] === 0) this.sheets[index].detach();
		}
		}
		}, {
		key: 'size',
		get: function get$$1() {
		};

		_createClass(SheetsManager, [{
		key: "size",
		get: function get() {
		return this.keys.length;
		}
		}]);

		return SheetsManager;
		@@ -2306,17 +2299,33 @@ }();
		/**
		* A better abstraction over CSS.
		*
		* @copyright Oleg Isonen (Slobodskoi) / Isonen 2014-present
		* @website https://github.com/cssinjs/jss
		* @license MIT
		*/

		/**
		* Export a constant indicating if this browser has CSSTOM support.
		* https://developers.google.com/web/updates/2018/03/cssom
		*/
		var hasCSSTOMSupport = typeof CSS !== 'undefined' && CSS && 'number' in CSS;
		/**
		* Creates a new instance of Jss.
		*/

		var create = function create(options) {
		return new Jss(options);
		};

		/**
		* A global Jss instance.
		*/
		var index$1 = create();

		var index = create();

		exports.hasCSSTOMSupport = hasCSSTOMSupport;
		exports.create = create;
		exports.default = index$1;
		exports.default = index;
		exports.getDynamicStyles = getDynamicStyles;
		exports.toCssValue = toCssValue;
		exports.createRule = createRule;
		exports.SheetsRegistry = SheetsRegistry;
		@@ -2326,3 +2335,3 @@ exports.SheetsManager = SheetsManager;
		exports.sheets = sheets;
		exports.createGenerateClassName = createGenerateClassNameDefault;
		exports.createGenerateId = createGenerateIdDefault;

		@@ -2329,0 +2338,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

dist/jss.min.js

		@@ -1,1 +0,1 @@
		!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.jss={})}(this,function(e){"use strict";var t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n="object"===("undefined"==typeof window?"undefined":t(window))&&"object"===("undefined"==typeof document?"undefined":t(document))&&9===document.nodeType;function r(e,t){e.renderable=t,e.rules&&t.cssRules&&e.rules.link(t.cssRules)}var s="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};s.setTimeout,s.clearTimeout;var i=s.performance\|\|{},o=(i.now\|\|i.mozNow\|\|i.msNow\|\|i.oNow\|\|i.webkitNow,function(){});var u=o,a=function(e,t){for(var n="",r=0;r<e.length&&"!important"!==e[r];r++)n&&(n+=t),n+=e[r];return n};function l(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(!Array.isArray(e))return e;var n="";if(Array.isArray(e[0]))for(var r=0;r<e.length&&"!important"!==e[r];r++)n&&(n+=", "),n+=a(e[r]," ");else n=a(e,", ");return t\|\|"!important"!==e[e.length-1]\|\|(n+=" !important"),n}function h(e,t){for(var n="",r=0;r<t;r++)n+=" ";return n+e}function f(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r="";if(!t)return r;var s=n.indent,i=void 0===s?0:s,o=t.fallbacks;if(i++,o)if(Array.isArray(o))for(var u=0;u<o.length;u++){var a=o[u];for(var f in a){var c=a[f];null!=c&&(r+="\n"+h(f+": "+l(c)+";",i))}}else for(var d in o){var v=o[d];null!=v&&(r+="\n"+h(d+": "+l(v)+";",i))}for(var y in t){var p=t[y];null!=p&&"fallbacks"!==y&&(r+="\n"+h(y+": "+l(p)+";",i))}return r\|\|n.allowEmpty?r=h(e+" {"+r+"\n",--i)+h("}",i):r}var c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},d=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},v=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable\|\|!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),y=Object.assign\|\|function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},p=function(){function e(t,n,r){d(this,e),this.type="style",this.isProcessed=!1;var s=r.sheet,i=r.Renderer,o=r.selector;this.key=t,this.options=r,this.style=n,o&&(this.selectorText=o),this.renderer=s?s.renderer:new i}return v(e,[{key:"prop",value:function(e,t){if(void 0===t)return this.style[e];if(this.style[e]===t)return this;var n=null==(t=this.options.jss.plugins.onChangeValue(t,e,this))\|\|!1===t,r=e in this.style;if(n&&!r)return this;var s=n&&r;if(s?delete this.style[e]:this.style[e]=t,this.renderable)return s?this.renderer.removeProperty(this.renderable,e):this.renderer.setProperty(this.renderable,e,t),this;var i=this.options.sheet;return i&&i.attached&&u(!1,'Rule is not linked. Missing sheet option "link: true".'),this}},{key:"applyTo",value:function(e){var t=this.toJSON();for(var n in t)this.renderer.setProperty(e,n,t[n]);return this}},{key:"toJSON",value:function(){var e={};for(var t in this.style){var n=this.style[t];"object"!==(void 0===n?"undefined":c(n))?e[t]=n:Array.isArray(n)&&(e[t]=l(n))}return e}},{key:"toString",value:function(e){var t=this.options.sheet,n=!!t&&t.options.link?y({},e,{allowEmpty:!0}):e;return f(this.selector,this.style,n)}},{key:"selector",set:function(e){if(e!==this.selectorText&&(this.selectorText=e,this.renderable&&!this.renderer.setSelector(this.renderable,e)&&this.renderable)){var t=this.renderer.replaceRule(this.renderable,this);t&&(this.renderable=t)}},get:function(){return this.selectorText}}]),e}();function g(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function k(e,t){return e(t={exports:{}},t.exports),t.exports}var m=k(function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){var t,n=e.Symbol;"function"==typeof n?n.observable?t=n.observable:(t=n("observable"),n.observable=t):t="@@observable";return t}});g(m);var b=k(function(e,t){Object.defineProperty(t,"__esModule",{value:!0});var n,r,i=(n=m)&&n.__esModule?n:{default:n};r="undefined"!=typeof self?self:"undefined"!=typeof window?window:void 0!==s?s:e;var o=(0,i.default)(r);t.default=o});g(b);var S=b,R=function(e){return e&&e[S]&&e===e[S]()},x=Array.isArray;function P(e){if(null==e)return e;var t=void 0===e?"undefined":c(e);if("string"===t\|\|"number"===t\|\|"function"===t)return e;if(x(e))return e.map(P);if(R(e))return e;var n={};for(var r in e){var s=e[r];"object"!==(void 0===s?"undefined":c(s))?n[r]=s:n[r]=P(s)}return n}function w(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"unnamed",t=arguments[1],n=arguments[2],r=n.jss,s=P(t),i=r.plugins.onCreateRule(e,s,n);return i\|\|("@"===e[0]&&u(!1,"[JSS] Unknown at-rule %s",e),new p(e,s,n))}s.CSS;var C=function(e){return e},O=function(){function e(t){var n=this;d(this,e),this.map={},this.raw={},this.index=[],this.update=function(e,t){var r=n.options,s=r.jss.plugins,i=r.sheet;if("string"==typeof e)s.onUpdate(t,n.get(e),i);else for(var o=0;o<n.index.length;o++)s.onUpdate(e,n.index[o],i)},this.options=t,this.classes=t.classes}return v(e,[{key:"add",value:function(e,t,n){var r=this.options,s=r.parent,i=r.sheet,o=r.jss,u=r.Renderer,a=r.generateClassName;!(n=y({classes:this.classes,parent:s,sheet:i,jss:o,Renderer:u,generateClassName:a},n)).selector&&this.classes[e]&&(n.selector="."+C(this.classes[e])),this.raw[e]=t;var l=w(e,t,n),h=void 0;!n.selector&&l instanceof p&&(h=a(l,i),l.selector="."+C(h)),this.register(l,h);var f=void 0===n.index?this.index.length:n.index;return this.index.splice(f,0,l),l}},{key:"get",value:function(e){return this.map[e]}},{key:"remove",value:function(e){this.unregister(e),this.index.splice(this.indexOf(e),1)}},{key:"indexOf",value:function(e){return this.index.indexOf(e)}},{key:"process",value:function(){var e=this.options.jss.plugins;this.index.slice(0).forEach(e.onProcessRule,e)}},{key:"register",value:function(e,t){this.map[e.key]=e,e instanceof p&&(this.map[e.selector]=e,t&&(this.classes[e.key]=t))}},{key:"unregister",value:function(e){delete this.map[e.key],e instanceof p&&(delete this.map[e.selector],delete this.classes[e.key])}},{key:"link",value:function(e){for(var t=this.options.sheet.renderer.getUnescapedKeysMap(this.index),n=0;n<e.length;n++){var s=e[n],i=this.options.sheet.renderer.getKey(s);t[i]&&(i=t[i]);var o=this.map[i];o&&r(o,s)}}},{key:"toString",value:function(e){for(var t="",n=this.options.sheet,r=!!n&&n.options.link,s=0;s<this.index.length;s++){var i=this.index[s].toString(e);(i\|\|r)&&(t&&(t+="\n"),t+=i)}return t}}]),e}(),j=function(){function e(t,n){var r=this;for(var s in d(this,e),this.update=function(e,t){return"string"==typeof e?r.rules.update(e,t):r.rules.update(e),r},this.attached=!1,this.deployed=!1,this.linked=!1,this.classes={},this.options=y({},n,{sheet:this,parent:this,classes:this.classes}),this.renderer=new n.Renderer(this),this.rules=new O(this.options),t)this.rules.add(s,t[s]);this.rules.process()}return v(e,[{key:"attach",value:function(){return this.attached?this:(this.deployed\|\|this.deploy(),this.renderer.attach(),!this.linked&&this.options.link&&this.link(),this.attached=!0,this)}},{key:"detach",value:function(){return this.attached?(this.renderer.detach(),this.attached=!1,this):this}},{key:"addRule",value:function(e,t,n){var r=this.queue;this.attached&&!r&&(this.queue=[]);var s=this.rules.add(e,t,n);return this.options.jss.plugins.onProcessRule(s),this.attached?this.deployed?(r?r.push(s):(this.insertRule(s),this.queue&&(this.queue.forEach(this.insertRule,this),this.queue=void 0)),s):s:(this.deployed=!1,s)}},{key:"insertRule",value:function(e){var t=this.renderer.insertRule(e);t&&this.options.link&&r(e,t)}},{key:"addRules",value:function(e,t){var n=[];for(var r in e)n.push(this.addRule(r,e[r],t));return n}},{key:"getRule",value:function(e){return this.rules.get(e)}},{key:"deleteRule",value:function(e){var t=this.rules.get(e);return!!t&&(this.rules.remove(t),!this.attached\|\|!t.renderable\|\|this.renderer.deleteRule(t.renderable))}},{key:"indexOf",value:function(e){return this.rules.indexOf(e)}},{key:"deploy",value:function(){return this.renderer.deploy(),this.deployed=!0,this}},{key:"link",value:function(){var e=this.renderer.getRules();return e&&this.rules.link(e),this.linked=!0,this}},{key:"toString",value:function(e){return this.rules.toString(e)}}]),e}(),N=function(){function e(){d(this,e),this.hooks={onCreateRule:[],onProcessRule:[],onProcessStyle:[],onProcessSheet:[],onChangeValue:[],onUpdate:[]}}return v(e,[{key:"onCreateRule",value:function(e,t,n){for(var r=0;r<this.hooks.onCreateRule.length;r++){var s=this.hooks.onCreateRule[r](e,t,n);if(s)return s}return null}},{key:"onProcessRule",value:function(e){if(!e.isProcessed){for(var t=e.options.sheet,n=0;n<this.hooks.onProcessRule.length;n++)this.hooks.onProcessRule[n](e,t);e.style&&this.onProcessStyle(e.style,e,t),e.isProcessed=!0}}},{key:"onProcessStyle",value:function(e,t,n){for(var r=e,s=0;s<this.hooks.onProcessStyle.length;s++)r=this.hooks.onProcessStyle[s](r,t,n),t.style=r}},{key:"onProcessSheet",value:function(e){for(var t=0;t<this.hooks.onProcessSheet.length;t++)this.hooks.onProcessSheet[t](e)}},{key:"onUpdate",value:function(e,t,n){for(var r=0;r<this.hooks.onUpdate.length;r++)this.hooks.onUpdate[r](e,t,n)}},{key:"onChangeValue",value:function(e,t,n){for(var r=e,s=0;s<this.hooks.onChangeValue.length;s++)r=this.hooks.onChangeValue[s](r,t,n);return r}},{key:"use",value:function(e){for(var t in e)this.hooks[t]?this.hooks[t].push(e[t]):u(!1,'[JSS] Unknown hook "%s".',t)}}]),e}(),A=function(){function e(t,n,r){d(this,e),this.type="simple",this.isProcessed=!1,this.key=t,this.value=n,this.options=r}return v(e,[{key:"toString",value:function(e){if(Array.isArray(this.value)){for(var t="",n=0;n<this.value.length;n++)t+=this.key+" "+this.value[n]+";",this.value[n+1]&&(t+="\n");return t}return this.key+" "+this.value+";"}}]),e}(),T=function(){function e(t,n,r){for(var s in d(this,e),this.type="keyframes",this.isProcessed=!1,this.key=t,this.options=r,this.rules=new O(y({},r,{parent:this})),n)this.rules.add(s,n[s],y({},this.options,{parent:this,selector:s}));this.rules.process()}return v(e,[{key:"toString",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{indent:1},t=this.rules.toString(e);return t&&(t+="\n"),this.key+" {\n"+t+"}"}}]),e}(),E=function(){function e(t,n,r){for(var s in d(this,e),this.type="conditional",this.isProcessed=!1,this.key=t,this.options=r,this.rules=new O(y({},r,{parent:this})),n)this.rules.add(s,n[s]);this.rules.process()}return v(e,[{key:"getRule",value:function(e){return this.rules.get(e)}},{key:"indexOf",value:function(e){return this.rules.indexOf(e)}},{key:"addRule",value:function(e,t,n){var r=this.rules.add(e,t,n);return this.options.jss.plugins.onProcessRule(r),r}},{key:"toString",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{indent:1},t=this.rules.toString(e);return t?this.key+" {\n"+t+"\n}":""}}]),e}(),M=function(){function e(t,n,r){d(this,e),this.type="font-face",this.isProcessed=!1,this.key=t,this.style=n,this.options=r}return v(e,[{key:"toString",value:function(e){if(Array.isArray(this.style)){for(var t="",n=0;n<this.style.length;n++)t+=f(this.key,this.style[n]),this.style[n+1]&&(t+="\n");return t}return f(this.key,this.style,e)}}]),e}(),U=function(){function e(t,n,r){d(this,e),this.type="viewport",this.isProcessed=!1,this.key=t,this.style=n,this.options=r}return v(e,[{key:"toString",value:function(e){return f(this.key,this.style,e)}}]),e}(),V={"@charset":A,"@import":A,"@namespace":A,"@keyframes":T,"@media":E,"@supports":E,"@font-face":M,"@viewport":U,"@-ms-viewport":U},_=Object.keys(V).map(function(e){var t=new RegExp("^"+e),n=V[e];return{onCreateRule:function(e,r,s){return t.test(e)?new n(e,r,s):null}}}),J={onCreateRule:function(e,t,n){if(!R(t))return null;var r=t,s=w(e,{},n);return r.subscribe(function(e){for(var t in e)s.prop(t,e[t])}),s},onProcessRule:function(e){if(e instanceof p){var t=e,n=t.style,r=function(e){var r=n[e];if(!R(r))return"continue";delete n[e],r.subscribe({next:function(n){t.prop(e,n)}})};for(var s in n)r(s)}}},q=Date.now(),G="fnValues"+q,I="fnStyle"+ ++q,K={onCreateRule:function(e,t,n){if("function"!=typeof t)return null;var r=w(e,{},n);return r[I]=t,r},onProcessStyle:function(e,t){var n={};for(var r in e){var s=e[r];"function"==typeof s&&(delete e[r],n[r]=s)}return(t=t)[G]=n,e},onUpdate:function(e,t){if(t.rules instanceof O)t.rules.update(e);else if(t instanceof p){if((t=t)[G])for(var n in t[G])t.prop(n,t[G][n](e));var r=(t=t)[I];if(r){var s=r(e);for(var i in s)t.prop(i,s[i])}}}},B=function(){function e(){d(this,e),this.registry=[]}return v(e,[{key:"add",value:function(e){var t=this.registry,n=e.options.index;if(-1===t.indexOf(e))if(0===t.length\|\|n>=this.index)t.push(e);else for(var r=0;r<t.length;r++)if(t[r].options.index>n)return void t.splice(r,0,e)}},{key:"reset",value:function(){this.registry=[]}},{key:"remove",value:function(e){var t=this.registry.indexOf(e);this.registry.splice(t,1)}},{key:"toString",value:function(e){return this.registry.filter(function(e){return e.attached}).map(function(t){return t.toString(e)}).join("\n")}},{key:"index",get:function(){return 0===this.registry.length?0:this.registry[this.registry.length-1].options.index}}]),e}(),D=new B,z="2f1acc6c3a606b082e5eef5e54414ffb";null==s[z]&&(s[z]=0);var L=s[z]++,Y=function(){var e=0;return function(t,n){(e+=1)>1e10&&u(!1,"[JSS] You might have a memory leak. Rule counter is at %s.",e);var r="c",s="";return n&&(r=n.options.classNamePrefix\|\|"c",null!=n.options.jss.id&&(s+=n.options.jss.id)),""+r+L+s+e}},F=function(e){var t=void 0;return function(){return t\|\|(t=e()),t}};function H(e,t){try{return e.style.getPropertyValue(t)}catch(e){return""}}function Q(e,t,n){try{var r=n;if(Array.isArray(n)&&(r=l(n,!0),"!important"===n[n.length-1]))return e.style.setProperty(t,r,"important"),!0;e.style.setProperty(t,r)}catch(e){return!1}return!0}function W(e,t){try{e.style.removeProperty(t)}catch(e){u(!1,'[JSS] DOMException "%s" was thrown. Tried to remove property "%s".',e.message,t)}}var X,Z=1,$=7,ee=(X=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return e.substr(t,e.indexOf("{")-1)},function(e){if(e.type===Z)return e.selectorText;if(e.type===$){var t=e.name;if(t)return"@keyframes "+t;var n=e.cssText;return"@"+X(n,n.indexOf("keyframes"))}return X(e.cssText)});function te(e,t){return e.selectorText=t,e.selectorText===t}var ne,re,se=F(function(){return document.head\|\|document.getElementsByTagName("head")[0]}),ie=(ne=void 0,re=!1,function(e){var t={};ne\|\|(ne=document.createElement("style"));for(var n=0;n<e.length;n++){var r=e[n];if(r instanceof p){var s=r.selector;if(s&&-1!==s.indexOf("\\")){re\|\|(se().appendChild(ne),re=!0),ne.textContent=s+" {}";var i=ne.sheet;if(i){var o=i.cssRules;o&&(t[o[0].selectorText]=r.key)}}}}return re&&(se().removeChild(ne),re=!1),t});function oe(e){var t=D.registry;if(t.length>0){var n=function(e,t){for(var n=0;n<e.length;n++){var r=e[n];if(r.attached&&r.options.index>t.index&&r.options.insertionPoint===t.insertionPoint)return r}return null}(t,e);if(n)return n.renderer.element;if(n=function(e,t){for(var n=e.length-1;n>=0;n--){var r=e[n];if(r.attached&&r.options.insertionPoint===t.insertionPoint)return r}return null}(t,e))return n.renderer.element.nextElementSibling}var r=e.insertionPoint;if(r&&"string"==typeof r){var s=function(e){for(var t=se(),n=0;n<t.childNodes.length;n++){var r=t.childNodes[n];if(8===r.nodeType&&r.nodeValue.trim()===e)return r}return null}(r);if(s)return s.nextSibling;u("jss"===r,'[JSS] Insertion point "%s" not found.',r)}return null}var ue=F(function(){var e=document.querySelector('meta[property="csp-nonce"]');return e?e.getAttribute("content"):null}),ae=function(){function e(t){d(this,e),this.getPropertyValue=H,this.setProperty=Q,this.removeProperty=W,this.setSelector=te,this.getKey=ee,this.getUnescapedKeysMap=ie,this.hasInsertedRules=!1,t&&D.add(t),this.sheet=t;var n=this.sheet?this.sheet.options:{},r=n.media,s=n.meta,i=n.element;this.element=i\|\|document.createElement("style"),this.element.setAttribute("data-jss",""),r&&this.element.setAttribute("media",r),s&&this.element.setAttribute("data-meta",s);var o=ue();o&&this.element.setAttribute("nonce",o)}return v(e,[{key:"attach",value:function(){!this.element.parentNode&&this.sheet&&(this.hasInsertedRules&&(this.deploy(),this.hasInsertedRules=!1),function(e,t){var n=t.insertionPoint,r=oe(t);if(r){var s=r.parentNode;s&&s.insertBefore(e,r)}else if(n&&"number"==typeof n.nodeType){var i=n,o=i.parentNode;o?o.insertBefore(e,i.nextSibling):u(!1,"[JSS] Insertion point is not in the DOM.")}else se().insertBefore(e,r)}(this.element,this.sheet.options))}},{key:"detach",value:function(){this.element.parentNode.removeChild(this.element)}},{key:"deploy",value:function(){this.sheet&&(this.element.textContent="\n"+this.sheet.toString()+"\n")}},{key:"insertRule",value:function(e,t){var n=this.element.sheet,r=n.cssRules,s=e.toString();if(t\|\|(t=r.length),!s)return!1;try{n.insertRule(s,t)}catch(t){return u(!1,"[JSS] Can not insert an unsupported rule \n\r%s",e),!1}return this.hasInsertedRules=!0,r[t]}},{key:"deleteRule",value:function(e){var t=this.element.sheet,n=this.indexOf(e);return-1!==n&&(t.deleteRule(n),!0)}},{key:"indexOf",value:function(e){for(var t=this.element.sheet.cssRules,n=0;n<t.length;n++)if(e===t[n])return n;return-1}},{key:"replaceRule",value:function(e,t){var n=this.indexOf(e),r=this.insertRule(t,n);return this.element.sheet.deleteRule(n),r}},{key:"getRules",value:function(){return this.element.sheet.cssRules}}]),e}(),le=function(){function e(){d(this,e)}return v(e,[{key:"setProperty",value:function(){return!0}},{key:"getPropertyValue",value:function(){return""}},{key:"removeProperty",value:function(){}},{key:"setSelector",value:function(){return!0}},{key:"getKey",value:function(){return""}},{key:"attach",value:function(){}},{key:"detach",value:function(){}},{key:"deploy",value:function(){}},{key:"insertRule",value:function(){return!1}},{key:"deleteRule",value:function(){return!0}},{key:"replaceRule",value:function(){return!1}},{key:"getRules",value:function(){}},{key:"indexOf",value:function(){return-1}}]),e}(),he=_.concat([J,K]),fe=0,ce=function(){function e(t){d(this,e),this.id=fe++,this.version="9.8.7",this.plugins=new N,this.options={createGenerateClassName:Y,Renderer:n?ae:le,plugins:[]},this.generateClassName=Y(),this.use.apply(this,he),this.setup(t)}return v(e,[{key:"setup",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return e.createGenerateClassName&&(this.options.createGenerateClassName=e.createGenerateClassName,this.generateClassName=e.createGenerateClassName()),null!=e.insertionPoint&&(this.options.insertionPoint=e.insertionPoint),(e.virtual\|\|e.Renderer)&&(this.options.Renderer=e.Renderer\|\|(e.virtual?le:ae)),e.plugins&&this.use.apply(this,e.plugins),this}},{key:"createStyleSheet",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.index;"number"!=typeof n&&(n=0===D.index?0:D.index+1);var r=new j(e,y({},t,{jss:this,generateClassName:t.generateClassName\|\|this.generateClassName,insertionPoint:this.options.insertionPoint,Renderer:this.options.Renderer,index:n}));return this.plugins.onProcessSheet(r),r}},{key:"removeStyleSheet",value:function(e){return e.detach(),D.remove(e),this}},{key:"createRule",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};"object"===(void 0===e?"undefined":c(e))&&(n=t,t=e,e=void 0);var r=n;r.jss=this,r.Renderer=this.options.Renderer,r.generateClassName\|\|(r.generateClassName=this.generateClassName),r.classes\|\|(r.classes={});var s=w(e,t,r);return!r.selector&&s instanceof p&&(s.selector="."+r.generateClassName(s)),this.plugins.onProcessRule(s),s}},{key:"use",value:function(){for(var e=this,t=arguments.length,n=Array(t),r=0;r<t;r++)n[r]=arguments[r];return n.forEach(function(t){-1===e.options.plugins.indexOf(t)&&(e.options.plugins.push(t),e.plugins.use(t))}),this}}]),e}();var de=function(){function e(){d(this,e),this.sheets=[],this.refs=[],this.keys=[]}return v(e,[{key:"get",value:function(e){var t=this.keys.indexOf(e);return this.sheets[t]}},{key:"add",value:function(e,t){var n=this.sheets,r=this.refs,s=this.keys,i=n.indexOf(t);return-1!==i?i:(n.push(t),r.push(0),s.push(e),n.length-1)}},{key:"manage",value:function(e){var t=this.keys.indexOf(e),n=this.sheets[t];return 0===this.refs[t]&&n.attach(),this.refs[t]++,this.keys[t]\|\|this.keys.splice(t,0,e),n}},{key:"unmanage",value:function(e){var t=this.keys.indexOf(e);-1!==t?this.refs[t]>0&&(this.refs[t]--,0===this.refs[t]&&this.sheets[t].detach()):u(!1,"SheetsManager: can't find sheet to unmanage")}},{key:"size",get:function(){return this.keys.length}}]),e}(),ve=function(e){return new ce(e)},ye=ve();e.create=ve,e.default=ye,e.getDynamicStyles=function e(t){var n=null;for(var r in t){var s=t[r],i=void 0===s?"undefined":c(s);if("function"===i)n\|\|(n={}),n[r]=s;else if("object"===i&&null!==s&&!Array.isArray(s)){var o=e(s);o&&(n\|\|(n={}),n[r]=o)}}return n},e.toCssValue=l,e.SheetsRegistry=B,e.SheetsManager=de,e.RuleList=O,e.sheets=D,e.createGenerateClassName=Y,Object.defineProperty(e,"__esModule",{value:!0})});
		!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.jss={})}(this,function(e){"use strict";function c(){return(c=Object.assign\|\|function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}var t,n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r="object"===("undefined"==typeof window?"undefined":n(window))&&"object"===("undefined"==typeof document?"undefined":n(document))&&9===document.nodeType,a=function(){},s="undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{};t="undefined"!=typeof self?self:"undefined"!=typeof window?window:void 0!==s?s:"undefined"!=typeof module?module:Function("return this")();var i,o,u=("function"==typeof(o=t.Symbol)?o.observable?i=o.observable:(i=o("observable"),o.observable=i):i="@@observable",i),h=Array.isArray,l=function(e){return e&&e[u]&&e===e[u]()};function d(e){if(null==e)return e;var t=typeof e;if("string"===t\|\|"number"===t\|\|"function"===t)return e;if(s.CSSStyleValue&&e instanceof s.CSSStyleValue)return e;if(h(e))return e.map(d);if(l(e))return e;var n={};for(var r in e){var i=e[r];"object"!=typeof i?n[r]=i:n[r]=d(i)}return n}function p(e,t,n){void 0===e&&(e="unnamed");var r=n.jss,i=d(t),s=r.plugins.onCreateRule(e,i,n);return s\|\|("@"===e[0]&&a(!1,"[JSS] Unknown rule %s",e),null)}function f(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable\|\|!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function y(e,t,n){return t&&f(e.prototype,t),n&&f(e,n),e}function v(e,t){e.prototype=Object.create(t.prototype),(e.prototype.constructor=e).__proto__=t}function g(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}var m=function(e,t){for(var n="",r=0;r<e.length&&"!important"!==e[r];r++)n&&(n+=t),n+=e[r];return n};function S(e,t){if(void 0===t&&(t=!1),!Array.isArray(e))return e;var n="";if(Array.isArray(e[0]))for(var r=0;r<e.length&&"!important"!==e[r];r++)n&&(n+=", "),n+=m(e[r]," ");else n=m(e,", ");return t\|\|"!important"!==e[e.length-1]\|\|(n+=" !important"),n}function b(e,t){for(var n="",r=0;r<t;r++)n+=" ";return n+e}function R(e,t,n){void 0===n&&(n={});var r="";if(!t)return r;var i=n.indent,s=void 0===i?0:i,o=t.fallbacks;if(e&&s++,o)if(Array.isArray(o))for(var u=0;u<o.length;u++){var a=o[u];for(var h in a){var l=a[h];null!=l&&(r&&(r+="\n"),r+=""+b(h+": "+S(l)+";",s))}}else for(var d in o){var f=o[d];null!=f&&(r&&(r+="\n"),r+=""+b(d+": "+S(f)+";",s))}for(var c in t){var p=t[c];null!=p&&"fallbacks"!==c&&(r&&(r+="\n"),r+=""+b(c+": "+S(p)+";",s))}return(r\|\|n.allowEmpty)&&e?(r&&(r="\n"+r+"\n"),b(e+" {"+r,--s)+b("}",s)):r}var k=function(e){return e},x=function(){function e(e,t,n){this.type="style",this.key=void 0,this.isProcessed=!1,this.style=void 0,this.renderer=void 0,this.renderable=void 0,this.options=void 0;var r=n.sheet,i=n.Renderer;this.key=e,this.options=n,this.style=t,this.renderer=r?r.renderer:new i}return e.prototype.prop=function(e,t,n){if(void 0===t)return this.style[e];if(!(!!n&&n.force)&&this.style[e]===t)return this;var r=t;n&&!1===n.process\|\|(r=this.options.jss.plugins.onChangeValue(t,e,this));var i=null==r\|\|!1===r,s=e in this.style;if(i&&!s)return this;var o=i&&s;if(o?delete this.style[e]:this.style[e]=r,this.renderable)return o?this.renderer.removeProperty(this.renderable,e):this.renderer.setProperty(this.renderable,e,r),this;var u=this.options.sheet;return u&&u.attached&&a(!1,'[JSS] Rule is not linked. Missing sheet option "link: true".'),this},e}(),P=function(a){function e(e,t,n){var r;(r=a.call(this,e,t,n)\|\|this).selectorText=void 0,r.id=void 0,r.renderable=void 0;var i=n.selector,s=n.scoped,o=n.sheet,u=n.generateId;return i?r.selectorText=i:!1!==s&&(r.id=u(g(g(r)),o),r.selectorText="."+k(r.id)),r}v(e,a);var t=e.prototype;return t.applyTo=function(e){var t=this.toJSON();for(var n in t)this.renderer.setProperty(e,n,t[n]);return this},t.toJSON=function(){var e={};for(var t in this.style){var n=this.style[t];"object"!=typeof n?e[t]=n:Array.isArray(n)&&(e[t]=S(n))}return e},t.toString=function(e){var t=this.options.sheet,n=!!t&&t.options.link?c({},e,{allowEmpty:!0}):e;return R(this.selectorText,this.style,n)},y(e,[{key:"selector",set:function(e){e!==this.selectorText&&(this.selectorText=e,this.renderable&&(this.renderer.setSelector(this.renderable,e)\|\|this.renderer.replaceRule(this.renderable,this)))},get:function(){return this.selectorText}}]),e}(x),w={onCreateRule:function(e,t,n){return"@"===e[0]\|\|n.parent&&"keyframes"===n.parent.type?null:new P(e,t,n)}},O={indent:1,children:!0},j=/@([\w-]+)/,C=function(){function e(e,t,n){this.type="conditional",this.at=void 0,this.key=void 0,this.rules=void 0,this.options=void 0,this.isProcessed=!1,this.renderable=void 0;var r=(this.key=e).match(j);for(var i in this.at=r?r[1]:"unknown",this.options=n,this.rules=new K(c({},n,{parent:this})),t)this.rules.add(i,t[i]);this.rules.process()}var t=e.prototype;return t.getRule=function(e){return this.rules.get(e)},t.indexOf=function(e){return this.rules.indexOf(e)},t.addRule=function(e,t,n){var r=this.rules.add(e,t,n);return r?(this.options.jss.plugins.onProcessRule(r),r):null},t.toString=function(e){if(void 0===e&&(e=O),!1===e.children)return this.key+" {}";var t=this.rules.toString(e);return t?this.key+" {\n"+t+"\n}":""},e}(),A=/@media\|@supports\s+/,I={onCreateRule:function(e,t,n){return A.test(e)?new C(e,t,n):null}},T={indent:1,children:!0},M=/@keyframes\s+([\w-]+)/,J=function(){function e(e,t,n){this.type="keyframes",this.at="@keyframes",this.key=void 0,this.name=void 0,this.id=void 0,this.rules=void 0,this.options=void 0,this.isProcessed=!1,this.renderable=void 0;var r=e.match(M);r&&r[1]?this.name=r[1]:(this.name="noname",a(!1,"[JSS] Bad keyframes name %s",e)),this.key=this.type+"-"+this.name;var i=(this.options=n).scoped,s=n.sheet,o=n.generateId;for(var u in this.id=!1===i?this.name:o(this,s),this.rules=new K(c({},n,{parent:this})),t)this.rules.add(u,t[u],c({},n,{parent:this}));this.rules.process()}return e.prototype.toString=function(e){if(void 0===e&&(e=T),!1===e.children)return this.at+" "+this.id+" {}";var t=this.rules.toString(e);return t&&(t="\n"+t+"\n"),this.at+" "+this.id+" {"+t+"}"},e}(),V=/@keyframes\s+/,q=/\$([\w-]+)/,E=function(e,t,n){var r=e[t];if("string"==typeof r){var i=q.exec(r);if(!i)return;i[1]in n?e[t]=r.replace(i[0],n[i[1]]):a(!1,'[JSS] Referenced keyframes rule "%s" is not defined.',i[1])}},N={onCreateRule:function(e,t,n){return V.test(e)?new J(e,t,n):null},onProcessStyle:function(e,t,n){return"style"===t.type&&n&&("animation-name"in e&&E(e,"animation-name",n.keyframes),"animation"in e&&E(e,"animation",n.keyframes)),e}},U=function(i){function e(){for(var e,t=arguments.length,n=new Array(t),r=0;r<t;r++)n[r]=arguments[r];return(e=i.call.apply(i,[this].concat(n))\|\|this).renderable=void 0,e}return v(e,i),e.prototype.toString=function(e){var t=this.options.sheet,n=!!t&&t.options.link?c({},e,{allowEmpty:!0}):e;return R(this.key,this.style,n)},e}(x),G={onCreateRule:function(e,t,n){return n.parent&&"keyframes"===n.parent.type?new U(e,t,n):null}},_=function(){function e(e,t,n){this.type="font-face",this.at="@font-face",this.key=void 0,this.style=void 0,this.options=void 0,this.isProcessed=!1,this.renderable=void 0,this.key=e,this.style=t,this.options=n}return e.prototype.toString=function(e){if(Array.isArray(this.style)){for(var t="",n=0;n<this.style.length;n++)t+=R(this.key,this.style[n]),this.style[n+1]&&(t+="\n");return t}return R(this.key,this.style,e)},e}(),B={onCreateRule:function(e,t,n){return"@font-face"===e?new _(e,t,n):null}},D=function(){function e(e,t,n){this.type="viewport",this.at="@viewport",this.key=void 0,this.style=void 0,this.options=void 0,this.isProcessed=!1,this.renderable=void 0,this.key=e,this.style=t,this.options=n}return e.prototype.toString=function(e){return R(this.key,this.style,e)},e}(),z={onCreateRule:function(e,t,n){return"@viewport"===e\|\|"@-ms-viewport"===e?new D(e,t,n):null}},F=function(){function e(e,t,n){this.type="simple",this.key=void 0,this.value=void 0,this.options=void 0,this.isProcessed=!1,this.renderable=void 0,this.key=e,this.value=t,this.options=n}return e.prototype.toString=function(e){if(Array.isArray(this.value)){for(var t="",n=0;n<this.value.length;n++)t+=this.key+" "+this.value[n]+";",this.value[n+1]&&(t+="\n");return t}return this.key+" "+this.value+";"},e}(),L={"@charset":!0,"@import":!0,"@namespace":!0},Y=[w,I,N,G,B,z,{onCreateRule:function(e,t,n){return e in L?new F(e,t,n):null}}],$={process:!0},H={force:!0,process:!0},K=function(){function l(e){this.map={},this.raw={},this.index=[],this.options=void 0,this.classes=void 0,this.keyframes=void 0,this.options=e,this.classes=e.classes,this.keyframes=e.keyframes}var e=l.prototype;return e.add=function(e,t,n){var r=this.options,i=r.parent,s=r.sheet,o=r.jss,u=r.Renderer,a=r.generateId,h=r.scoped,l=c({classes:this.classes,parent:i,sheet:s,jss:o,Renderer:u,generateId:a,scoped:h},n);this.raw[e]=t,e in this.classes&&(l.selector="."+k(this.classes[e]));var d=p(e,t,l);if(!d)return null;this.register(d);var f=void 0===l.index?this.index.length:l.index;return this.index.splice(f,0,d),d},e.get=function(e){return this.map[e]},e.remove=function(e){this.unregister(e),delete this.raw[e.key],this.index.splice(this.indexOf(e),1)},e.indexOf=function(e){return this.index.indexOf(e)},e.process=function(){var e=this.options.jss.plugins;this.index.slice(0).forEach(e.onProcessRule,e)},e.register=function(e){(this.map[e.key]=e)instanceof P?(this.map[e.selector]=e).id&&(this.classes[e.key]=e.id):e instanceof J&&this.keyframes&&(this.keyframes[e.name]=e.id)},e.unregister=function(e){delete this.map[e.key],e instanceof P?(delete this.map[e.selector],delete this.classes[e.key]):e instanceof J&&delete this.keyframes[e.name]},e.update=function(){var e,t,n;if("string"==typeof(arguments.length<=0?void 0:arguments[0])?(e=arguments.length<=0?void 0:arguments[0],t=arguments.length<=1?void 0:arguments[1],n=arguments.length<=2?void 0:arguments[2]):(t=arguments.length<=0?void 0:arguments[0],n=arguments.length<=1?void 0:arguments[1],e=null),e)this.onUpdate(t,this.get(e),n);else for(var r=0;r<this.index.length;r++)this.onUpdate(t,this.index[r],n)},e.onUpdate=function(e,t,n){void 0===n&&(n=$);var r=this.options,i=r.jss.plugins,s=r.sheet;if(t.rules instanceof l)t.rules.update(e,n);else{var o=t,u=o.style;if(i.onUpdate(e,t,s,n),n.process&&u&&u!==o.style)for(var a in i.onProcessStyle(o.style,o,s),o.style){var h=o.style[a];h!==u[a]&&o.prop(a,h,H)}}},e.toString=function(e){for(var t="",n=this.options.sheet,r=!!n&&n.options.link,i=0;i<this.index.length;i++){var s=this.index[i].toString(e);(s\|\|r)&&(t&&(t+="\n"),t+=s)}return t},l}(),Q=function(){function e(e,t){for(var n in this.options=void 0,this.deployed=void 0,this.attached=void 0,this.rules=void 0,this.renderer=void 0,this.classes=void 0,this.keyframes=void 0,this.queue=void 0,this.attached=!1,this.deployed=!1,this.classes={},this.keyframes={},this.options=c({},t,{sheet:this,parent:this,classes:this.classes,keyframes:this.keyframes}),this.renderer=new t.Renderer(this),this.rules=new K(this.options),e)this.rules.add(n,e[n]);this.rules.process()}var t=e.prototype;return t.attach=function(){return this.attached\|\|(this.renderer.attach(),this.attached=!0,this.deployed\|\|this.deploy()),this},t.detach=function(){return this.attached&&(this.renderer.detach(),this.attached=!1),this},t.addRule=function(e,t,n){var r=this.queue;this.attached&&!r&&(this.queue=[]);var i=this.rules.add(e,t,n);return i?(this.options.jss.plugins.onProcessRule(i),this.attached?this.deployed&&(r?r.push(i):(this.insertRule(i),this.queue&&(this.queue.forEach(this.insertRule,this),this.queue=void 0))):this.deployed=!1,i):null},t.insertRule=function(e){this.renderer.insertRule(e)},t.addRules=function(e,t){var n=[];for(var r in e){var i=this.addRule(r,e[r],t);i&&n.push(i)}return n},t.getRule=function(e){return this.rules.get(e)},t.deleteRule=function(e){var t=this.rules.get(e);return!!t&&(this.rules.remove(t),!this.attached\|\|!t.renderable\|\|this.renderer.deleteRule(t.renderable))},t.indexOf=function(e){return this.rules.indexOf(e)},t.deploy=function(){return this.renderer.deploy(),this.deployed=!0,this},t.update=function(){var e;return(e=this.rules).update.apply(e,arguments),this},t.toString=function(e){return this.rules.toString(e)},e}(),W=function(){function e(){this.plugins={internal:[],external:[]},this.registry=void 0}var t=e.prototype;return t.onCreateRule=function(e,t,n){for(var r=0;r<this.registry.onCreateRule.length;r++){var i=this.registry.onCreateRule[r](e,t,n);if(i)return i}return null},t.onProcessRule=function(e){if(!e.isProcessed){for(var t=e.options.sheet,n=0;n<this.registry.onProcessRule.length;n++)this.registry.onProcessRule[n](e,t);e.style&&this.onProcessStyle(e.style,e,t),e.isProcessed=!0}},t.onProcessStyle=function(e,t,n){for(var r=0;r<this.registry.onProcessStyle.length;r++)t.style=this.registry.onProcessStyle[r](t.style,t,n)},t.onProcessSheet=function(e){for(var t=0;t<this.registry.onProcessSheet.length;t++)this.registry.onProcessSheet[t](e)},t.onUpdate=function(e,t,n,r){for(var i=0;i<this.registry.onUpdate.length;i++)this.registry.onUpdate[i](e,t,n,r)},t.onChangeValue=function(e,t,n){for(var r=e,i=0;i<this.registry.onChangeValue.length;i++)r=this.registry.onChangeValue[i](r,t,n);return r},t.use=function(e,t){void 0===t&&(t={queue:"external"});var n=this.plugins[t.queue];-1===n.indexOf(e)&&(n.push(e),this.registry=this.plugins.external.concat(this.plugins.internal).reduce(function(e,t){for(var n in t)n in e?e[n].push(t[n]):a(!1,'[JSS] Unknown hook "%s".',n);return e},{onCreateRule:[],onProcessRule:[],onProcessStyle:[],onProcessSheet:[],onChangeValue:[],onUpdate:[]}))},e}(),X=function(){function e(){this.registry=[]}var t=e.prototype;return t.add=function(e){var t=this.registry,n=e.options.index;if(-1===t.indexOf(e))if(0===t.length\|\|n>=this.index)t.push(e);else for(var r=0;r<t.length;r++)if(t[r].options.index>n)return void t.splice(r,0,e)},t.reset=function(){this.registry=[]},t.remove=function(e){var t=this.registry.indexOf(e);this.registry.splice(t,1)},t.toString=function(t){return this.registry.filter(function(e){return e.attached}).map(function(e){return e.toString(t)}).join("\n")},y(e,[{key:"index",get:function(){return 0===this.registry.length?0:this.registry[this.registry.length-1].options.index}}]),e}(),Z=new X,ee="2f1acc6c3a606b082e5eef5e54414ffb";null==s[ee]&&(s[ee]=0);var te=s[ee]++,ne=function(){var i=0;return function(e,t){1e10<(i+=1)&&a(!1,"[JSS] You might have a memory leak. Rule counter is at %s.",i);var n="c",r="";return t&&(n=t.options.classNamePrefix\|\|"c",null!=t.options.jss.id&&(r+=t.options.jss.id)),""+n+te+r+i}},re=function(e){var t;return function(){return t\|\|(t=e()),t}};function ie(e,t){try{return"attributeStyleMap"in e?e.attributeStyleMap.get(t):e.style.getPropertyValue(t)}catch(e){return""}}function se(e,t,n){try{var r=n;if(Array.isArray(n)&&(r=S(n,!0),"!important"===n[n.length-1]))return e.style.setProperty(t,r,"important"),!0;"attributeStyleMap"in e?e.attributeStyleMap.set(t,r):e.style.setProperty(t,r)}catch(e){return!1}return!0}function oe(e,t){try{"attributeStyleMap"in e?e.attributeStyleMap.delete(t):e.style.removeProperty(t)}catch(e){a(!1,'[JSS] DOMException "%s" was thrown. Tried to remove property "%s".',e.message,t)}}function ue(e,t){return e.selectorText=t,e.selectorText===t}var ae=re(function(){return document.querySelector("head")});function he(e){var t=Z.registry;if(0<t.length){var n=function(e,t){for(var n=0;n<e.length;n++){var r=e[n];if(r.attached&&r.options.index>t.index&&r.options.insertionPoint===t.insertionPoint)return r}return null}(t,e);if(n)return{parent:n.renderer.element.parentNode,node:n.renderer.element};if(n=function(e,t){for(var n=e.length-1;0<=n;n--){var r=e[n];if(r.attached&&r.options.insertionPoint===t.insertionPoint)return r}return null}(t,e))return{parent:n.renderer.element.parentNode,node:n.renderer.element.nextSibling}}var r=e.insertionPoint;if(r&&"string"==typeof r){var i=function(e){for(var t=ae(),n=0;n<t.childNodes.length;n++){var r=t.childNodes[n];if(8===r.nodeType&&r.nodeValue.trim()===e)return r}return null}(r);if(i)return{parent:i.parentNode,node:i.nextSibling};a("jss"===r,'[JSS] Insertion point "%s" not found.',r)}return!1}var le=re(function(){var e=document.querySelector('meta[property="csp-nonce"]');return e?e.getAttribute("content"):null}),de=function(e,t,n){void 0===n&&(n=e.cssRules.length);try{if("insertRule"in e)e.insertRule(t,n);else if("appendRule"in e){e.appendRule(t)}}catch(e){return a(!1,"[JSS] Can not insert an unsupported rule \n\r%s",t),!1}return e.cssRules[n]},fe=function(){function e(e){this.getPropertyValue=ie,this.setProperty=se,this.removeProperty=oe,this.setSelector=ue,this.element=void 0,this.sheet=void 0,this.hasInsertedRules=!1,e&&Z.add(e),this.sheet=e;var t=this.sheet?this.sheet.options:{},n=t.media,r=t.meta,i=t.element;this.element=i\|\|document.createElement("style"),this.element.setAttribute("data-jss",""),n&&this.element.setAttribute("media",n),r&&this.element.setAttribute("data-meta",r);var s=le();s&&this.element.setAttribute("nonce",s)}var t=e.prototype;return t.attach=function(){!this.element.parentNode&&this.sheet&&(!function(e,t){var n=t.insertionPoint,r=he(t);if(!1!==r&&r.parent)r.parent.insertBefore(e,r.node);else if(n&&"number"==typeof n.nodeType){var i=n,s=i.parentNode;s?s.insertBefore(e,i.nextSibling):a(!1,"[JSS] Insertion point is not in the DOM.")}else ae().appendChild(e)}(this.element,this.sheet.options),this.hasInsertedRules&&(this.hasInsertedRules=!1,this.deploy()))},t.detach=function(){this.element.parentNode.removeChild(this.element)},t.deploy=function(){var e=this.sheet;e&&(e.options.link?e.rules.index.forEach(this.insertRule,this):this.element.textContent="\n"+e.toString()+"\n")},t.insertRule=function(e,t){var n=this.element.sheet;if("conditional"===e.type\|\|"keyframes"===e.type){var r=e,i=de(n,r.toString({children:!1}),t);return!1!==i&&(r.rules.index.forEach(function(e,t){var n=de(i,e.toString(),t);!1!==n&&(e.renderable=n)}),i)}var s=e.toString();if(!s)return!1;var o=de(n,s,t);return!1!==o&&(this.hasInsertedRules=!0,e.renderable=o)},t.deleteRule=function(e){var t=this.element.sheet,n=this.indexOf(e);return-1!==n&&(t.deleteRule(n),!0)},t.indexOf=function(e){for(var t=this.element.sheet.cssRules,n=0;n<t.length;n++)if(e===t[n])return n;return-1},t.replaceRule=function(e,t){var n=this.indexOf(e);return-1!==n&&(this.element.sheet.deleteRule(n),this.insertRule(t,n))},t.getRules=function(){return this.element.sheet.cssRules},e}(),ce=function(){function e(){}var t=e.prototype;return t.setProperty=function(){return!0},t.getPropertyValue=function(){return""},t.removeProperty=function(){},t.setSelector=function(){return!0},t.attach=function(){},t.detach=function(){},t.deploy=function(){},t.insertRule=function(){return!1},t.deleteRule=function(){return!0},t.replaceRule=function(){return!1},t.getRules=function(){},t.indexOf=function(){return-1},e}(),pe=0,ye=function(){function e(e){this.id=pe++,this.version="9.8.4",this.plugins=new W,this.options={createGenerateId:ne,Renderer:r?fe:ce,plugins:[]},this.generateId=ne();for(var t=0;t<Y.length;t++)this.plugins.use(Y[t],{queue:"internal"});this.setup(e)}var t=e.prototype;return t.setup=function(e){return void 0===e&&(e={}),e.createGenerateId&&(this.options.createGenerateId=e.createGenerateId,this.generateId=e.createGenerateId()),null!=e.insertionPoint&&(this.options.insertionPoint=e.insertionPoint),(e.virtual\|\|e.Renderer)&&(this.options.Renderer=e.Renderer\|\|(e.virtual?ce:fe)),e.plugins&&this.use.apply(this,e.plugins),this},t.createStyleSheet=function(e,t){void 0===t&&(t={});var n=t.index;"number"!=typeof n&&(n=0===Z.index?0:Z.index+1);var r=new Q(e,c({},t,{jss:this,generateId:t.generateId\|\|this.generateId,insertionPoint:this.options.insertionPoint,Renderer:this.options.Renderer,index:n}));return this.plugins.onProcessSheet(r),r},t.removeStyleSheet=function(e){return e.detach(),Z.remove(e),this},t.createRule=function(e,t,n){if(void 0===t&&(t={}),void 0===n&&(n={}),"object"==typeof e)return this.createRule(void 0,e,t);var r=c({},n,{jss:this,Renderer:this.options.Renderer});r.generateId\|\|(r.generateId=this.generateId),r.classes\|\|(r.classes={}),r.keyframes\|\|(r.keyframes={});var i=p(e,t,r);return i&&this.plugins.onProcessRule(i),i},t.use=function(){for(var t=this,e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return n.forEach(function(e){t.plugins.use(e)}),this},e}();var ve=function(){function e(){this.sheets=[],this.refs=[],this.keys=[]}var t=e.prototype;return t.get=function(e){var t=this.keys.indexOf(e);return this.sheets[t]},t.add=function(e,t){var n=this.sheets,r=this.refs,i=this.keys,s=n.indexOf(t);return-1!==s?s:(n.push(t),r.push(0),i.push(e),n.length-1)},t.manage=function(e){var t=this.keys.indexOf(e),n=this.sheets[t];return 0===this.refs[t]&&n.attach(),this.refs[t]++,this.keys[t]\|\|this.keys.splice(t,0,e),n},t.unmanage=function(e){var t=this.keys.indexOf(e);-1!==t?0<this.refs[t]&&(this.refs[t]--,0===this.refs[t]&&this.sheets[t].detach()):a(!1,"SheetsManager: can't find sheet to unmanage")},y(e,[{key:"size",get:function(){return this.keys.length}}]),e}(),ge="undefined"!=typeof CSS&&CSS&&"number"in CSS,me=function(e){return new ye(e)},Se=me();e.hasCSSTOMSupport=ge,e.create=me,e.default=Se,e.getDynamicStyles=function e(t){var n=null;for(var r in t){var i=t[r],s=typeof i;if("function"===s)n\|\|(n={}),n[r]=i;else if("object"===s&&null!==i&&!Array.isArray(i)){var o=e(i);o&&(n\|\|(n={}),n[r]=o)}}return n},e.toCssValue=S,e.createRule=p,e.SheetsRegistry=X,e.SheetsManager=ve,e.RuleList=K,e.sheets=Z,e.createGenerateId=ne,Object.defineProperty(e,"__esModule",{value:!0})});

136

package.json

		{
		"name": "jss",
		"description": "A lib for generating Style Sheets with JavaScript.",
		"version": "9.8.7",
		"version": "10.0.0-alpha.2",
		"license": "MIT",
		"homepage": "https://cssinjs.org/",
		"main": "dist/jss.cjs.js",
		"module": "dist/jss.esm.js",
		"unpkg": "dist/jss.bundle.js",
		"typings": "./src/index.d.ts",
		"author": {
		"name": "Oleg Slobodskoi",
		"name": "Oleg Isonen (Slobodskoi)",
		"email": "oleg008@gmail.com"
		@@ -13,2 +19,10 @@ },
		},
		"bugs": {
		"url": "https://github.com/cssinjs/jss/issues/new"
		},
		"files": [
		"dist",
		"src",
		"LICENSE"
		],
		"keywords": [
		@@ -25,120 +39,12 @@ "jss",
		],
		"license": "MIT",
		"main": "./lib/index.js",
		"engines": {
		"node": ">=4"
		},
		"devDependencies": {
		"babel-cli": "^6.18.0",
		"babel-core": "^6.20.0",
		"babel-eslint": "^8.2.3",
		"babel-loader": "^6.2.9",
		"babel-plugin-external-helpers": "^6.22.0",
		"babel-plugin-inline-version": "^1.0.2",
		"babel-plugin-rewire": "^1.0.0",
		"babel-plugin-transform-es3-member-expression-literals": "^6.8.0",
		"babel-plugin-transform-es3-property-literals": "^6.8.0",
		"babel-plugin-transform-flow-strip-types": "^6.18.0",
		"babel-plugin-transform-inline-environment-variables": "^6.8.0",
		"babel-plugin-transform-runtime": "^6.23.0",
		"babel-preset-env": "^1.7.0",
		"babel-preset-es2015": "^6.18.0",
		"babel-preset-flow": "^6.23.0",
		"babel-preset-stage-0": "^6.16.0",
		"codecov": "^1.0.1",
		"common-tags": "^1.4.0",
		"cross-env": "^3.1.3",
		"css.escape": "^1.5.1",
		"detect-browser": "^1.5.0",
		"es5-shim": "^4.5.9",
		"eslint": "^4.19.1",
		"eslint-config-airbnb": "^13.0.0",
		"eslint-config-jss": "^3.0.0",
		"eslint-config-prettier": "^2.9.0",
		"eslint-plugin-flowtype": "^2.29.1",
		"eslint-plugin-import": "^2.2.0",
		"eslint-plugin-jsx-a11y": "^2.2.3",
		"eslint-plugin-react": "^6.5.0",
		"expect.js": "^0.3.1",
		"flow-bin": "^0.73.0",
		"json-loader": "^0.5.4",
		"jss-cache": "^2.0.0",
		"jss-camel-case": "^6.1.0",
		"jss-compose": "^4.0.0",
		"jss-default-unit": "^7.0.0",
		"jss-expand": "^4.0.0",
		"jss-extend": "^6.2.0",
		"jss-global": "^2.0.0",
		"jss-isolate": "^4.0.0",
		"jss-nested": "^5.0.0",
		"jss-props-sort": "^5.0.0",
		"jss-vendor-prefixer": "^6.0.0",
		"karma": "^1.3.0",
		"karma-benchmark": "^0.6.0",
		"karma-benchmark-reporter": "^0.1.1",
		"karma-browserstack-launcher": "^1.1.1",
		"karma-chrome-launcher": "^2.0.0",
		"karma-coverage": "^1.1.1",
		"karma-mocha": "^1.3.0",
		"karma-mocha-reporter": "^2.2.1",
		"karma-sourcemap-loader": "^0.3.7",
		"karma-webpack": "^1.8.0",
		"lint-staged": "^3.2.2",
		"mocha": "^3.2.0",
		"pre-commit": "^1.1.3",
		"prettier": "^1.13.5",
		"rimraf": "^2.5.4",
		"rollup": "^0.58.2",
		"rollup-plugin-babel": "^3.0.4",
		"rollup-plugin-commonjs": "^9.1.3",
		"rollup-plugin-node-globals": "^1.2.1",
		"rollup-plugin-node-resolve": "^3.3.0",
		"rollup-plugin-replace": "^2.0.0",
		"rollup-plugin-size-snapshot": "^0.4.1",
		"rollup-plugin-uglify": "^3.0.0",
		"webpack": "^2.3.3",
		"zen-observable": "^0.6.0"
		},
		"scripts": {
		"all": "npm run lint && npm run typecheck && npm run test && npm run build",
		"build": "npm run clean && npm run build:lib && npm run build:umd && npm run build:tests",
		"build:lib": "babel src --out-dir lib && npm run build:flow",
		"build:umd": "rollup -c",
		"build:tests": "cross-env NODE_ENV=test webpack tests/index.js tmp/tests.js",
		"build:flow": "echo \"// @flow\n\nexport * from '../src';\" > lib/index.js.flow",
		"clean": "rimraf '{lib,dist,tmp}/*'",
		"typecheck": "flow check --max-warnings=0",
		"lint": "eslint ./src ./tests ./benchmark ./*.js && npm run typecheck && npm run format",
		"lint:staged": "lint-staged && npm run typecheck",
		"format": "prettier --write */.{js,md,json}",
		"test": "cross-env NODE_ENV=test karma start --single-run",
		"test:watch": "cross-env NODE_ENV=test karma start",
		"posttest": "cross-env SNAPSHOT=match rollup -c && [ -z \"$TRAVIS\" ] \|\| codecov",
		"codecov": "codecov",
		"bench": "cross-env BENCHMARK=true karma start --single-run",
		"prepublishOnly": "npm run all",
		"postinstall": "node -e \"console.log('\\u001b[35m\\u001b[1mLove JSS? You can now support us on open collective:\\u001b[22m\\u001b[39m\\n > \\u001b[34mhttps://opencollective.com/jss/donate\\u001b[0m')\""
		"build": "node ../../scripts/build.js",
		"check-snapshot": "node ../../scripts/match-snapshot.js"
		},
		"dependencies": {
		"@babel/runtime": "^7.0.0",
		"is-in-browser": "^1.1.3",
		"symbol-observable": "^1.1.0",
		"symbol-observable": "^1.2.0",
		"warning": "^3.0.0"
		},
		"files": [
		"dist",
		"lib",
		"src",
		"readme.md",
		"changelog.md",
		"LICENSE"
		],
		"lint-staged": {
		"*/.{js,md,json}": [
		"prettier"
		],
		"*/.js": [
		"eslint"
		]
		},
		"pre-commit": "lint:staged"
		}
		}

src/index.js

		@@ -5,3 +5,3 @@ /* @flow */
		*
		* @copyright Oleg Slobodskoi 2014-present
		* @copyright Oleg Isonen (Slobodskoi) / Isonen 2014-present
		* @website https://github.com/cssinjs/jss
		@@ -11,5 +11,51 @@ * @license MIT
		import Jss from './Jss'
		import type StyleSheet from './StyleSheet'
		import type {
		ConditionalRule,
		KeyframesRule,
		StyleRule,
		ViewportRule,
		SimpleRule,
		FontFaceRule
		} from './plugins'
		import type {JssOptions} from './types'

		/**
		* Export types for better typing inside plugins and integrations.
		*/
		export type {
		StyleSheetFactoryOptions,
		JssValue,
		JssOptions,
		JssStyle,
		Plugin,
		GenerateId,
		RuleListOptions,
		Rule,
		Renderer,
		RuleOptions,
		UpdateOptions,
		Classes,
		BaseRule,
		ContainerRule
		} from './types'

		export type {
		Jss,
		StyleSheet,
		ConditionalRule,
		KeyframesRule,
		StyleRule,
		ViewportRule,
		SimpleRule,
		FontFaceRule
		}

		/**
		* Export a constant indicating if this browser has CSSTOM support.
		* https://developers.google.com/web/updates/2018/03/cssom
		*/
		export const hasCSSTOMSupport = typeof CSS !== 'undefined' && CSS && 'number' in CSS

		/**
		* Extracts a styles object with only rules that contain function values.
		@@ -25,2 +71,7 @@ */
		/**
		* Create a rule instance.
		*/
		export {default as createRule} from './utils/createRule'

		/**
		* SheetsRegistry for SSR.
		@@ -48,3 +99,3 @@ */
		*/
		export {default as createGenerateClassName} from './utils/createGenerateClassName'
		export {default as createGenerateId} from './utils/createGenerateId'

		@@ -51,0 +102,0 @@ /**

src/Jss.js

		@@ -5,8 +5,5 @@ /* @flow */
		import PluginsRegistry from './PluginsRegistry'
		import rulesPlugins from './plugins/rules'
		import observablesPlugin from './plugins/observables'
		import functionsPlugin from './plugins/functions'
		import sheets from './sheets'
		import StyleRule from './rules/StyleRule'
		import createGenerateClassNameDefault from './utils/createGenerateClassName'
		import {plugins as internalPlugins} from './plugins/index'
		import createGenerateIdDefault from './utils/createGenerateId'
		import createRule from './utils/createRule'
		@@ -24,9 +21,5 @@ import DomRenderer from './renderers/DomRenderer'
		JssStyle,
		generateClassName
		GenerateId
		} from './types'

		declare var __VERSION__: string

		const defaultPlugins = rulesPlugins.concat([observablesPlugin, functionsPlugin])

		let instanceCounter = 0
		@@ -37,3 +30,3 @@

		version = __VERSION__
		version = process.env.VERSION

		@@ -43,3 +36,3 @@ plugins = new PluginsRegistry()
		options: InternalJssOptions = {
		createGenerateClassName: createGenerateClassNameDefault,
		createGenerateId: createGenerateIdDefault,
		Renderer: isInBrowser ? DomRenderer : VirtualRenderer,
		@@ -49,15 +42,21 @@ plugins: []

		generateClassName: generateClassName = createGenerateClassNameDefault()
		generateId: GenerateId = createGenerateIdDefault()

		constructor(options?: JssOptions) {
		// eslint-disable-next-line prefer-spread
		this.use.apply(this, defaultPlugins)
		for (let i = 0; i < internalPlugins.length; i++) {
		this.plugins.use(internalPlugins[i], {queue: 'internal'})
		}
		this.setup(options)
		}

		/**
		* Prepares various options, applies plugins.
		* Should not be used twice on the same instance, because there is no plugins
		* deduplication logic.
		*/
		setup(options?: JssOptions = {}): this {
		if (options.createGenerateClassName) {
		this.options.createGenerateClassName = options.createGenerateClassName
		if (options.createGenerateId) {
		this.options.createGenerateId = options.createGenerateId
		// $FlowFixMe
		this.generateClassName = options.createGenerateClassName()
		this.generateId = options.createGenerateId()
		}
		@@ -80,3 +79,3 @@
		createStyleSheet(styles: Object, options: StyleSheetFactoryOptions = {}): StyleSheet {
		let index = options.index
		let {index} = options
		if (typeof index !== 'number') {
		@@ -87,4 +86,4 @@ index = sheets.index === 0 ? 0 : sheets.index + 1
		...options,
		jss: (this: Jss),
		generateClassName: options.generateClassName \|\| this.generateClassName,
		jss: this,
		generateId: options.generateId \|\| this.generateId,
		insertionPoint: this.options.insertionPoint,
		@@ -111,26 +110,18 @@ Renderer: this.options.Renderer,
		*/
		createRule(name?: string, style?: JssStyle = {}, options?: RuleFactoryOptions = {}): Rule {
		createRule(name?: string, style?: JssStyle = {}, options?: RuleFactoryOptions = {}): Rule \| null {
		// Enable rule without name for inline styles.
		if (typeof name === 'object') {
		options = style
		style = name
		name = undefined
		return this.createRule(undefined, name, style)
		}

		// Cast from RuleFactoryOptions to RuleOptions
		// https://stackoverflow.com/questions/41328728/force-casting-in-flow
		const ruleOptions: RuleOptions = (options: any)
		const ruleOptions: RuleOptions = {...options, jss: this, Renderer: this.options.Renderer}

		ruleOptions.jss = this
		ruleOptions.Renderer = this.options.Renderer
		if (!ruleOptions.generateClassName) ruleOptions.generateClassName = this.generateClassName
		if (!ruleOptions.generateId) ruleOptions.generateId = this.generateId
		if (!ruleOptions.classes) ruleOptions.classes = {}
		if (!ruleOptions.keyframes) ruleOptions.keyframes = {}

		const rule = createRule(name, style, ruleOptions)

		if (!ruleOptions.selector && rule instanceof StyleRule) {
		rule.selector = `.${ruleOptions.generateClassName(rule)}`
		}
		if (rule) this.plugins.onProcessRule(rule)

		this.plugins.onProcessRule(rule)

		return rule
		@@ -144,7 +135,3 @@ }
		plugins.forEach(plugin => {
		// Avoids applying same plugin twice, at least based on ref.
		if (this.options.plugins.indexOf(plugin) === -1) {
		this.options.plugins.push(plugin)
		this.plugins.use(plugin)
		}
		this.plugins.use(plugin)
		})
		@@ -151,0 +138,0 @@

104

src/PluginsRegistry.js

		/* @flow */
		import warning from 'warning'
		import type StyleSheet from './StyleSheet'
		import type {Plugin, Rule, RuleOptions, JssStyle} from './types'
		import type {
		Plugin,
		Rule,
		RuleOptions,
		UpdateOptions,
		JssStyle,
		JssValue,
		OnCreateRule,
		OnProcessRule,
		OnProcessStyle,
		OnProcessSheet,
		OnChangeValue,
		OnUpdate
		} from './types'
		import type {StyleRule} from './plugins/styleRule'

		type Registry = {
		onCreateRule: Array<OnCreateRule>,
		onProcessRule: Array<OnProcessRule>,
		onProcessStyle: Array<OnProcessStyle>,
		onProcessSheet: Array<OnProcessSheet>,
		onChangeValue: Array<OnChangeValue>,
		onUpdate: Array<OnUpdate>
		}

		export default class PluginsRegistry {
		hooks: {[key: string]: Array<Function>} = {
		onCreateRule: [],
		onProcessRule: [],
		onProcessStyle: [],
		onProcessSheet: [],
		onChangeValue: [],
		onUpdate: []
		plugins: {
		internal: Array<Plugin>,
		external: Array<Plugin>
		} = {
		internal: [],
		external: []
		}

		registry: Registry

		/**
		@@ -20,6 +44,7 @@ * Call `onCreateRule` hooks and return an object if returned by a hook.
		onCreateRule(name?: string, decl: JssStyle, options: RuleOptions): Rule \| null {
		for (let i = 0; i < this.hooks.onCreateRule.length; i++) {
		const rule = this.hooks.onCreateRule[i](name, decl, options)
		for (let i = 0; i < this.registry.onCreateRule.length; i++) {
		const rule = this.registry.onCreateRule[i](name, decl, options)
		if (rule) return rule
		}

		return null
		@@ -34,4 +59,4 @@ }
		const {sheet} = rule.options
		for (let i = 0; i < this.hooks.onProcessRule.length; i++) {
		this.hooks.onProcessRule[i](rule, sheet)
		for (let i = 0; i < this.registry.onProcessRule.length; i++) {
		this.registry.onProcessRule[i](rule, sheet)
		}
		@@ -49,8 +74,5 @@
		onProcessStyle(style: JssStyle, rule: Rule, sheet?: StyleSheet): void {
		let nextStyle = style

		for (let i = 0; i < this.hooks.onProcessStyle.length; i++) {
		nextStyle = this.hooks.onProcessStyle[i](nextStyle, rule, sheet)
		for (let i = 0; i < this.registry.onProcessStyle.length; i++) {
		// $FlowFixMe
		rule.style = nextStyle
		rule.style = this.registry.onProcessStyle[i](rule.style, rule, sheet)
		}
		@@ -63,4 +85,4 @@ }
		onProcessSheet(sheet: StyleSheet): void {
		for (let i = 0; i < this.hooks.onProcessSheet.length; i++) {
		this.hooks.onProcessSheet[i](sheet)
		for (let i = 0; i < this.registry.onProcessSheet.length; i++) {
		this.registry.onProcessSheet[i](sheet)
		}
		@@ -72,5 +94,5 @@ }
		*/
		onUpdate(data: Object \| void, rule: Rule, sheet: StyleSheet): void {
		for (let i = 0; i < this.hooks.onUpdate.length; i++) {
		this.hooks.onUpdate[i](data, rule, sheet)
		onUpdate(data: Object, rule: Rule, sheet: StyleSheet, options: UpdateOptions): void {
		for (let i = 0; i < this.registry.onUpdate.length; i++) {
		this.registry.onUpdate[i](data, rule, sheet, options)
		}
		@@ -82,6 +104,6 @@ }
		*/
		onChangeValue(value: string, prop: string, rule: Rule): string {
		onChangeValue(value: JssValue, prop: string, rule: StyleRule): JssValue {
		let processedValue = value
		for (let i = 0; i < this.hooks.onChangeValue.length; i++) {
		processedValue = this.hooks.onChangeValue[i](processedValue, prop, rule)
		for (let i = 0; i < this.registry.onChangeValue.length; i++) {
		processedValue = this.registry.onChangeValue[i](processedValue, prop, rule)
		}
		@@ -93,10 +115,32 @@ return processedValue
		* Register a plugin.
		* If function is passed, it is a shortcut for `{onProcessRule}`.
		*/
		use(plugin: Plugin): void {
		for (const name in plugin) {
		if (this.hooks[name]) this.hooks[name].push(plugin[name])
		else warning(false, '[JSS] Unknown hook "%s".', name)
		use(newPlugin: Plugin, options: {queue: 'internal' \| 'external'} = {queue: 'external'}): void {
		const plugins = this.plugins[options.queue]

		// Avoids applying same plugin twice, at least based on ref.
		if (plugins.indexOf(newPlugin) !== -1) {
		return
		}

		plugins.push(newPlugin)

		this.registry = [...this.plugins.external, ...this.plugins.internal].reduce(
		(registry: Registry, plugin: Plugin) => {
		for (const name in plugin) {
		if (name in registry) {
		registry[name].push(plugin[name])
		} else warning(false, '[JSS] Unknown hook "%s".', name)
		}
		return registry
		},
		{
		onCreateRule: [],
		onProcessRule: [],
		onProcessStyle: [],
		onProcessSheet: [],
		onChangeValue: [],
		onUpdate: []
		}
		)
		}
		}

258

src/renderers/DomRenderer.js

		@@ -5,4 +5,12 @@ /* @flow */
		import type StyleSheet from '../StyleSheet'
		import StyleRule from '../rules/StyleRule'
		import type {CSSStyleRule, CSSOMRule, Rule, JssValue, InsertionPoint} from '../types'
		import type {
		CSSStyleRule,
		CSSMediaRule,
		CSSKeyframesRule,
		CSSKeyframeRule,
		Rule,
		ContainerRule,
		JssValue,
		InsertionPoint
		} from '../types'
		import toCssValue from '../utils/toCssValue'
		@@ -29,4 +37,12 @@
		*/
		function getPropertyValue(cssRule: HTMLElement \| CSSStyleRule, prop: string): string {
		function getPropertyValue(
		cssRule: HTMLElement \| CSSStyleRule \| CSSKeyframeRule,
		prop: string
		): string {
		try {
		// Support CSSTOM.
		if ('attributeStyleMap' in cssRule) {
		// $FlowFixMe
		return cssRule.attributeStyleMap.get(prop)
		}
		return cssRule.style.getPropertyValue(prop)
		@@ -42,3 +58,7 @@ } catch (err) {
		*/
		function setProperty(cssRule: HTMLElement \| CSSStyleRule, prop: string, value: JssValue): boolean {
		function setProperty(
		cssRule: HTMLElement \| CSSStyleRule \| CSSKeyframeRule,
		prop: string,
		value: JssValue
		): boolean {
		try {
		@@ -56,3 +76,9 @@ let cssValue = ((value: any): string)

		cssRule.style.setProperty(prop, cssValue)
		// Support CSSTOM.
		if ('attributeStyleMap' in cssRule) {
		// $FlowFixMe
		cssRule.attributeStyleMap.set(prop, cssValue)
		} else {
		cssRule.style.setProperty(prop, cssValue)
		}
		} catch (err) {
		@@ -68,5 +94,11 @@ // IE may throw if property is unknown.
		*/
		function removeProperty(cssRule: HTMLElement \| CSSStyleRule, prop: string) {
		function removeProperty(cssRule: HTMLElement \| CSSStyleRule \| CSSKeyframeRule, prop: string) {
		try {
		cssRule.style.removeProperty(prop)
		// Support CSSTOM.
		if ('attributeStyleMap' in cssRule) {
		// $FlowFixMe
		cssRule.attributeStyleMap.delete(prop)
		} else {
		cssRule.style.removeProperty(prop)
		}
		} catch (err) {
		@@ -82,35 +114,3 @@ warning(

		const CSSRuleTypes = {
		STYLE_RULE: 1,
		KEYFRAMES_RULE: 7
		}

		/**
		* Get the CSS Rule key.
		*/

		const getKey = (() => {
		const extractKey = (cssText: string, from: number = 0) =>
		cssText.substr(from, cssText.indexOf('{') - 1)

		return (cssRule: CSSOMRule): string => {
		if (cssRule.type === CSSRuleTypes.STYLE_RULE) return cssRule.selectorText
		if (cssRule.type === CSSRuleTypes.KEYFRAMES_RULE) {
		const {name} = cssRule
		if (name) return `@keyframes ${name}`

		// There is no rule.name in the following browsers:
		// - IE 9
		// - Safari 7.1.8
		// - Mobile Safari 9.0.0
		const {cssText} = cssRule
		return `@${extractKey(cssText, cssText.indexOf('keyframes'))}`
		}

		// Conditionals.
		return extractKey(cssRule.cssText)
		}
		})()

		/**
		* Set the selector.
		@@ -128,53 +128,7 @@ */
		* Gets the `head` element upon the first call and caches it.
		* We assume it can't be null.
		*/
		const getHead = memoize(
		(): HTMLElement => document.head \|\| document.getElementsByTagName('head')[0]
		)
		const getHead = memoize((): HTMLElement => (document.querySelector('head'): any))

		/**
		* Gets a map of rule keys, where the property is an unescaped key and value
		* is a potentially escaped one.
		* It is used to identify CSS rules and the corresponding JSS rules. As an identifier
		* for CSSStyleRule we normally use `selectorText`. Though if original selector text
		* contains escaped code points e.g. `:not(#\\20)`, CSSOM will compile it to `:not(# )`
		* and so CSS rule's `selectorText` won't match JSS rule selector.
		*
		* https://www.w3.org/International/questions/qa-escapes#cssescapes
		*/
		const getUnescapedKeysMap = (() => {
		let style
		let isAttached = false

		return (rules: Array<Rule>): Object => {
		const map = {}
		// https://github.com/facebook/flow/issues/2696
		if (!style) style = (document.createElement('style'): any)
		for (let i = 0; i < rules.length; i++) {
		const rule = rules[i]
		if (!(rule instanceof StyleRule)) continue
		const {selector} = rule
		// Only unescape selector over CSSOM if it contains a back slash.
		if (selector && selector.indexOf('\\') !== -1) {
		// Lazilly attach when needed.
		if (!isAttached) {
		getHead().appendChild(style)
		isAttached = true
		}
		style.textContent = `${selector} {}`
		const {sheet} = style
		if (sheet) {
		const {cssRules} = sheet
		if (cssRules) map[cssRules[0].selectorText] = rule.key
		}
		}
		}
		if (isAttached) {
		getHead().removeChild(style)
		isAttached = false
		}
		return map
		}
		})()

		/**
		* Find attached sheet with an index higher than the passed one.
		@@ -226,6 +180,11 @@ */

		type PrevNode = {
		parent: ?Node,
		node: ?Node
		}

		/**
		* Find a node before which we can insert the sheet.
		*/
		function findPrevNode(options: PriorityOptions): ?Node \| null {
		function findPrevNode(options: PriorityOptions): PrevNode \| false {
		const {registry} = sheets
		@@ -236,7 +195,17 @@
		let sheet = findHigherSheet(registry, options)
		if (sheet) return sheet.renderer.element
		if (sheet) {
		return {
		parent: sheet.renderer.element.parentNode,
		node: sheet.renderer.element
		}
		}

		// Otherwise insert after the last attached.
		sheet = findHighestSheet(registry, options)
		if (sheet) return sheet.renderer.element.nextElementSibling
		if (sheet) {
		return {
		parent: sheet.renderer.element.parentNode,
		node: sheet.renderer.element.nextSibling
		}
		}
		}
		@@ -248,3 +217,9 @@
		const comment = findCommentNode(insertionPoint)
		if (comment) return comment.nextSibling
		if (comment) {
		return {
		parent: comment.parentNode,
		node: comment.nextSibling
		}
		}

		// If user specifies an insertion point and it can't be found in the document -
		@@ -255,3 +230,3 @@ // bad specificity issues may appear.

		return null
		return false
		}
		@@ -264,7 +239,7 @@
		const {insertionPoint} = options
		const prevNode = findPrevNode(options)
		const nextNode = findPrevNode(options)

		if (prevNode) {
		const {parentNode} = prevNode
		if (parentNode) parentNode.insertBefore(style, prevNode)
		if (nextNode !== false && nextNode.parent) {
		nextNode.parent.insertBefore(style, nextNode.node)

		return
		@@ -283,3 +258,3 @@ }

		getHead().insertBefore(style, prevNode)
		getHead().appendChild(style)
		}
		@@ -297,2 +272,24 @@

		const insertRule = (
		container: CSSStyleSheet \| CSSKeyframesRule \| CSSMediaRule,
		rule: string,
		index?: number = container.cssRules.length
		): false \| Object => {
		try {
		if ('insertRule' in container) {
		const c = ((container: any): CSSStyleSheet)
		c.insertRule(rule, index)
		}
		// Keyframes rule.
		else if ('appendRule' in container) {
		const c = ((container: any): CSSKeyframesRule)
		c.appendRule(rule)
		}
		} catch (err) {
		warning(false, '[JSS] Can not insert an unsupported rule \n\r%s', rule)
		return false
		}
		return container.cssRules[index]
		}

		export default class DomRenderer {
		@@ -307,6 +304,2 @@ getPropertyValue = getPropertyValue

		getKey = getKey

		getUnescapedKeysMap = getUnescapedKeysMap

		// HTMLStyleElement needs fixing https://github.com/facebook/flow/issues/2696
		@@ -340,12 +333,12 @@ element: any

		insertStyle(this.element, this.sheet.options)

		// When rules are inserted using `insertRule` API, after `sheet.detach().attach()`
		// browsers remove those rules.
		// TODO figure out if its a bug and if it is known.
		// Workaround is to redeploy the sheet before attaching as a string.
		// Workaround is to redeploy the sheet.
		if (this.hasInsertedRules) {
		this.hasInsertedRules = false
		this.deploy()
		this.hasInsertedRules = false
		}

		insertStyle(this.element, this.sheet.options)
		}
		@@ -364,4 +357,9 @@
		deploy(): void {
		if (!this.sheet) return
		this.element.textContent = `\n${this.sheet.toString()}\n`
		const {sheet} = this
		if (!sheet) return
		if (sheet.options.link) {
		sheet.rules.index.forEach(this.insertRule, this)
		return
		}
		this.element.textContent = `\n${sheet.toString()}\n`
		}
		@@ -372,19 +370,31 @@
		*/
		insertRule(rule: Rule, index?: number): false \| CSSStyleRule {
		insertRule(rule: Rule, index?: number): false \| CSSRule {
		const {sheet} = this.element
		const {cssRules} = sheet
		const str = rule.toString()
		if (!index) index = cssRules.length

		if (!str) return false
		if (rule.type === 'conditional' \|\| rule.type === 'keyframes') {
		const containerRule: ContainerRule = (rule: any)
		// We need to render the container without children first.
		const cssRule = insertRule(sheet, containerRule.toString({children: false}), index)
		if (cssRule === false) {
		return false
		}
		containerRule.rules.index.forEach((childRule, childIndex) => {
		const cssChildRule = insertRule(cssRule, childRule.toString(), childIndex)
		if (cssChildRule !== false) childRule.renderable = cssChildRule
		})
		return cssRule
		}

		try {
		sheet.insertRule(str, index)
		} catch (err) {
		warning(false, '[JSS] Can not insert an unsupported rule \n\r%s', rule)
		const ruleStr = rule.toString()

		if (!ruleStr) return false

		const cssRule = insertRule(sheet, ruleStr, index)
		if (cssRule === false) {
		return false
		}

		this.hasInsertedRules = true

		return cssRules[index]
		rule.renderable = cssRule
		return cssRule
		}
		@@ -395,3 +405,3 @@
		*/
		deleteRule(cssRule: CSSStyleRule): boolean {
		deleteRule(cssRule: CSSRule): boolean {
		const {sheet} = this.element
		@@ -407,3 +417,3 @@ const index = this.indexOf(cssRule)
		*/
		indexOf(cssRule: CSSStyleRule): number {
		indexOf(cssRule: CSSRule): number {
		const {cssRules} = this.element.sheet
		@@ -418,8 +428,10 @@ for (let index = 0; index < cssRules.length; index++) {
		* Generate a new CSS rule and replace the existing one.
		*
		* Only used for some old browsers because they can't set a selector.
		*/
		replaceRule(cssRule: CSSStyleRule, rule: Rule): false \| CSSStyleRule {
		replaceRule(cssRule: CSSRule, rule: Rule): false \| CSSRule {
		const index = this.indexOf(cssRule)
		const newCssRule = this.insertRule(rule, index)
		if (index === -1) return false
		this.element.sheet.deleteRule(index)
		return newCssRule
		return this.insertRule(rule, index)
		}
		@@ -426,0 +438,0 @@

src/renderers/VirtualRenderer.js

		@@ -11,25 +11,33 @@ /* @flow */
		}

		getPropertyValue() {
		return ''
		}

		removeProperty() {}

		setSelector() {
		return true
		}
		getKey() {
		return ''
		}

		attach() {}

		detach() {}

		deploy() {}

		insertRule() {
		return false
		}

		deleteRule() {
		return true
		}

		replaceRule() {
		return false
		}

		getRules() {}

		indexOf() {
		@@ -36,0 +44,0 @@ return -1

140

src/RuleList.js

		/* @flow */
		import createRule from './utils/createRule'
		import linkRule from './utils/linkRule'
		import StyleRule from './rules/StyleRule'
		import type {RuleListOptions, ToCssOptions, Rule, RuleOptions, JssStyle, Classes} from './types'
		import {StyleRule, KeyframesRule} from './plugins/index'
		import type {
		RuleListOptions,
		ToCssOptions,
		Rule,
		RuleOptions,
		JssStyle,
		Classes,
		KeyframesMap,
		UpdateArguments
		} from './types'
		import escape from './utils/escape'

		type Update = ((name: string, data?: Object) => void) & ((data?: Object) => void)
		const defaultUpdateOptions = {
		process: true
		}

		const forceUpdateOptions = {
		force: true,
		process: true
		}

		/**
		@@ -29,5 +44,8 @@ * Contains rules objects and allows adding/removing etc.

		keyframes: KeyframesMap

		constructor(options: RuleListOptions) {
		this.options = options
		this.classes = options.classes
		this.keyframes = options.keyframes
		}
		@@ -40,6 +58,5 @@
		*/
		add(name: string, decl: JssStyle, options?: RuleOptions): Rule {
		const {parent, sheet, jss, Renderer, generateClassName} = this.options

		options = {
		add(key: string, decl: JssStyle, ruleOptions?: RuleOptions): Rule \| null {
		const {parent, sheet, jss, Renderer, generateId, scoped} = this.options
		const options = {
		classes: this.classes,
		@@ -50,23 +67,22 @@ parent,
		Renderer,
		generateClassName,
		...options
		generateId,
		scoped,
		...ruleOptions
		}

		if (!options.selector && this.classes[name]) {
		options.selector = `.${escape(this.classes[name])}`
		// We need to save the original decl before creating the rule
		// because cache plugin needs to use it as a key to return a cached rule.
		this.raw[key] = decl

		if (key in this.classes) {
		// For e.g. rules inside of @media container
		options.selector = `.${escape(this.classes[key])}`
		}

		this.raw[name] = decl
		const rule = createRule(key, decl, options)

		const rule = createRule(name, decl, options)
		if (!rule) return null

		let className
		this.register(rule)

		if (!options.selector && rule instanceof StyleRule) {
		className = generateClassName(rule, sheet)
		rule.selector = `.${escape(className)}`
		}

		this.register(rule, className)

		const index = options.index === undefined ? this.index.length : options.index
		@@ -90,2 +106,3 @@ this.index.splice(index, 0, rule)
		this.unregister(rule)
		delete this.raw[rule.key]
		this.index.splice(this.indexOf(rule), 1)
		@@ -114,7 +131,9 @@ }
		*/
		register(rule: Rule, className?: string): void {
		register(rule: Rule): void {
		this.map[rule.key] = rule
		if (rule instanceof StyleRule) {
		this.map[rule.selector] = rule
		if (className) this.classes[rule.key] = className
		if (rule.id) this.classes[rule.key] = rule.id
		} else if (rule instanceof KeyframesRule && this.keyframes) {
		this.keyframes[rule.name] = rule.id
		}
		@@ -131,2 +150,4 @@ }
		delete this.classes[rule.key]
		} else if (rule instanceof KeyframesRule) {
		delete this.keyframes[rule.name]
		}
		@@ -138,12 +159,25 @@ }
		*/
		update: Update = (name, data) => {
		const {
		jss: {plugins},
		sheet
		} = this.options
		if (typeof name === 'string') {
		plugins.onUpdate(data, this.get(name), sheet)
		update(...args: UpdateArguments): void {
		let name
		let data
		let options

		if (typeof args[0] === 'string') {
		name = args[0]
		// $FlowFixMe
		data = args[1]
		// $FlowFixMe
		options = args[2]
		} else {
		data = args[0]
		// $FlowFixMe
		options = args[1]
		name = null
		}

		if (name) {
		this.onUpdate(data, this.get(name), options)
		} else {
		for (let index = 0; index < this.index.length; index++) {
		plugins.onUpdate(name, this.index[index], sheet)
		this.onUpdate(data, this.index[index], options)
		}
		@@ -154,14 +188,38 @@ }
		/**
		* Link renderable rules with CSSRuleList.
		* Execute plugins, update rule props.
		*/
		link(cssRules: CSSRuleList): void {
		const map = this.options.sheet.renderer.getUnescapedKeysMap(this.index)
		onUpdate(data: Object, rule: Rule, options?: Object = defaultUpdateOptions) {
		const {
		jss: {plugins},
		sheet
		} = this.options

		for (let i = 0; i < cssRules.length; i++) {
		const cssRule = cssRules[i]
		let key = this.options.sheet.renderer.getKey(cssRule)
		if (map[key]) key = map[key]
		const rule = this.map[key]
		if (rule) linkRule(rule, cssRule)
		// It is a rules container like for e.g. ConditionalRule.
		if (rule.rules instanceof RuleList) {
		rule.rules.update(data, options)
		return
		}

		const styleRule: StyleRule = (rule: any)
		const {style} = styleRule

		plugins.onUpdate(data, rule, sheet, options)

		// We rely on a new `style` ref in case it was mutated during onUpdate hook.
		if (options.process && style && style !== styleRule.style) {
		// We need to run the plugins in case new `style` relies on syntax plugins.
		plugins.onProcessStyle(styleRule.style, styleRule, sheet)
		// Update, remove and add props.
		for (const prop in styleRule.style) {
		const nextValue = styleRule.style[prop]
		const prevValue = style[prop]
		// Since we use `force` option, we should optimize the `.prop()` call
		// for cases where the primive value has not changed.
		// It can't do that check, because it doesn't have the previous `style`
		// object.
		if (nextValue !== prevValue) {
		styleRule.prop(prop, nextValue, forceUpdateOptions)
		}
		}
		}
		}
		@@ -168,0 +226,0 @@

src/StyleSheet.js

		/* @flow */
		import linkRule from './utils/linkRule'
		import RuleList from './RuleList'
		@@ -10,14 +9,11 @@ import type {
		StyleSheetOptions,
		UpdateArguments,
		JssStyle,
		Classes
		Classes,
		KeyframesMap
		} from './types'

		/* eslint-disable-next-line no-use-before-define */
		type Update = ((name: string, data?: Object) => StyleSheet) & ((data?: Object) => StyleSheet)

		export default class StyleSheet {
		options: InternalStyleSheetOptions

		linked: boolean

		deployed: boolean
		@@ -33,2 +29,4 @@

		keyframes: KeyframesMap

		queue: ?Array<Rule>
		@@ -39,4 +37,4 @@
		this.deployed = false
		this.linked = false
		this.classes = {}
		this.keyframes = {}
		this.options = {
		@@ -46,3 +44,4 @@ ...options,
		parent: this,
		classes: this.classes
		classes: this.classes,
		keyframes: this.keyframes
		}
		@@ -64,6 +63,6 @@ this.renderer = new options.Renderer(this)
		if (this.attached) return this
		if (!this.deployed) this.deploy()
		this.renderer.attach()
		if (!this.linked && this.options.link) this.link()
		this.attached = true
		// Order is important, because we can't use insertRule API if style element is not attached.
		if (!this.deployed) this.deploy()
		return this
		@@ -86,3 +85,3 @@ }
		*/
		addRule(name: string, decl: JssStyle, options?: RuleOptions): Rule {
		addRule(name: string, decl: JssStyle, options?: RuleOptions): Rule \| null {
		const {queue} = this
		@@ -96,2 +95,5 @@
		const rule = this.rules.add(name, decl, options)

		if (!rule) return null

		this.options.jss.plugins.onProcessRule(rule)
		@@ -125,4 +127,3 @@
		insertRule(rule: Rule) {
		const renderable = this.renderer.insertRule(rule)
		if (renderable && this.options.link) linkRule(rule, renderable)
		this.renderer.insertRule(rule)
		}
		@@ -137,3 +138,4 @@
		for (const name in styles) {
		added.push(this.addRule(name, styles[name], options))
		const rule = this.addRule(name, styles[name], options)
		if (rule) added.push(rule)
		}
		@@ -185,22 +187,6 @@ return added
		/**
		* Link renderable CSS rules from sheet with their corresponding models.
		*/
		link(): this {
		const cssRules = this.renderer.getRules()

		// Is undefined when VirtualRenderer is used.
		if (cssRules) this.rules.link(cssRules)
		this.linked = true
		return this
		}

		/**
		* Update the function values with a new data.
		*/
		update: Update = (name, data) => {
		if (typeof name === 'string') {
		this.rules.update(name, data)
		} else {
		this.rules.update(name)
		}
		update(...args: UpdateArguments): this {
		this.rules.update(...args)
		return this
		@@ -207,0 +193,0 @@ }

src/types/cssom.js

		@@ -12,2 +12,9 @@ // @flow

		export interface CSSGroupingRule<T> extends CSSRuleBase<T> {
		// eslint-disable-next-line no-use-before-define
		+cssRules: CSSRuleList;
		insertRule(rule: DOMString, index: number): number;
		deleteRule(index: number): void;
		}

		export interface CSSStyleRule extends CSSRuleBase<{type: 1 \| 1}> {
		@@ -19,13 +26,34 @@ +type: 1;

		export interface CSSRuleList {
		length: number;
		[index: number]: CSSStyleRule;
		export interface CSSCharsetRule extends CSSRuleBase<{type: 2 \| 2}> {
		+type: 2;
		charset: DOMString;
		}

		export interface CSSGroupingRule<T> extends CSSRuleBase<T> {
		+cssRules: CSSRuleList;
		insertRule(rule: DOMString, index: number): number;
		deleteRule(index: number): void;
		export interface CSSImportRule extends CSSRuleBase<{type: 3 \| 3}> {
		+type: 3;
		+mediaList: {
		+mediaText: DOMString,
		length: number,
		item?: DOMString,
		appendMedium(medium: DOMString): void,
		deleteMedium(medium: DOMString): void
		};
		}

		export interface CSSMediaRule extends CSSGroupingRule<{type: 4 \| 4}> {
		+type: 4;
		+mediaList: {
		+mediaText: DOMString,
		length: number,
		item?: DOMString,
		appendMedium(medium: DOMString): void,
		deleteMedium(medium: DOMString): void
		};
		}

		export interface CSSFontFaceRule extends CSSRuleBase<{type: 5 \| 5}> {
		+type: 5;
		+style: CSSStyleDeclaration;
		}

		export interface CSSKeyframeRule extends CSSRuleBase<{type: 8 \| 8}> {
		@@ -46,13 +74,13 @@ +type: 8;

		export interface CSSMediaRule extends CSSGroupingRule<{type: 4 \| 4}> {
		+type: 4;
		+mediaList: {
		+mediaText: DOMString,
		length: number,
		item?: DOMString,
		appendMedium(medium: DOMString): void,
		deleteMedium(medium: DOMString): void
		};
		export interface CSSNamespaceRule extends CSSRuleBase<{type: 10 \| 10}> {
		+type: 10;
		namespaceURI: DOMString;
		prefix: DOMString;
		}

		export type CSSOMRule = CSSStyleRule \| CSSMediaRule \| CSSKeyframesRule
		export interface CSSViewportRule extends CSSRuleBase<{type: 15 \| 15}> {
		+type: 15;
		+style: CSSStyleDeclaration;
		}

		export type CSSSimpleRule = CSSCharsetRule \| CSSImportRule \| CSSNamespaceRule

src/types/index.js

		// @flow

		export * from './observable.js'
		export * from './cssom.js'
		export * from './jss.js'

116

src/types/jss.js

		/* @flow */
		import Jss from '../Jss'
		import StyleSheet from '../StyleSheet'
		import ConditionalRule from '../rules/ConditionalRule'
		import KeyframesRule from '../rules/KeyframesRule'
		import StyleRule from '../rules/StyleRule'
		import ViewportRule from '../rules/ViewportRule'
		import SimpleRule from '../rules/SimpleRule'
		import FontFaceRule from '../rules/FontFaceRule'
		import {ConditionalRule} from '../plugins/conditionalRule'
		import {KeyframesRule} from '../plugins/keyframesRule'
		import {StyleRule} from '../plugins/styleRule'
		import {ViewportRule} from '../plugins/viewportRule'
		import {SimpleRule} from '../plugins/simpleRule'
		import {FontFaceRule} from '../plugins/fontFaceRule'
		import type {CSSStyleRule} from './cssom'
		import type RuleList from '../RuleList'

		export type Classes = { [string]: string }
		export type Classes = {[string]: string}

		export type KeyframesMap = {[string]: string}

		export type ToCssOptions = {
		indent?: number,
		allowEmpty?: boolean
		allowEmpty?: boolean,
		children?: boolean
		}

		export type UpdateOptions = {
		process?: boolean,
		force?: boolean
		}

		export type UpdateArguments =
		\| [Object]
		\| [Object, UpdateOptions]
		\| [string, Object]
		\| [string, Object, UpdateOptions]

		export interface BaseRule {
		type: string;
		// Key is used as part of a class name and keyframes-name. It has to be
		// a valid CSS identifier https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier
		key: string;
		isProcessed: boolean;
		// eslint-disable-next-line no-use-before-define
		options: RuleOptions;
		renderable?: Object \| null \| void;
		toString(options?: ToCssOptions): string;
		}

		export type Rule =
		@@ -26,4 +53,5 @@ \| StyleRule
		\| ViewportRule
		\| BaseRule

		export type generateClassName = (rule: Rule, sheet?: StyleSheet) => string
		export type GenerateId = (rule: Rule, sheet?: StyleSheet) => string

		@@ -38,2 +66,5 @@ // TODO
		\| Array<string \| number \| Array<string \| number> \| '!important'>
		\| Object
		\| null
		\| false

		@@ -46,10 +77,9 @@ export interface Renderer {
		setSelector(cssRule: CSSStyleRule, selectorText: string): boolean;
		getKey(cssRule: CSSStyleRule): string;
		attach(): void;
		detach(): void;
		deploy(sheet: StyleSheet): void;
		insertRule(rule: Rule): false \| CSSStyleRule;
		deleteRule(cssRule: CSSStyleRule): boolean;
		replaceRule(cssRule: CSSStyleRule, rule: Rule): false \| CSSStyleRule;
		indexOf(cssRule: CSSStyleRule): number;
		insertRule(rule: Rule): false \| CSSRule;
		deleteRule(cssRule: CSSRule): boolean;
		replaceRule(cssRule: CSSRule, rule: Rule): false \| CSSRule;
		indexOf(cssRule: CSSRule): number;
		getRules(): CSSRuleList \| void;
		@@ -60,17 +90,26 @@ }
		selector?: string,
		classes?: Object,
		classes?: Classes,
		keyframes?: KeyframesMap,
		sheet?: StyleSheet,
		index?: number,
		jss?: Jss,
		generateClassName?: generateClassName,
		generateId?: GenerateId,
		Renderer?: Class<Renderer>
		}

		export interface ContainerRule extends BaseRule {
		at: string;
		rules: RuleList;
		}

		export type RuleOptions = {
		selector?: string,
		scoped?: boolean,
		sheet?: StyleSheet,
		index?: number,
		parent?: ContainerRule \| StyleSheet,
		classes: Classes,
		keyframes: KeyframesMap,
		jss: Jss,
		generateClassName: generateClassName,
		generateId: GenerateId,
		Renderer: Class<Renderer>
		@@ -81,24 +120,25 @@ }
		classes: Classes,
		generateClassName: generateClassName,
		scoped?: boolean,
		keyframes: KeyframesMap,
		generateId: GenerateId,
		Renderer: Class<Renderer>,
		jss: Jss,
		sheet: StyleSheet,
		parent: ConditionalRule \| KeyframesRule \| StyleSheet
		parent: ContainerRule \| StyleSheet
		}

		export interface BaseRule {
		type: string;
		key: string;
		isProcessed: boolean;
		options: RuleOptions;
		toString(options?: ToCssOptions): string;
		}
		export type OnCreateRule = (name?: string, decl: JssStyle, options: RuleOptions) => BaseRule \| null
		export type OnProcessRule = (rule: Rule, sheet?: StyleSheet) => void
		export type OnProcessStyle = (style: JssStyle, rule: Rule, sheet?: StyleSheet) => JssStyle
		export type OnProcessSheet = (sheet?: StyleSheet) => void
		export type OnChangeValue = (value: JssValue, prop: string, rule: StyleRule) => JssValue
		export type OnUpdate = (data: Object, rule: Rule, sheet: StyleSheet, options: UpdateOptions) => void

		export type Plugin = {
		onCreateRule?: (name: string, decl: JssStyle, options: RuleOptions) => Rule \| null,
		onProcessRule?: (rule: Rule, sheet?: StyleSheet) => void,
		onProcessStyle?: (style: JssStyle, rule: Rule, sheet?: StyleSheet) => JssStyle,
		onProcessSheet?: (sheet?: StyleSheet) => void,
		onChangeValue?: (value: string, prop: string, rule: Rule) => string,
		onUpdate?: (data: Object, rule: Rule, sheet?: StyleSheet) => void
		onCreateRule?: OnCreateRule,
		onProcessRule?: OnProcessRule,
		onProcessStyle?: OnProcessStyle,
		onProcessSheet?: OnProcessSheet,
		onChangeValue?: OnChangeValue,
		onUpdate?: OnUpdate
		}
		@@ -108,6 +148,6 @@

		type createGenerateClassName = () => generateClassName
		type CreateGenerateId = () => GenerateId

		export type JssOptions = {
		createGenerateClassName?: createGenerateClassName,
		createGenerateId?: CreateGenerateId,
		plugins?: Array<Plugin>,
		@@ -120,3 +160,3 @@ insertionPoint?: InsertionPoint,
		export type InternalJssOptions = {
		createGenerateClassName: createGenerateClassName,
		createGenerateId: CreateGenerateId,
		plugins: Array<Plugin>,
		@@ -133,3 +173,3 @@ insertionPoint?: InsertionPoint,
		element?: HTMLStyleElement,
		generateClassName?: generateClassName,
		generateId?: GenerateId,
		classNamePrefix?: string
		@@ -144,3 +184,3 @@ }
		index: number,
		generateClassName: generateClassName,
		generateId: GenerateId,
		classNamePrefix?: string,
		@@ -160,3 +200,3 @@ Renderer: Class<Renderer>,
		Renderer: Class<Renderer>,
		generateClassName: generateClassName,
		generateId: GenerateId,
		classNamePrefix?: string,
		@@ -163,0 +203,0 @@ jss: Jss,

src/utils/cloneStyle.js

		@@ -1,2 +0,2 @@
		import isObservable from './isObservable'
		import $$observable from 'symbol-observable'
		import type {JssStyle} from '../types'
		@@ -6,2 +6,5 @@

		// TODO: This should propably not be here, need to find a better place
		const isObservable = value => value && value[$$observable] && value === value[$$observable]()

		export default function cloneStyle(style: JssStyle): JssStyle {
		@@ -18,2 +21,8 @@ // Support empty values in case user ends up with them by accident.

		// It is a CSSTOM value.
		// TODO will not work if instance comes from a different window.
		if (global.CSSStyleValue && style instanceof global.CSSStyleValue) {
		return style
		}

		// Support array for FontFaceRule.
		@@ -20,0 +29,0 @@ if (isArray(style)) return style.map(cloneStyle)

src/utils/createRule.js

		/* @flow */
		import warning from 'warning'
		import StyleRule from '../rules/StyleRule'
		import type {Rule, RuleOptions, JssStyle} from '../types'
		import cloneStyle from '../utils/cloneStyle'
		import cloneStyle from './cloneStyle'

		@@ -14,3 +13,3 @@ /**
		options: RuleOptions
		): Rule {
		): Rule \| null {
		const {jss} = options
		@@ -24,6 +23,6 @@ const declCopy = cloneStyle(decl)
		if (name[0] === '@') {
		warning(false, '[JSS] Unknown at-rule %s', name)
		warning(false, '[JSS] Unknown rule %s', name)
		}

		return new StyleRule(name, declCopy, options)
		return null
		}

src/utils/escape.js

		@@ -1,7 +0,4 @@
		const CSS = (global.CSS: any)

		const env = process.env.NODE_ENV
		const escapeRegex = /([[\].#*$><+~=\|^:(),"'`\s])/g

		const escapeRegex = /([[\].#*$><+~=\|^:(),"'`])/g

		export default str => {
		@@ -12,7 +9,5 @@ // We don't need to escape it in production, because we are not using user's

		if (!CSS \|\| !CSS.escape) {
		return str.replace(escapeRegex, '\\$1')
		}
		const nativeEscape = typeof CSS !== 'undefined' && CSS.escape

		return CSS.escape(str)
		return nativeEscape ? nativeEscape(str) : str.replace(escapeRegex, '\\$1')
		}

src/utils/toCss.js

		@@ -19,3 +19,3 @@ /* @flow */
		export default function toCss(
		selector: string,
		selector?: string,
		style: JssStyle,
		@@ -31,3 +31,3 @@ options: ToCssOptions = {}

		indent++
		if (selector) indent++

		@@ -43,3 +43,4 @@ // Apply fallbacks first.
		if (value != null) {
		result += `\n${indentStr(`${prop}: ${toCssValue(value)};`, indent)}`
		if (result) result += '\n'
		result += `${indentStr(`${prop}: ${toCssValue(value)};`, indent)}`
		}
		@@ -53,3 +54,4 @@ }
		if (value != null) {
		result += `\n${indentStr(`${prop}: ${toCssValue(value)};`, indent)}`
		if (result) result += '\n'
		result += `${indentStr(`${prop}: ${toCssValue(value)};`, indent)}`
		}
		@@ -63,3 +65,4 @@ }
		if (value != null && prop !== 'fallbacks') {
		result += `\n${indentStr(`${prop}: ${toCssValue(value)};`, indent)}`
		if (result) result += '\n'
		result += `${indentStr(`${prop}: ${toCssValue(value)};`, indent)}`
		}
		@@ -71,6 +74,10 @@ }

		// When rule is being stringified before selector was defined.
		if (!selector) return result

		indent--
		result = indentStr(`${selector} {${result}\n`, indent) + indentStr('}', indent)

		return result
		if (result) result = `\n${result}\n`

		return indentStr(`${selector} {${result}`, indent) + indentStr('}', indent)
		}

changelog.md

dist/.DS_Store

lib/index.js

lib/index.js.flow

lib/Jss.js

lib/plugins/functions.js

lib/plugins/observables.js

lib/plugins/rules.js

lib/PluginsRegistry.js

lib/renderers/DomRenderer.js

lib/renderers/VirtualRenderer.js

lib/RuleList.js

lib/rules/ConditionalRule.js

lib/rules/FontFaceRule.js

lib/rules/KeyframesRule.js

lib/rules/SimpleRule.js

lib/rules/StyleRule.js

lib/rules/ViewportRule.js

lib/sheets.js

lib/SheetsManager.js

lib/SheetsRegistry.js

lib/StyleSheet.js

lib/types/cssom.js

lib/types/index.js

lib/types/jss.js

lib/types/observable.js

lib/utils/cloneStyle.js

lib/utils/createGenerateClassName.js

lib/utils/createRule.js

lib/utils/escape.js

lib/utils/getDynamicStyles.js

lib/utils/isObservable.js

lib/utils/linkRule.js

lib/utils/moduleId.js

lib/utils/toCss.js

lib/utils/toCssValue.js

license.md

readme.md

src/.DS_Store

src/plugins/functions.js

src/plugins/observables.js

src/plugins/rules.js

src/rules/ConditionalRule.js

src/rules/FontFaceRule.js

src/rules/KeyframesRule.js

src/rules/SimpleRule.js

src/rules/StyleRule.js

src/rules/ViewportRule.js

src/types/observable.js

src/utils/.DS_Store

src/utils/createGenerateClassName.js

src/utils/isObservable.js

src/utils/linkRule.js

dist/jss.js.map

Sorry, the diff of this file is not supported yet

LICENSE

Sorry, the diff of this file is not supported yet

jss - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes