jss-global
Version:
Global styles for JSS
1,769 lines (1,348 loc) • 85.8 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["jssGlobal"] = factory();
else
root["jssGlobal"] = factory();
})(this, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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 _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; }; }();
exports['default'] = jssGlobal;
var _jss = __webpack_require__(1);
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var propKey = '@global';
var prefixKey = '@global ';
var GlobalContainerRule = function () {
function GlobalContainerRule(key, styles, options) {
_classCallCheck(this, GlobalContainerRule);
this.type = 'global';
this.key = key;
this.options = options;
this.rules = new _jss.RuleList(_extends({}, options, {
parent: this
}));
for (var selector in styles) {
this.rules.add(selector, styles[selector], { selector: selector });
}
this.rules.process();
}
/**
* Get a rule.
*/
_createClass(GlobalContainerRule, [{
key: 'getRule',
value: function getRule(name) {
return this.rules.get(name);
}
/**
* 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;
}
/**
* Get index of a rule.
*/
}, {
key: 'indexOf',
value: function indexOf(rule) {
return this.rules.indexOf(rule);
}
/**
* Generates a CSS string.
*/
}, {
key: 'toString',
value: function toString() {
return this.rules.toString();
}
}]);
return GlobalContainerRule;
}();
var GlobalPrefixedRule = function () {
function GlobalPrefixedRule(name, style, options) {
_classCallCheck(this, GlobalPrefixedRule);
this.name = name;
this.options = options;
var selector = name.substr(prefixKey.length);
this.rule = options.jss.createRule(selector, style, _extends({}, options, {
parent: this,
selector: selector
}));
}
_createClass(GlobalPrefixedRule, [{
key: 'toString',
value: function toString(options) {
return this.rule.toString(options);
}
}]);
return GlobalPrefixedRule;
}();
var separatorRegExp = /\s*,\s*/g;
function addScope(selector, scope) {
var parts = selector.split(separatorRegExp);
var scoped = '';
for (var i = 0; i < parts.length; i++) {
scoped += scope + ' ' + parts[i].trim();
if (parts[i + 1]) scoped += ', ';
}
return scoped;
}
function handleNestedGlobalContainerRule(rule) {
var options = rule.options,
style = rule.style;
var rules = style[propKey];
if (!rules) return;
for (var name in rules) {
options.sheet.addRule(name, rules[name], _extends({}, options, {
selector: addScope(name, rule.selector)
}));
}
delete style[propKey];
}
function handlePrefixedGlobalRule(rule) {
var options = rule.options,
style = rule.style;
for (var prop in style) {
if (prop.substr(0, propKey.length) !== propKey) continue;
var selector = addScope(prop.substr(propKey.length), rule.selector);
options.sheet.addRule(selector, style[prop], _extends({}, options, {
selector: selector
}));
delete style[prop];
}
}
/**
* Convert nested rules to separate, remove them from original styles.
*
* @param {Rule} rule
* @api public
*/
function jssGlobal() {
function onCreateRule(name, styles, options) {
if (name === propKey) {
return new GlobalContainerRule(name, styles, options);
}
if (name[0] === '@' && name.substr(0, prefixKey.length) === prefixKey) {
return new GlobalPrefixedRule(name, styles, options);
}
var parent = options.parent;
if (parent) {
if (parent.type === 'global' || parent.options.parent.type === 'global') {
options.global = true;
}
}
if (options.global) options.selector = name;
return null;
}
function onProcessRule(rule) {
if (rule.type !== 'style') return;
handleNestedGlobalContainerRule(rule);
handlePrefixedGlobalRule(rule);
}
return { onCreateRule: onCreateRule, onProcessRule: onProcessRule };
}
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.create = exports.createGenerateClassName = exports.sheets = exports.RuleList = exports.SheetsManager = exports.SheetsRegistry = exports.getDynamicStyles = undefined;
var _getDynamicStyles = __webpack_require__(2);
Object.defineProperty(exports, 'getDynamicStyles', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_getDynamicStyles)['default'];
}
});
var _SheetsRegistry = __webpack_require__(3);
Object.defineProperty(exports, 'SheetsRegistry', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_SheetsRegistry)['default'];
}
});
var _SheetsManager = __webpack_require__(4);
Object.defineProperty(exports, 'SheetsManager', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_SheetsManager)['default'];
}
});
var _RuleList = __webpack_require__(6);
Object.defineProperty(exports, 'RuleList', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_RuleList)['default'];
}
});
var _sheets = __webpack_require__(18);
Object.defineProperty(exports, 'sheets', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_sheets)['default'];
}
});
var _createGenerateClassName = __webpack_require__(19);
Object.defineProperty(exports, 'createGenerateClassName', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_createGenerateClassName)['default'];
}
});
var _Jss = __webpack_require__(21);
var _Jss2 = _interopRequireDefault(_Jss);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
/**
* Creates a new instance of Jss.
*/
var create = exports.create = function create(options) {
return new _Jss2['default'](options);
};
/**
* A global Jss instance.
*/
exports['default'] = create();
/***/ }),
/* 2 */
/***/ (function(module, exports) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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; };
/**
* Extracts a styles object with only props that contain function values.
*/
exports['default'] = function (styles) {
// eslint-disable-next-line no-shadow
function extract(styles) {
var to = null;
for (var key in styles) {
var value = styles[key];
var type = typeof value === 'undefined' ? 'undefined' : _typeof(value);
if (type === 'function') {
if (!to) to = {};
to[key] = value;
} else if (type === 'object' && value !== null && !Array.isArray(value)) {
var extracted = extract(value);
if (extracted) {
if (!to) to = {};
to[key] = extracted;
}
}
}
return to;
}
return extract(styles);
};
/***/ }),
/* 3 */
/***/ (function(module, exports) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/**
* Sheets registry to access them all at one place.
*/
var SheetsRegistry = function () {
function SheetsRegistry() {
_classCallCheck(this, SheetsRegistry);
this.registry = [];
}
_createClass(SheetsRegistry, [{
key: 'add',
/**
* Register a Style Sheet.
*/
value: function add(sheet) {
var registry = this.registry;
var index = sheet.options.index;
if (registry.indexOf(sheet) !== -1) return;
if (registry.length === 0 || index >= this.index) {
registry.push(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.
*/
}, {
key: 'reset',
value: function reset() {
this.registry = [];
}
/**
* Remove a Style Sheet.
*/
}, {
key: 'remove',
value: function remove(sheet) {
var index = this.registry.indexOf(sheet);
this.registry.splice(index, 1);
}
/**
* 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',
/**
* Current highest index number.
*/
get: function get() {
return this.registry.length === 0 ? 0 : this.registry[this.registry.length - 1].options.index;
}
}]);
return SheetsRegistry;
}();
exports['default'] = SheetsRegistry;
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _warning = __webpack_require__(5);
var _warning2 = _interopRequireDefault(_warning);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/**
* SheetsManager is like a WeakMap which is designed to count StyleSheet
* instances and attach/detach automatically.
*/
var SheetsManager = function () {
function SheetsManager() {
_classCallCheck(this, SheetsManager);
this.sheets = [];
this.refs = [];
this.keys = [];
}
_createClass(SheetsManager, [{
key: 'get',
value: function get(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 index = sheets.indexOf(sheet);
if (index !== -1) return index;
sheets.push(sheet);
refs.push(0);
keys.push(key);
return sheets.length - 1;
}
}, {
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;
}
}, {
key: 'unmanage',
value: function unmanage(key) {
var index = this.keys.indexOf(key);
if (index === -1) {
// eslint-ignore-next-line no-console
(0, _warning2['default'])(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() {
return this.keys.length;
}
}]);
return SheetsManager;
}();
exports['default'] = SheetsManager;
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
/**
* 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.
*/
'use strict';
/**
* Similar to invariant but only logs a warning if the condition is not met.
* This can be used to log issues in development environments in critical
* paths. Removing the logging code for production environments will keep the
* same logic and follow the same code paths.
*/
var warning = function() {};
if (true) {
warning = function(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'
);
}
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 (!condition) {
var argIndex = 0;
var message = 'Warning: ' +
format.replace(/%s/g, function() {
return args[argIndex++];
});
if (typeof console !== 'undefined') {
console.error(message);
}
try {
// This error was thrown as a convenience so that you can use this stack
// to find the callsite that caused this warning to fire.
throw new Error(message);
} catch(x) {}
}
};
}
module.exports = warning;
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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 _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 _createRule = __webpack_require__(7);
var _createRule2 = _interopRequireDefault(_createRule);
var _updateStyle = __webpack_require__(16);
var _updateStyle2 = _interopRequireDefault(_updateStyle);
var _linkRule = __webpack_require__(17);
var _linkRule2 = _interopRequireDefault(_linkRule);
var _StyleRule = __webpack_require__(8);
var _StyleRule2 = _interopRequireDefault(_StyleRule);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/**
* Contains rules objects and allows adding/removing etc.
* Is used for e.g. by `StyleSheet` or `ConditionalRule`.
*/
var RuleList = function () {
// Original styles object.
function RuleList(options) {
_classCallCheck(this, RuleList);
this.map = {};
this.raw = {};
this.index = [];
this.options = options;
this.classes = options.classes;
}
/**
* Create and register rule.
*
* Will not render after Style Sheet was rendered the first time.
*/
// Used to ensure correct rules order.
// Rules registry for access by .get() method.
// It contains the same rule registered by name and by selector.
_createClass(RuleList, [{
key: 'add',
value: function add(name, decl, options) {
var _options = this.options,
parent = _options.parent,
sheet = _options.sheet,
jss = _options.jss,
Renderer = _options.Renderer,
generateClassName = _options.generateClassName;
options = _extends({
classes: this.classes,
parent: parent,
sheet: sheet,
jss: jss,
Renderer: Renderer,
generateClassName: generateClassName
}, options);
if (!options.selector && this.classes[name]) {
options.selector = '.' + this.classes[name];
}
this.raw[name] = decl;
var rule = (0, _createRule2['default'])(name, decl, options);
var className = void 0;
if (!options.selector && rule instanceof _StyleRule2['default']) {
className = generateClassName(rule, sheet);
rule.selector = '.' + className;
}
this.register(rule, className);
var index = options.index === undefined ? this.index.length : options.index;
this.index.splice(index, 0, rule);
return rule;
}
/**
* Get a rule.
*/
}, {
key: 'get',
value: function get(name) {
return this.map[name];
}
/**
* Delete a rule.
*/
}, {
key: 'remove',
value: function remove(rule) {
this.unregister(rule);
this.index.splice(this.indexOf(rule), 1);
}
/**
* Get index of a rule.
*/
}, {
key: 'indexOf',
value: function indexOf(rule) {
return this.index.indexOf(rule);
}
/**
* Run `onProcessRule()` plugins on every rule.
*/
}, {
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.
this.index.slice(0).forEach(plugins.onProcessRule, plugins);
}
/**
* Register a rule in `.map` and `.classes` maps.
*/
}, {
key: 'register',
value: function register(rule, className) {
this.map[rule.key] = rule;
if (rule instanceof _StyleRule2['default']) {
this.map[rule.selector] = rule;
if (className) this.classes[rule.key] = className;
}
}
/**
* Unregister a rule.
*/
}, {
key: 'unregister',
value: function unregister(rule) {
delete this.map[rule.key];
if (rule instanceof _StyleRule2['default']) {
delete this.map[rule.selector];
delete this.classes[rule.key];
}
}
/**
* Update the function values with a new data.
*/
}, {
key: 'update',
value: function update(name, data) {
if (typeof name === 'string') {
(0, _updateStyle2['default'])(this.get(name), data, RuleList);
return;
}
for (var index = 0; index < this.index.length; index++) {
(0, _updateStyle2['default'])(this.index[index], name, RuleList);
}
}
/**
* Link renderable rules with CSSRuleList.
*/
}, {
key: 'link',
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) (0, _linkRule2['default'])(rule, cssRule);
}
}
/**
* Convert rules to a CSS string.
*/
}, {
key: 'toString',
value: function toString(options) {
var str = '';
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) continue;
if (str) str += '\n';
str += css;
}
return str;
}
}]);
return RuleList;
}();
exports['default'] = RuleList;
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports['default'] = createRule;
var _warning = __webpack_require__(5);
var _warning2 = _interopRequireDefault(_warning);
var _StyleRule = __webpack_require__(8);
var _StyleRule2 = _interopRequireDefault(_StyleRule);
var _cloneStyle = __webpack_require__(15);
var _cloneStyle2 = _interopRequireDefault(_cloneStyle);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
/**
* Create a rule instance.
*/
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 = (0, _cloneStyle2['default'])(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] === '@') {
(0, _warning2['default'])(false, '[JSS] Unknown at-rule %s', name);
}
return new _StyleRule2['default'](name, declCopy, options);
}
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var _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 _warning = __webpack_require__(5);
var _warning2 = _interopRequireDefault(_warning);
var _toCss = __webpack_require__(9);
var _toCss2 = _interopRequireDefault(_toCss);
var _toCssValue = __webpack_require__(10);
var _toCssValue2 = _interopRequireDefault(_toCssValue);
var _isDynamicValue = __webpack_require__(11);
var _isDynamicValue2 = _interopRequireDefault(_isDynamicValue);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var StyleRule = function () {
function StyleRule(key, style, options) {
_classCallCheck(this, StyleRule);
this.type = 'style';
this.isProcessed = false;
var sheet = options.sheet,
Renderer = options.Renderer,
selector = options.selector;
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.
*/
_createClass(StyleRule, [{
key: 'prop',
/**
* Get or set a style property.
*/
value: function prop(name, nextValue) {
// The result of a dynamic value is prefixed with $ and is not innumerable in
// order to be ignored by all plugins or during stringification.
var $name = (0, _isDynamicValue2['default'])(this.style[name]) ? '$' + name : name;
// Its a setter.
if (nextValue != null) {
// Don't do anything if the value has not changed.
if (this.style[$name] !== nextValue) {
nextValue = this.options.jss.plugins.onChangeValue(nextValue, name, this);
Object.defineProperty(this.style, $name, {
value: nextValue,
writable: true
});
// Renderable is defined if StyleSheet option `link` is true.
if (this.renderable) this.renderer.setStyle(this.renderable, name, nextValue);else {
var sheet = this.options.sheet;
if (sheet && sheet.attached) {
(0, _warning2['default'])(false, 'Rule is not linked. Missing sheet option "link: true".');
}
}
}
return this;
}
return this.style[$name];
}
/**
* Apply rule to an element inline.
*/
}, {
key: 'applyTo',
value: function applyTo(renderable) {
var json = this.toJSON();
for (var prop in json) {
this.renderer.setStyle(renderable, prop, json[prop]);
}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 ((0, _isDynamicValue2['default'])(value)) json[prop] = this.style['$' + prop];else if ((typeof value === 'undefined' ? 'undefined' : _typeof(value)) !== 'object') json[prop] = value;else if (Array.isArray(value)) json[prop] = (0, _toCssValue2['default'])(value);
}
return json;
}
/**
* Generates a CSS string.
*/
}, {
key: 'toString',
value: function toString(options) {
return (0, _toCss2['default'])(this.selector, this.style, options);
}
}, {
key: 'selector',
set: function set(selector) {
if (selector === this.selectorText) return;
this.selectorText = selector;
if (this.renderable) {
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;
}
}
}
/**
* Get selector string.
*/
,
get: function get() {
return this.selectorText;
}
}]);
return StyleRule;
}();
exports['default'] = StyleRule;
/***/ }),
/* 9 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports['default'] = toCss;
var _toCssValue = __webpack_require__(10);
var _toCssValue2 = _interopRequireDefault(_toCssValue);
var _isDynamicValue = __webpack_require__(11);
var _isDynamicValue2 = _interopRequireDefault(_isDynamicValue);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
/**
* Indent a string.
* http://jsperf.com/array-join-vs-for
*/
function indentStr(str, indent) {
var result = '';
for (var index = 0; index < indent; index++) {
result += ' ';
}return result + str;
}
/**
* Converts a Rule to CSS string.
*/
function toCss(selector, style) {
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var result = '';
if (!style) return result;
var _options$indent = options.indent,
indent = _options$indent === undefined ? 0 : _options$indent;
var fallbacks = style.fallbacks;
indent++;
// Apply fallbacks first.
if (fallbacks) {
// Array syntax {fallbacks: [{prop: value}]}
if (Array.isArray(fallbacks)) {
for (var index = 0; index < fallbacks.length; index++) {
var fallback = fallbacks[index];
for (var prop in fallback) {
var value = fallback[prop];
if (value != null) {
result += '\n' + indentStr(prop + ': ' + (0, _toCssValue2['default'])(value) + ';', indent);
}
}
}
}
// Object syntax {fallbacks: {prop: value}}
else {
for (var _prop in fallbacks) {
var _value = fallbacks[_prop];
if (_value != null) {
result += '\n' + indentStr(_prop + ': ' + (0, _toCssValue2['default'])(_value) + ';', indent);
}
}
}
}
var hasDynamicValue = false;
for (var _prop2 in style) {
var _value2 = style[_prop2];
if ((0, _isDynamicValue2['default'])(_value2)) {
_value2 = style['$' + _prop2];
hasDynamicValue = true;
}
if (_value2 != null && _prop2 !== 'fallbacks') {
result += '\n' + indentStr(_prop2 + ': ' + (0, _toCssValue2['default'])(_value2) + ';', indent);
}
}
if (!result && !hasDynamicValue) return result;
indent--;
result = indentStr(selector + ' {' + result + '\n', indent) + indentStr('}', indent);
return result;
}
/***/ }),
/* 10 */
/***/ (function(module, exports) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports['default'] = toCssValue;
var joinWithSpace = function joinWithSpace(value) {
return value.join(' ');
};
/**
* Converts array values to string.
*
* `margin: [['5px', '10px']]` > `margin: 5px 10px;`
* `border: ['1px', '2px']` > `border: 1px, 2px;`
*/
function toCssValue(value) {
if (!Array.isArray(value)) return value;
// Support space separated values.
if (Array.isArray(value[0])) {
return toCssValue(value.map(joinWithSpace));
}
return value.join(', ');
}
/***/ }),
/* 11 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _isObservable = __webpack_require__(12);
var _isObservable2 = _interopRequireDefault(_isObservable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
exports['default'] = function (value) {
return typeof value === 'function' || (0, _isObservable2['default'])(value);
};
/***/ }),
/* 12 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
var symbolObservable = __webpack_require__(13);
module.exports = function (fn) {
return Boolean(fn && fn[symbolObservable]);
};
/***/ }),
/* 13 */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(global) {/* global window */
'use strict';
module.exports = __webpack_require__(14)(global || window || this);
/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
/***/ }),
/* 14 */
/***/ (function(module, exports) {
'use strict';
module.exports = 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;
};
/***/ }),
/* 15 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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; };
exports['default'] = cloneStyle;
var _isObservable = __webpack_require__(12);
var _isObservable2 = _interopRequireDefault(_isObservable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var isArray = Array.isArray;
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(style);
if (typeOfStyle === 'string' || typeOfStyle === 'number') return style;
// Support array for FontFaceRule.
if (isArray(style)) return style.map(cloneStyle);
var newStyle = {};
for (var name in style) {
var value = style[name];
if ((typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' && !(0, _isObservable2['default'])(value)) {
newStyle[name] = cloneStyle(value);
continue;
}
newStyle[name] = value;
}
return newStyle;
}
/***/ }),
/* 16 */
/***/ (function(module, exports) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports['default'] = function (rule, data, RuleList) {
if (rule.type === 'style') {
for (var prop in rule.style) {
var value = rule.style[prop];
if (typeof value === 'function') {
rule.prop(prop, value(data));
}
}
} else if (rule.rules instanceof RuleList) {
rule.rules.update(data);
}
};
/***/ }),
/* 17 */
/***/ (function(module, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = linkRule;
/**
* 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);
}
/***/ }),
/* 18 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _SheetsRegistry = __webpack_require__(3);
var _SheetsRegistry2 = _interopRequireDefault(_SheetsRegistry);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
/**
* This is a global sheets registry. Only DomRenderer will add sheets to it.
* On the server one should use an own SheetsRegistry instance and add the
* sheets to it, because you need to make sure to create a new registry for
* each request in order to not leak sheets across requests.
*/
exports['default'] = new _SheetsRegistry2['default']();
/***/ }),
/* 19 */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(global) {'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _warning = __webpack_require__(5);
var _warning2 = _interopRequireDefault(_warning);
var _StyleSheet = __webpack_require__(20);
var _StyleSheet2 = _interopRequireDefault(_StyleSheet);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var globalRef = typeof window === 'undefined' ? global : window;
var ns = '2f1acc6c3a606b082e5eef5e54414ffb';
if (globalRef[ns] == null) globalRef[ns] = 0;
// In case we have more than one JSS version.
var jssCounter = globalRef[ns]++;
var maxRules = 1e10;
var env = ("development");
/**
* Returns a function which generates unique class names based on counters.
* When new generator function is created, rule counter is reseted.
* We need to reset the rule counter for SSR for each request.
*/
exports['default'] = function () {
var ruleCounter = 0;
return function (rule, sheet) {
ruleCounter += 1;
if (ruleCounter > maxRules) {
(0, _warning2['default'])(false, 'You might have a memory leak. Rule counter is at %s.', ruleCounter);
}
if (env === 'production') {
return 'c' + jssCounter + ruleCounter;
}
var prefix = sheet ? sheet.options.classNamePrefix || '' : '';
return '' + prefix + rule.key + '-' + jssCounter + '-' + ruleCounter;
};
};
/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
/***/ }),
/* 20 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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 _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 _linkRule = __webpack_require__(17);
var _linkRule2 = _interopRequireDefault(_linkRule);
var _RuleList = __webpack_require__(6);
var _RuleList2 = _interopRequireDefault(_RuleList);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var StyleSheet = function () {
function StyleSheet(styles, options) {
_classCallCheck(this, StyleSheet);
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 _RuleList2['default'](this.options);
for (var name in styles) {
this.rules.add(name, styles[name]);
}
this.rules.process();
}
/**
* Attach renderable to the render tree.
*/
_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;
}
/**
* Remove renderable from render tree.
*/
}, {
key: 'detach',
value: 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.
*/
}, {
key: 'addRule',
value: 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.
if (this.attached && !queue) this.queue = [];
var rule = this.rules.add(name, decl, options);
this.options.jss.plugins.onProcessRule(rule);
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;
}
/**
* Insert rule into the StyleSheet
*/
}, {
key: 'insertRule',
value: function insertRule(rule) {
var renderable = this.renderer.insertRule(rule);
if (renderable && this.options.link) (0, _linkRule2['default'])(rule, renderable);
}
/**
* 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 name in styles) {
added.push(this.addRule(name, styles[name], options));
}
return added;
}
/**
* Get a rule by name.
*/
}, {
key: 'getRule',
value: function getRule(name) {
return this.rules.get(name);
}
/**
* Delete a rule by name.
* Returns `true`: if rule has been deleted from the DOM.
*/
}, {
key: 'deleteRule',
value: function deleteRule(name) {
var rule = this.rules.get(name);
if (!rule) return false;
this.rules.remove(rule);
if (this.attached && rule.renderable) {
return this.renderer.deleteRule(rule.renderable);
}
return true;
}
/**
* Get index of a rule.
*/
}, {
key: 'indexOf',
value: function indexOf(rule) {
return this.rules.indexOf(rule);
}
/**
* Deploy pure CSS string to a renderable.
*/
}, {
key: 'deploy',
value: function deploy() {
this.renderer.deploy();
this.deployed = true;
return this;
}
/**
* Link renderable CSS rules from sheet with their corresponding models.
*/
}, {
key: 'link',
value: function link() {
var 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.
*/
}, {
key: 'update',
value: function update(name, data) {
this.rules.update(name, data);
return this;
}
/**
* Convert rules to a CSS string.
*/
}, {
key: 'toString',
value: function toString(options) {
return this.rules.toString(options);
}
}]);
return StyleSheet;
}();
exports['default'] = StyleSheet;
/***/ }),
/* 21 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var _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 _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 _isInBrowser = __webpack_require__(22);
var _isInBrowser2 = _interopRequireDefault(_isInBrowser);
var _StyleSheet = __webpack_require__(20);
var _StyleSheet2 = _interopRequireDefault(_StyleSheet);
var _PluginsRegistry = __webpack_require__(23);
var _PluginsRegistry2 = _interopRequireDefault(_PluginsRegistry);
var _rules = __webpack_require__(24);
var _rules2 = _interopRequireDefault(_rules);
var _observables = __webpack_require__(30);
var _observables2 = _interopRequireDefault(_observables);
var _sheets = __webpack_require__(18);
var _sheets2 = _interopRequireDefault(_sheets);
var _StyleRule = __webpack_require__(8);
var _StyleRule2 = _interopRequireDefault(_StyleRule);
var _createGenerateClassName = __webpack_require__(19);
var _createGenerateClassName2 = _interopRequireDefault(_createGenerateClassName);
var _createRule2 = __webpack_require__(7);
var _createRule3 = _interopRequireDefault(_createRule2);
var _DomRenderer = __webpack_require__(31);
var _DomRenderer2 = _interopRequireDefault(_DomRenderer);
var _VirtualRenderer = __webpack_require__(32);
var _VirtualRenderer2 = _interopRequireDefault(_VirtualRenderer);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var defaultPlugins = _rules2['default'].concat([_observables2['default']]);
var Jss = function () {
function Jss(options) {
_classCallCheck(this, Jss);
this.version = "9.0.0";
this.plugins = new _PluginsRegistry2['default']();
this.options = {
createGenerateClassName: _createGenerateClassName2['default'],
Renderer: _isInBrowser2['default'] ? _DomRenderer2['default'] : _VirtualRenderer2['default'],
plugins: []
};
this.generateClassName = (0, _createGenerateClassName2['default'])();