fela - npm Package Compare versions

lib/enhance.js

lib/enhancers/beautifier.js

lib/enhancers/logger.js

lib/enhancers/perf.js

lib/render.js

lib/utils/assign.js

lib/utils/cssifyKeyframe.js

lib/utils/warning.js

641

dist/fela.js

		@@ -14,26 +14,2 @@ (function (global, factory) {

		babelHelpers.classCallCheck = function (instance, Constructor) {
		if (!(instance instanceof Constructor)) {
		throw new TypeError("Cannot call a class as a function");
		}
		};

		babelHelpers.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;
		};
		}();

		babelHelpers.extends = Object.assign \|\| function (target) {
		@@ -58,107 +34,3 @@ for (var i = 1; i < arguments.length; i++) {

		var emptyFunction = __commonjs(function (module) {
		"use strict";

		/**
		* Copyright (c) 2013-present, Facebook, Inc.
		* All rights reserved.
		*
		* This source code is licensed under the BSD-style license found in the
		* LICENSE file in the root directory of this source tree. An additional grant
		* of patent rights can be found in the PATENTS file in the same directory.
		*
		*
		*/

		function makeEmptyFunction(arg) {
		return function () {
		return arg;
		};
		}

		/**
		* This function accepts and discards inputs; it has no side effects. This is
		* primarily useful idiomatically for overridable function endpoints which
		* always need to be callable, since JS lacks a null-call idiom ala Cocoa.
		*/
		var emptyFunction = function emptyFunction() {};

		emptyFunction.thatReturns = makeEmptyFunction;
		emptyFunction.thatReturnsFalse = makeEmptyFunction(false);
		emptyFunction.thatReturnsTrue = makeEmptyFunction(true);
		emptyFunction.thatReturnsNull = makeEmptyFunction(null);
		emptyFunction.thatReturnsThis = function () {
		return this;
		};
		emptyFunction.thatReturnsArgument = function (arg) {
		return arg;
		};

		module.exports = emptyFunction;
		});

		var require$$0 = (emptyFunction && typeof emptyFunction === 'object' && 'default' in emptyFunction ? emptyFunction['default'] : emptyFunction);

		var warning = __commonjs(function (module) {
		/**
		* 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';

		var emptyFunction = require$$0;

		/**
		* Similar to invariant but only logs a warning if the condition is not met.
		* This can be used to log issues in development environments in critical
		* paths. Removing the logging code for production environments will keep the
		* same logic and follow the same code paths.
		*/

		var warning = emptyFunction;

		if (true) {
		warning = function warning(condition, format) {
		for (var _len = arguments.length, args = Array(_len > 2 ? _len - 2 : 0), _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.indexOf('Failed Composite propType: ') === 0) {
		return; // Ignore CompositeComponent proptype check.
		}

		if (!condition) {
		var argIndex = 0;
		var message = 'Warning: ' + format.replace(/%s/g, function () {
		return args[argIndex++];
		});
		if (typeof console !== 'undefined') {
		console.error(message);
		}
		try {
		// --- Welcome to debugging React ---
		// This error was thrown as a convenience so that you can use this stack
		// to find the callsite that caused this warning to fire.
		throw new Error(message);
		} catch (x) {}
		}
		};
		}

		module.exports = warning;
		});

		var warning$1 = (warning && typeof warning === 'object' && 'default' in warning ? warning['default'] : warning);

		/**
		* generates a hashcode from a string
		@@ -223,54 +95,2 @@ * taken from http://stackoverflow.com/a/7616484

		var isMediaQuery = (function (property) {
		return property.substr(0, 6) === '@media';
		})

		var isPseudoClass = (function (property) {
		return property.charAt(0) === ':';
		})

		/**
		* removes every invalid property except pseudo class objects
		*
		* @param {Object} style - style to be validated
		* @return {Object} validated style
		*/
		function validateStyle(style) {
		Object.keys(style).forEach(function (property) {
		var value = style[property];
		if (value instanceof Object && !Array.isArray(value)) {
		style[property] = isPseudoClass(property) \|\| isMediaQuery(property) ? validateStyle(value) : {};
		if (Object.keys(style[property]).length === 0) {
		delete style[property];
		}
		} else if (typeof value !== 'string' && typeof value !== 'number') {
		delete style[property];
		// also remove properties including concatenated props valued with undefined
		} else if (typeof value === 'string' && value.indexOf('undefined') > -1) {
		delete style[property];
		}
		});

		return style;
		}

		/**
		* executes each plugin using a predefined plugin interface
		*
		* @param {Object} pluginInterface - interface containing relevant processing data
		* @return {Object} processed style
		*/
		function processStyle(pluginInterface) {
		var plugins = pluginInterface.plugins;
		var style = pluginInterface.style;
		// pipes each plugin by passes the plugin interface
		// NOTE: as the style are passed directly they're editable
		// therefore the plugin order might matter

		plugins.forEach(function (plugin) {
		return style = plugin(pluginInterface);
		});
		return style;
		}

		var index$1 = __commonjs(function (module) {
		@@ -321,3 +141,3 @@ 'use strict';
		var keyframe = Object.keys(frames).reduce(function (css, percentage) {
		return css + percentage + '{' + cssifyObject(validateStyle(frames[percentage])) + '}';
		return css + percentage + '{' + cssifyObject(frames[percentage]) + '}';
		}, '');
		@@ -330,35 +150,28 @@

		var Renderer = function () {
		function Renderer() {
		var config = arguments.length <= 0 \|\| arguments[0] === undefined ? {} : arguments[0];
		babelHelpers.classCallCheck(this, Renderer);
		function createRenderer() {
		var config = arguments.length <= 0 \|\| arguments[0] === undefined ? {} : arguments[0];

		this.listeners = [];
		this.keyframePrefixes = config.keyframePrefixes \|\| ['-webkit-', '-moz-'];
		this.keyframePrefixes.push('');
		this.plugins = config.plugins \|\| [];
		this.clear();
		}
		var renderer = {
		listeners: [],
		keyframePrefixes: config.keyframePrefixes \|\| ['-webkit-', '-moz-'],
		plugins: config.plugins \|\| [],

		/**
		* clears the sheet's cache but keeps all listeners
		*/
		/**
		* clears the sheet's cache but keeps all listeners
		*/
		clear: function clear() {
		renderer.fontFaces = '';
		renderer.keyframes = '';
		renderer.statics = '';
		renderer.rules = '';
		renderer.mediaRules = {};
		renderer.rendered = {};
		renderer.base = {};
		renderer.ids = [];

		// emit changes to notify subscribers
		renderer._emitChange();
		},

		babelHelpers.createClass(Renderer, [{
		key: 'clear',
		value: function clear() {
		this.fontFaces = '';
		this.keyframes = '';
		this.statics = '';
		this.rules = '';
		this.mediaRules = {};
		this.rendered = {};
		this.base = {};
		this.ids = [];

		// emit changes to notify subscribers
		this._emitChange();
		}

		/**
		@@ -369,9 +182,5 @@ * renders a new rule variation and caches the result
		* @param {Object?} props - properties used to render
		* @param {Function[]?} plugins - array of plugins to process style
		* @return {string} className to reference the rendered rule
		*/

		}, {
		key: 'renderRule',
		value: function renderRule(rule) {
		renderRule: function renderRule(rule) {
		var props = arguments.length <= 1 \|\| arguments[1] === undefined ? {} : arguments[1];
		@@ -381,33 +190,25 @@
		// will create an ID reference
		if (this.ids.indexOf(rule) < 0) {
		this.ids.push(rule);
		if (renderer.ids.indexOf(rule) < 0) {
		renderer.ids.push(rule);

		// directly render the static base style to be able
		// to diff future dynamic style with those
		this.renderRule(rule, {});
		renderer.renderRule(rule, {});
		}

		// uses the reference ID and the props to generate an unique className
		var ruleId = this.ids.indexOf(rule);
		var className = 'c' + ruleId + this._generatePropsReference(props);
		var ruleId = renderer.ids.indexOf(rule);
		var className = 'c' + ruleId + renderer._generatePropsReference(props);

		// only if the cached rule has not already been rendered
		// with a specific set of properties it actually renders
		if (!this.rendered.hasOwnProperty(className)) {
		if (!renderer.rendered.hasOwnProperty(className)) {
		var style = renderer._processStyle(rule(props));
		renderer._renderStyle(className, style, renderer.base[ruleId]);

		var pluginInterface = {
		plugins: this.plugins,
		processStyle: processStyle,
		style: rule(props),
		props: props
		};
		renderer.rendered[className] = renderer._didChange;

		var style = validateStyle(processStyle(pluginInterface));
		this._renderStyle(className, style, this.base[ruleId]);

		this.rendered[className] = this._didChange;

		if (this._didChange) {
		this._didChange = false;
		this._emitChange();
		if (renderer._didChange) {
		renderer._didChange = false;
		renderer._emitChange();
		}
		@@ -417,3 +218,3 @@
		if (className === 'c' + ruleId) {
		this.base[ruleId] = style;
		renderer.base[ruleId] = style;
		}
		@@ -423,3 +224,3 @@ }
		var baseClassName = 'c' + ruleId;
		if (!this.rendered[className]) {
		if (!renderer.rendered[className]) {
		return baseClassName;
		@@ -430,4 +231,5 @@ }
		return className !== baseClassName ? baseClassName + ' ' + className : className;
		}
		},


		/**
		@@ -440,6 +242,3 @@ * renders a new keyframe variation and caches the result
		*/

		}, {
		key: 'renderKeyframe',
		value: function renderKeyframe(keyframe) {
		renderKeyframe: function renderKeyframe(keyframe) {
		var props = arguments.length <= 1 \|\| arguments[1] === undefined ? {} : arguments[1];
		@@ -449,29 +248,23 @@
		// will create cache entries and an ID reference
		if (this.ids.indexOf(keyframe) < 0) {
		this.ids.push(keyframe);
		if (renderer.ids.indexOf(keyframe) < 0) {
		renderer.ids.push(keyframe);
		}

		var propsReference = this._generatePropsReference(props);
		var animationName = 'k' + this.ids.indexOf(keyframe) + propsReference;
		var propsReference = renderer._generatePropsReference(props);
		var animationName = 'k' + renderer.ids.indexOf(keyframe) + propsReference;

		// only if the cached keyframe has not already been rendered
		// with a specific set of properties it actually renders
		if (!this.rendered.hasOwnProperty(animationName)) {
		var pluginInterface = {
		plugins: this.plugins,
		processStyle: processStyle,
		style: keyframe(props),
		props: props
		};

		var processedKeyframe = processStyle(pluginInterface);
		var css = cssifyKeyframe(processedKeyframe, animationName, this.keyframePrefixes);
		this.rendered[animationName] = true;
		this.keyframes += css;
		this._emitChange();
		if (!renderer.rendered.hasOwnProperty(animationName)) {
		var processedKeyframe = renderer._processStyle(keyframe(props));
		var css = cssifyKeyframe(processedKeyframe, animationName, renderer.keyframePrefixes);
		renderer.rendered[animationName] = true;
		renderer.keyframes += css;
		renderer._emitChange();
		}

		return animationName;
		}
		},


		/**
		@@ -483,11 +276,6 @@ * renders a new font-face and caches it
		*/

		}, {
		key: 'renderFont',
		value: function renderFont(family, files) {
		var _this = this;

		renderFont: function renderFont(family, files) {
		var properties = arguments.length <= 2 \|\| arguments[2] === undefined ? {} : arguments[2];

		if (!this.rendered.hasOwnProperty(family)) {
		if (!renderer.rendered.hasOwnProperty(family)) {
		(function () {
		@@ -509,5 +297,5 @@ var fontFace = {
		var css = '@font-face{' + cssifyObject(fontFace) + '}';
		_this.rendered[family] = true;
		_this.fontFaces += css;
		_this._emitChange();
		renderer.rendered[family] = true;
		renderer.fontFaces += css;
		renderer._emitChange();
		})();
		@@ -517,4 +305,5 @@ }
		return family;
		}
		},


		/**
		@@ -527,27 +316,19 @@ * renders static style and caches them
		*/

		}, {
		key: 'renderStatic',
		value: function renderStatic(style, selector) {
		renderStatic: function renderStatic(style, selector) {
		var reference = typeof style === 'string' ? style : selector;

		if (!this.rendered.hasOwnProperty(reference)) {
		if (!renderer.rendered.hasOwnProperty(reference)) {
		if (typeof style === 'string') {
		// remove new lines from template strings
		this.statics += style.replace(/\s{2,}/g, '');
		renderer.statics += style.replace(/\s{2,}/g, '');
		} else {
		var pluginInterface = {
		plugins: this.plugins,
		processStyle: processStyle,
		style: style
		};

		this.statics += selector + '{' + cssifyObject(processStyle(pluginInterface)) + '}';
		renderer.statics += selector + '{' + cssifyObject(renderer._processStyle(style)) + '}';
		}

		this.rendered[reference] = true;
		this._emitChange();
		renderer.rendered[reference] = true;
		renderer._emitChange();
		}
		}
		},


		/**
		@@ -558,15 +339,13 @@ * renders all cached styles into a single valid CSS string
		*/
		renderToString: function renderToString() {
		var css = renderer.fontFaces + renderer.statics + renderer.rules;

		}, {
		key: 'renderToString',
		value: function renderToString() {
		var css = this.fontFaces + this.statics + this.rules;

		for (var media in this.mediaRules) {
		css += '@media ' + media + '{' + this.mediaRules[media] + '}';
		for (var media in renderer.mediaRules) {
		css += '@media ' + media + '{' + renderer.mediaRules[media] + '}';
		}

		return css + this.keyframes;
		}
		return css + renderer.keyframes;
		},


		/**
		@@ -578,16 +357,12 @@ * Adds a new subscription to get notified on every rerender
		*/

		}, {
		key: 'subscribe',
		value: function subscribe(callback) {
		var _this2 = this;

		this.listeners.push(callback);
		subscribe: function subscribe(callback) {
		renderer.listeners.push(callback);
		return {
		unsubscribe: function unsubscribe() {
		return _this2.listeners.splice(_this2.listeners.indexOf(callback), 1);
		return renderer.listeners.splice(renderer.listeners.indexOf(callback), 1);
		}
		};
		}
		},


		/**
		@@ -600,12 +375,10 @@ * calls each listener with the current CSS markup of all caches
		*/

		}, {
		key: '_emitChange',
		value: function _emitChange() {
		var css = this.renderToString();
		this.listeners.forEach(function (listener) {
		_emitChange: function _emitChange() {
		var css = renderer.renderToString();
		renderer.listeners.forEach(function (listener) {
		return listener(css);
		});
		}
		},


		/**
		@@ -617,10 +390,21 @@ * generates an unique reference id by content hashing props
		*/

		}, {
		key: '_generatePropsReference',
		value: function _generatePropsReference(props) {
		_generatePropsReference: function _generatePropsReference(props) {
		return generateHash(sortedStringify(props));
		}
		},


		/**
		* pipes a style object through a list of plugins
		*
		* @param {Object} style - style object to process
		* @return {Object} processed style
		*/
		_processStyle: function _processStyle(style) {
		return renderer.plugins.reduce(function (processedStyle, plugin) {
		return plugin(processedStyle);
		}, style);
		},


		/**
		* iterates a style object and renders each rule to the cache
		@@ -632,10 +416,4 @@ *
		*/

		}, {
		key: '_renderStyle',
		value: function _renderStyle(className, style) {
		_renderStyle: function _renderStyle(className, style) {
		var base = arguments.length <= 2 \|\| arguments[2] === undefined ? {} : arguments[2];

		var _this3 = this;

		var pseudo = arguments.length <= 3 \|\| arguments[3] === undefined ? '' : arguments[3];
		@@ -649,13 +427,17 @@ var media = arguments.length <= 4 \|\| arguments[4] === undefined ? '' : arguments[4];
		if (value instanceof Object && !Array.isArray(value)) {
		if (isPseudoClass(property)) {
		_this3._renderStyle(className, value, base[property], pseudo + property, media);
		} else if (isMediaQuery(property)) {
		if (property.charAt(0) === ':') {
		renderer._renderStyle(className, value, base[property], pseudo + property, media);
		} else if (property.substr(0, 6) === '@media') {
		// combine media query rules with an `and`
		var query = property.slice(6).trim();
		var combinedMedia = media.length > 0 ? media + ' and ' + query : query;
		_this3._renderStyle(className, value, base[property], pseudo, combinedMedia);
		renderer._renderStyle(className, value, base[property], pseudo, combinedMedia);
		}
		} else {
		// diff styles with the base styles to only extract dynamic styles
		if (!base.hasOwnProperty(property) \|\| base[property] !== value) {
		if (value !== undefined && !base.hasOwnProperty(property) \|\| base[property] !== value) {
		// remove concatenated string values including `undefined`
		if (typeof value === 'string' && value.indexOf('undefined') > -1) {
		return ruleset;
		}
		ruleset[property] = value;
		@@ -670,23 +452,89 @@ }
		var css = '.' + className + pseudo + '{' + cssifyObject(ruleset) + '}';
		this._didChange = true;
		renderer._didChange = true;

		if (media.length > 0) {
		if (!this.mediaRules.hasOwnProperty(media)) {
		this.mediaRules[media] = '';
		if (!renderer.mediaRules.hasOwnProperty(media)) {
		renderer.mediaRules[media] = '';
		}

		this.mediaRules[media] += css;
		renderer.mediaRules[media] += css;
		} else {
		this.rules += css;
		renderer.rules += css;
		}
		}
		}
		}]);
		return Renderer;
		}();
		};

		// initial setup
		renderer.keyframePrefixes.push('');
		renderer.clear();

		return renderer;
		}

		function assign(base) {
		for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
		args[_key - 1] = arguments[_key];
		}

		return args.reduce(function (extend, obj) {
		for (var property in obj) {
		var value = obj[property];
		if (extend[property] instanceof Object && value instanceof Object) {
		extend[property] = assign({}, extend[property], value);
		} else {
		extend[property] = value;
		}
		}
		return extend;
		}, base);
		}

		function combineRules() {
		for (var _len = arguments.length, rules = Array(_len), _key = 0; _key < _len; _key++) {
		rules[_key] = arguments[_key];
		}

		return function (props) {
		return rules.reduce(function (style, rule) {
		return assign(style, rule(props));
		}, {});
		};
		}

		function enhance() {
		for (var _len = arguments.length, enhancers = Array(_len), _key = 0; _key < _len; _key++) {
		enhancers[_key] = arguments[_key];
		}

		return function (createRenderer) {
		return function () {
		return enhancers.reduce(function (renderer, enhancer) {
		return enhancer(renderer);
		}, createRenderer.apply(undefined, arguments));
		};
		};
		}

		var warning = function warning() {
		return true;
		};

		if (true) {
		warning = function warning(condition, message) {
		if (!condition) {
		if (typeof console !== 'undefined') {
		console.error(message); // eslint-disable-line
		}
		throw new Error(message);
		}
		};
		}

		var warning$1 = warning;

		var NODE_TYPE = 1;
		var NODE_NAME = 'STYLE';

		function createRenderer(mountNode, config) {
		function render(renderer, mountNode) {
		// check if the passed node is a valid element node which allows
		@@ -705,6 +553,3 @@ // setting the `textContent` property to update the node's content
		mountNode.setAttribute('data-fela-stylesheet', '');
		mountNode.textContent = '';

		var renderer = new Renderer(config);

		// updated the DOM node's textContent with newly rendered markup
		@@ -714,118 +559,12 @@ renderer.subscribe(function (css) {
		});
		renderer.mountNode = mountNode;
		return renderer;
		}

		function applyMiddleware() {
		var middleware = arguments.length <= 0 \|\| arguments[0] === undefined ? [] : arguments[0];

		return function (renderer) {
		middleware.forEach(function (tool) {
		return renderer = tool(renderer);
		});
		return renderer;
		};
		// render currently rendered styles to the DOM once
		mountNode.textContent = renderer.renderToString();
		}

		var index$3 = __commonjs(function (module) {
		'use strict';

		module.exports = function (x) {
		var type = typeof x === 'undefined' ? 'undefined' : babelHelpers.typeof(x);
		return x !== null && (type === 'object' \|\| type === 'function');
		};
		});

		var require$$0$1 = (index$3 && typeof index$3 === 'object' && 'default' in index$3 ? index$3['default'] : index$3);

		var index$2 = __commonjs(function (module) {
		'use strict';

		var isObj = require$$0$1;
		var hasOwnProperty = Object.prototype.hasOwnProperty;
		var propIsEnumerable = Object.prototype.propertyIsEnumerable;

		function toObject(val) {
		if (val === null \|\| val === undefined) {
		throw new TypeError('Sources cannot be null or undefined');
		}

		return Object(val);
		}

		function assignKey(to, from, key) {
		var val = from[key];

		if (val === undefined \|\| val === null) {
		return;
		}

		if (hasOwnProperty.call(to, key)) {
		if (to[key] === undefined \|\| to[key] === null) {
		throw new TypeError('Cannot convert undefined or null to object (' + key + ')');
		}
		}

		if (!hasOwnProperty.call(to, key) \|\| !isObj(val)) {
		to[key] = val;
		} else {
		to[key] = assign(Object(to[key]), from[key]);
		}
		}

		function assign(to, from) {
		if (to === from) {
		return to;
		}

		from = Object(from);

		for (var key in from) {
		if (hasOwnProperty.call(from, key)) {
		assignKey(to, from, key);
		}
		}

		if (Object.getOwnPropertySymbols) {
		var symbols = Object.getOwnPropertySymbols(from);

		for (var i = 0; i < symbols.length; i++) {
		if (propIsEnumerable.call(from, symbols[i])) {
		assignKey(to, from, symbols[i]);
		}
		}
		}

		return to;
		}

		module.exports = function deepAssign(target) {
		target = toObject(target);

		for (var s = 1; s < arguments.length; s++) {
		assign(target, arguments[s]);
		}

		return target;
		};
		});

		var deepAssign = (index$2 && typeof index$2 === 'object' && 'default' in index$2 ? index$2['default'] : index$2);

		function combineRules() {
		for (var _len = arguments.length, rules = Array(_len), _key = 0; _key < _len; _key++) {
		rules[_key] = arguments[_key];
		}

		return function (props) {
		return rules.reduce(function (style, rule) {
		return deepAssign(style, rule(props));
		}, {});
		};
		}

		var index = {
		createRenderer: createRenderer,
		applyMiddleware: applyMiddleware,
		combineRules: combineRules
		combineRules: combineRules,
		enhance: enhance,
		render: render
		};
		@@ -832,0 +571,0 @@

2

dist/fela.min.js

		@@ -1,1 +0,1 @@
		!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.Fela=t()}(this,function(){"use strict";function e(e,t){return t={exports:{}},e(t,t.exports),t.exports}function t(e){var t=0,n=0,r=void 0,i=e.length;if(0===i)return"";for(;i>n;++n)r=e.charCodeAt(n),t=(t<<5)-t+r,t\|=0;return"-"+t.toString(36)}function n(e){return Object.keys(e).sort().reduce(function(t,n){return t+n+e[n]},"")}function r(e){return Object.keys(y).reduce(function(t,n){return e.indexOf(n)>-1&&(t=y[n]),t},void 0)}function i(e){return Object.keys(e).forEach(function(t){var n=e[t];n instanceof Object&&!Array.isArray(n)?(e[t]=v(t)\|\|p(t)?i(n):{},0===Object.keys(e[t]).length&&delete e[t]):"string"!=typeof n&&"number"!=typeof n?delete e[t]:"string"==typeof n&&n.indexOf("undefined")>-1&&delete e[t]}),e}function o(e){var t=e.plugins,n=e.style;return t.forEach(function(t){return n=t(e)}),n}function s(e){return Object.keys(e).reduce(function(t,n){return t.length>0&&(t+=";"),t+=b(n)+":"+e[n]},"")}function u(e,t){var n=arguments.length<=2\|\|void 0===arguments[2]?[""]:arguments[2],r=Object.keys(e).reduce(function(t,n){return t+n+"{"+s(i(e[n]))+"}"},"");return n.reduce(function(e,n){return e+"@"+n+"keyframes "+t+"{"+r+"}"},"")}function a(e,t){if(!e\|\|e.nodeType!==O)throw new Error("You need to specify a valid element node (nodeType = 1) to render into.");e.setAttribute("data-fela-stylesheet",""),e.textContent="";var n=new m(t);return n.subscribe(function(t){return e.textContent=t}),n.mountNode=e,n}function f(){var e=arguments.length<=0\|\|void 0===arguments[0]?[]:arguments[0];return function(t){return e.forEach(function(e){return t=e(t)}),t}}function c(){for(var e=arguments.length,t=Array(e),n=0;e>n;n++)t[n]=arguments[n];return function(e){return t.reduce(function(t,n){return x(t,n(e))},{})}}var l={};l["typeof"]="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e},l.classCallCheck=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},l.createClass=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}}(),l["extends"]=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};var h=e(function(e){function t(e){return function(){return e}}var n=function(){};n.thatReturns=t,n.thatReturnsFalse=t(!1),n.thatReturnsTrue=t(!0),n.thatReturnsNull=t(null),n.thatReturnsThis=function(){return this},n.thatReturnsArgument=function(e){return e},e.exports=n}),d=h&&"object"==typeof h&&"default"in h?h["default"]:h,y=(e(function(e){var t=d,n=t;e.exports=n}),{".woff":"woff",".eof":"eof",".ttf":"truetype",".svg":"svg"}),p=function(e){return"@media"===e.substr(0,6)},v=function(e){return":"===e.charAt(0)},g=e(function(e){function t(e){return e.replace(n,"-$&").toLowerCase().replace(r,"-ms-")}var n=/[A-Z]/g,r=/^ms-/;e.exports=t}),b=g&&"object"==typeof g&&"default"in g?g["default"]:g,m=function(){function e(){var t=arguments.length<=0\|\|void 0===arguments[0]?{}:arguments[0];l.classCallCheck(this,e),this.listeners=[],this.keyframePrefixes=t.keyframePrefixes\|\|["-webkit-","-moz-"],this.keyframePrefixes.push(""),this.plugins=t.plugins\|\|[],this.clear()}return l.createClass(e,[{key:"clear",value:function(){this.fontFaces="",this.keyframes="",this.statics="",this.rules="",this.mediaRules={},this.rendered={},this.base={},this.ids=[],this._emitChange()}},{key:"renderRule",value:function(e){var t=arguments.length<=1\|\|void 0===arguments[1]?{}:arguments[1];this.ids.indexOf(e)<0&&(this.ids.push(e),this.renderRule(e,{}));var n=this.ids.indexOf(e),r="c"+n+this._generatePropsReference(t);if(!this.rendered.hasOwnProperty(r)){var s={plugins:this.plugins,processStyle:o,style:e(t),props:t},u=i(o(s));this._renderStyle(r,u,this.base[n]),this.rendered[r]=this._didChange,this._didChange&&(this._didChange=!1,this._emitChange()),r==="c"+n&&(this.base[n]=u)}var a="c"+n;return this.rendered[r]?r!==a?a+" "+r:r:a}},{key:"renderKeyframe",value:function(e){var t=arguments.length<=1\|\|void 0===arguments[1]?{}:arguments[1];this.ids.indexOf(e)<0&&this.ids.push(e);var n=this._generatePropsReference(t),r="k"+this.ids.indexOf(e)+n;if(!this.rendered.hasOwnProperty(r)){var i={plugins:this.plugins,processStyle:o,style:e(t),props:t},s=o(i),a=u(s,r,this.keyframePrefixes);this.rendered[r]=!0,this.keyframes+=a,this._emitChange()}return r}},{key:"renderFont",value:function(e,t){var n=this,i=arguments.length<=2\|\|void 0===arguments[2]?{}:arguments[2];return this.rendered.hasOwnProperty(e)\|\|!function(){var o={fontFamily:"'"+e+"'",src:t.map(function(e){return"url('"+e+"') format('"+r(e)+"')"}).join(",")},u=["fontVariant","fontWeight","fontStretch","fontStyle","unicodeRange"];Object.keys(i).filter(function(e){return u.indexOf(e)>-1}).forEach(function(e){return o[e]=i[e]});var a="@font-face{"+s(o)+"}";n.rendered[e]=!0,n.fontFaces+=a,n._emitChange()}(),e}},{key:"renderStatic",value:function(e,t){var n="string"==typeof e?e:t;if(!this.rendered.hasOwnProperty(n)){if("string"==typeof e)this.statics+=e.replace(/\s{2,}/g,"");else{var r={plugins:this.plugins,processStyle:o,style:e};this.statics+=t+"{"+s(o(r))+"}"}this.rendered[n]=!0,this._emitChange()}}},{key:"renderToString",value:function(){var e=this.fontFaces+this.statics+this.rules;for(var t in this.mediaRules)e+="@media "+t+"{"+this.mediaRules[t]+"}";return e+this.keyframes}},{key:"subscribe",value:function(e){var t=this;return this.listeners.push(e),{unsubscribe:function(){return t.listeners.splice(t.listeners.indexOf(e),1)}}}},{key:"_emitChange",value:function(){var e=this.renderToString();this.listeners.forEach(function(t){return t(e)})}},{key:"_generatePropsReference",value:function(e){return t(n(e))}},{key:"_renderStyle",value:function(e,t){var n=arguments.length<=2\|\|void 0===arguments[2]?{}:arguments[2],r=this,i=arguments.length<=3\|\|void 0===arguments[3]?"":arguments[3],o=arguments.length<=4\|\|void 0===arguments[4]?"":arguments[4],u=Object.keys(t).reduce(function(s,u){var a=t[u];if(a instanceof Object&&!Array.isArray(a)){if(v(u))r._renderStyle(e,a,n[u],i+u,o);else if(p(u)){var f=u.slice(6).trim(),c=o.length>0?o+" and "+f:f;r._renderStyle(e,a,n[u],i,c)}}else n.hasOwnProperty(u)&&n[u]===a\|\|(s[u]=a);return s},{});if(Object.keys(u).length>0){var a="."+e+i+"{"+s(u)+"}";this._didChange=!0,o.length>0?(this.mediaRules.hasOwnProperty(o)\|\|(this.mediaRules[o]=""),this.mediaRules[o]+=a):this.rules+=a}}}]),e}(),O=1,k=e(function(e){e.exports=function(e){var t="undefined"==typeof e?"undefined":l["typeof"](e);return null!==e&&("object"===t\|\|"function"===t)}}),j=k&&"object"==typeof k&&"default"in k?k["default"]:k,w=e(function(e){function t(e){if(null===e\|\|void 0===e)throw new TypeError("Sources cannot be null or undefined");return Object(e)}function n(e,t,n){var s=t[n];if(void 0!==s&&null!==s){if(o.call(e,n)&&(void 0===e[n]\|\|null===e[n]))throw new TypeError("Cannot convert undefined or null to object ("+n+")");o.call(e,n)&&i(s)?e[n]=r(Object(e[n]),t[n]):e[n]=s}}function r(e,t){if(e===t)return e;t=Object(t);for(var r in t)o.call(t,r)&&n(e,t,r);if(Object.getOwnPropertySymbols)for(var i=Object.getOwnPropertySymbols(t),u=0;u<i.length;u++)s.call(t,i[u])&&n(e,t,i[u]);return e}var i=j,o=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable;e.exports=function(e){e=t(e);for(var n=1;n<arguments.length;n++)r(e,arguments[n]);return e}}),x=w&&"object"==typeof w&&"default"in w?w["default"]:w;console.warn("You are using a minified version of Fela. If you want to get warnings please use an unminified version (process.env.NODE_ENV=development).");var C={createRenderer:a,applyMiddleware:f,combineRules:c};return C});
		!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):e.Fela=r()}(this,function(){"use strict";function e(e,r){return r={exports:{}},e(r,r.exports),r.exports}function r(e){var r=0,n=0,t=void 0,i=e.length;if(0===i)return"";for(;i>n;++n)t=e.charCodeAt(n),r=(r<<5)-r+t,r\|=0;return"-"+r.toString(36)}function n(e){return Object.keys(e).sort().reduce(function(r,n){return r+n+e[n]},"")}function t(e){return Object.keys(l).reduce(function(r,n){return e.indexOf(n)>-1&&(r=l[n]),r},void 0)}function i(e){return Object.keys(e).reduce(function(r,n){return r.length>0&&(r+=";"),r+=p(n)+":"+e[n]},"")}function o(e,r){var n=arguments.length<=2\|\|void 0===arguments[2]?[""]:arguments[2],t=Object.keys(e).reduce(function(r,n){return r+n+"{"+i(e[n])+"}"},"");return n.reduce(function(e,n){return e+"@"+n+"keyframes "+r+"{"+t+"}"},"")}function u(){var e=arguments.length<=0\|\|void 0===arguments[0]?{}:arguments[0],u={listeners:[],keyframePrefixes:e.keyframePrefixes\|\|["-webkit-","-moz-"],plugins:e.plugins\|\|[],clear:function(){u.fontFaces="",u.keyframes="",u.statics="",u.rules="",u.mediaRules={},u.rendered={},u.base={},u.ids=[],u._emitChange()},renderRule:function(e){var r=arguments.length<=1\|\|void 0===arguments[1]?{}:arguments[1];u.ids.indexOf(e)<0&&(u.ids.push(e),u.renderRule(e,{}));var n=u.ids.indexOf(e),t="c"+n+u._generatePropsReference(r);if(!u.rendered.hasOwnProperty(t)){var i=u._processStyle(e(r));u._renderStyle(t,i,u.base[n]),u.rendered[t]=u._didChange,u._didChange&&(u._didChange=!1,u._emitChange()),t==="c"+n&&(u.base[n]=i)}var o="c"+n;return u.rendered[t]?t!==o?o+" "+t:t:o},renderKeyframe:function(e){var r=arguments.length<=1\|\|void 0===arguments[1]?{}:arguments[1];u.ids.indexOf(e)<0&&u.ids.push(e);var n=u._generatePropsReference(r),t="k"+u.ids.indexOf(e)+n;if(!u.rendered.hasOwnProperty(t)){var i=u._processStyle(e(r)),f=o(i,t,u.keyframePrefixes);u.rendered[t]=!0,u.keyframes+=f,u._emitChange()}return t},renderFont:function(e,r){var n=arguments.length<=2\|\|void 0===arguments[2]?{}:arguments[2];return u.rendered.hasOwnProperty(e)\|\|!function(){var o={fontFamily:"'"+e+"'",src:r.map(function(e){return"url('"+e+"') format('"+t(e)+"')"}).join(",")},f=["fontVariant","fontWeight","fontStretch","fontStyle","unicodeRange"];Object.keys(n).filter(function(e){return f.indexOf(e)>-1}).forEach(function(e){return o[e]=n[e]});var s="@font-face{"+i(o)+"}";u.rendered[e]=!0,u.fontFaces+=s,u._emitChange()}(),e},renderStatic:function(e,r){var n="string"==typeof e?e:r;u.rendered.hasOwnProperty(n)\|\|("string"==typeof e?u.statics+=e.replace(/\s{2,}/g,""):u.statics+=r+"{"+i(u._processStyle(e))+"}",u.rendered[n]=!0,u._emitChange())},renderToString:function(){var e=u.fontFaces+u.statics+u.rules;for(var r in u.mediaRules)e+="@media "+r+"{"+u.mediaRules[r]+"}";return e+u.keyframes},subscribe:function(e){return u.listeners.push(e),{unsubscribe:function(){return u.listeners.splice(u.listeners.indexOf(e),1)}}},_emitChange:function(){var e=u.renderToString();u.listeners.forEach(function(r){return r(e)})},_generatePropsReference:function(e){return r(n(e))},_processStyle:function(e){return u.plugins.reduce(function(e,r){return r(e)},e)},_renderStyle:function(e,r){var n=arguments.length<=2\|\|void 0===arguments[2]?{}:arguments[2],t=arguments.length<=3\|\|void 0===arguments[3]?"":arguments[3],o=arguments.length<=4\|\|void 0===arguments[4]?"":arguments[4],f=Object.keys(r).reduce(function(i,f){var s=r[f];if(s instanceof Object&&!Array.isArray(s)){if(":"===f.charAt(0))u._renderStyle(e,s,n[f],t+f,o);else if("@media"===f.substr(0,6)){var c=f.slice(6).trim(),a=o.length>0?o+" and "+c:c;u._renderStyle(e,s,n[f],t,a)}}else if(void 0!==s&&!n.hasOwnProperty(f)\|\|n[f]!==s){if("string"==typeof s&&s.indexOf("undefined")>-1)return i;i[f]=s}return i},{});if(Object.keys(f).length>0){var s="."+e+t+"{"+i(f)+"}";u._didChange=!0,o.length>0?(u.mediaRules.hasOwnProperty(o)\|\|(u.mediaRules[o]=""),u.mediaRules[o]+=s):u.rules+=s}}};return u.keyframePrefixes.push(""),u.clear(),u}function f(e){for(var r=arguments.length,n=Array(r>1?r-1:0),t=1;r>t;t++)n[t-1]=arguments[t];return n.reduce(function(e,r){for(var n in r){var t=r[n];e[n]instanceof Object&&t instanceof Object?e[n]=f({},e[n],t):e[n]=t}return e},e)}function s(){for(var e=arguments.length,r=Array(e),n=0;e>n;n++)r[n]=arguments[n];return function(e){return r.reduce(function(r,n){return f(r,n(e))},{})}}function c(){for(var e=arguments.length,r=Array(e),n=0;e>n;n++)r[n]=arguments[n];return function(e){return function(){return r.reduce(function(e,r){return r(e)},e.apply(void 0,arguments))}}}function a(e,r){if(!r\|\|r.nodeType!==h)throw new Error("You need to specify a valid element node (nodeType = 1) to render into.");r.setAttribute("data-fela-stylesheet",""),e.subscribe(function(e){return r.textContent=e}),r.textContent=e.renderToString()}var d={};d["typeof"]="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e},d["extends"]=Object.assign\|\|function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e};var l={".woff":"woff",".eof":"eof",".ttf":"truetype",".svg":"svg"},y=e(function(e){function r(e){return e.replace(n,"-$&").toLowerCase().replace(t,"-ms-")}var n=/[A-Z]/g,t=/^ms-/;e.exports=r}),p=y&&"object"==typeof y&&"default"in y?y["default"]:y,h=1,g={createRenderer:u,combineRules:s,enhance:c,render:a};return g});

6

lib/combineRules.js

		@@ -8,5 +8,5 @@ 'use strict';

		var _deepAssign = require('deep-assign');
		var _assign = require('./utils/assign');

		var _deepAssign2 = _interopRequireDefault(_deepAssign);
		var _assign2 = _interopRequireDefault(_assign);

		@@ -22,3 +22,3 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
		return rules.reduce(function (style, rule) {
		return (0, _deepAssign2.default)(style, rule(props));
		return (0, _assign2.default)(style, rule(props));
		}, {});
		@@ -25,0 +25,0 @@ };

339

lib/createRenderer.js

		@@ -8,40 +8,329 @@ 'use strict';

		var _warning = require('fbjs/lib/warning');
		var _generateContentHash = require('./utils/generateContentHash');

		var _warning2 = _interopRequireDefault(_warning);
		var _generateContentHash2 = _interopRequireDefault(_generateContentHash);

		var _Renderer = require('./renderer/Renderer');
		var _sortedStringify = require('./utils/sortedStringify');

		var _Renderer2 = _interopRequireDefault(_Renderer);
		var _sortedStringify2 = _interopRequireDefault(_sortedStringify);

		var _getFontFormat = require('./utils/getFontFormat');

		var _getFontFormat2 = _interopRequireDefault(_getFontFormat);

		var _cssifyKeyframe = require('./utils/cssifyKeyframe');

		var _cssifyKeyframe2 = _interopRequireDefault(_cssifyKeyframe);

		var _cssifyObject = require('./utils/cssifyObject');

		var _cssifyObject2 = _interopRequireDefault(_cssifyObject);

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

		var NODE_TYPE = 1;
		var NODE_NAME = 'STYLE';
		function createRenderer() {
		var config = arguments.length <= 0 \|\| arguments[0] === undefined ? {} : arguments[0];

		function createRenderer(mountNode, config) {
		// check if the passed node is a valid element node which allows
		// setting the `textContent` property to update the node's content
		if (!mountNode \|\| mountNode.nodeType !== NODE_TYPE) {
		throw new Error('You need to specify a valid element node (nodeType = 1) to render into.');
		}
		var renderer = {
		listeners: [],
		keyframePrefixes: config.keyframePrefixes \|\| ['-webkit-', '-moz-'],
		plugins: config.plugins \|\| [],

		// warns if the DOM node either is not a valid <style> element thus the styles do not get applied as Expected
		// or if the node already got the data-fela-stylesheet attribute applied suggesting it is already used by another Renderer
		process.env.NODE_ENV !== "production" ? (0, _warning2.default)(mountNode.nodeName === NODE_NAME, 'You are using a node other than `<style>`. Your styles might not get applied correctly.') : void 0;
		process.env.NODE_ENV !== "production" ? (0, _warning2.default)(!mountNode.hasAttribute('data-fela-stylesheet'), 'This node is already used by another renderer. Rendering might overwrite other styles.') : void 0;
		/**
		* clears the sheet's cache but keeps all listeners
		*/
		clear: function clear() {
		renderer.fontFaces = '';
		renderer.keyframes = '';
		renderer.statics = '';
		renderer.rules = '';
		renderer.mediaRules = {};
		renderer.rendered = {};
		renderer.base = {};
		renderer.ids = [];

		// mark and clean the DOM node to prevent side-effects
		mountNode.setAttribute('data-fela-stylesheet', '');
		mountNode.textContent = '';
		// emit changes to notify subscribers
		renderer._emitChange();
		},

		var renderer = new _Renderer2.default(config);

		// updated the DOM node's textContent with newly rendered markup
		renderer.subscribe(function (css) {
		return mountNode.textContent = css;
		});
		renderer.mountNode = mountNode;
		/**
		* renders a new rule variation and caches the result
		*
		* @param {Function} rule - rule which gets rendered
		* @param {Object?} props - properties used to render
		* @return {string} className to reference the rendered rule
		*/
		renderRule: function renderRule(rule) {
		var props = arguments.length <= 1 \|\| arguments[1] === undefined ? {} : arguments[1];

		// rendering a rule for the first time
		// will create an ID reference
		if (renderer.ids.indexOf(rule) < 0) {
		renderer.ids.push(rule);

		// directly render the static base style to be able
		// to diff future dynamic style with those
		renderer.renderRule(rule, {});
		}

		// uses the reference ID and the props to generate an unique className
		var ruleId = renderer.ids.indexOf(rule);
		var className = 'c' + ruleId + renderer._generatePropsReference(props);

		// only if the cached rule has not already been rendered
		// with a specific set of properties it actually renders
		if (!renderer.rendered.hasOwnProperty(className)) {
		var style = renderer._processStyle(rule(props));
		renderer._renderStyle(className, style, renderer.base[ruleId]);

		renderer.rendered[className] = renderer._didChange;

		if (renderer._didChange) {
		renderer._didChange = false;
		renderer._emitChange();
		}

		// keep static style to diff dynamic onces later on
		if (className === 'c' + ruleId) {
		renderer.base[ruleId] = style;
		}
		}

		var baseClassName = 'c' + ruleId;
		if (!renderer.rendered[className]) {
		return baseClassName;
		}

		// returns either the base className or both the base and the dynamic part
		return className !== baseClassName ? baseClassName + ' ' + className : className;
		},


		/**
		* renders a new keyframe variation and caches the result
		*
		* @param {Keyframe} keyframe - Keyframe which gets rendered
		* @param {Object?} props - properties used to render
		* @return {string} animationName to reference the rendered keyframe
		*/
		renderKeyframe: function renderKeyframe(keyframe) {
		var props = arguments.length <= 1 \|\| arguments[1] === undefined ? {} : arguments[1];

		// rendering a Keyframe for the first time
		// will create cache entries and an ID reference
		if (renderer.ids.indexOf(keyframe) < 0) {
		renderer.ids.push(keyframe);
		}

		var propsReference = renderer._generatePropsReference(props);
		var animationName = 'k' + renderer.ids.indexOf(keyframe) + propsReference;

		// only if the cached keyframe has not already been rendered
		// with a specific set of properties it actually renders
		if (!renderer.rendered.hasOwnProperty(animationName)) {
		var processedKeyframe = renderer._processStyle(keyframe(props));
		var css = (0, _cssifyKeyframe2.default)(processedKeyframe, animationName, renderer.keyframePrefixes);
		renderer.rendered[animationName] = true;
		renderer.keyframes += css;
		renderer._emitChange();
		}

		return animationName;
		},


		/**
		* renders a new font-face and caches it
		*
		* @param {FontFace} fontFace - fontFace which gets rendered
		* @return {string} fontFamily reference
		*/
		renderFont: function renderFont(family, files) {
		var properties = arguments.length <= 2 \|\| arguments[2] === undefined ? {} : arguments[2];

		if (!renderer.rendered.hasOwnProperty(family)) {
		(function () {
		var fontFace = {
		fontFamily: '\'' + family + '\'',
		src: files.map(function (src) {
		return 'url(\'' + src + '\') format(\'' + (0, _getFontFormat2.default)(src) + '\')';
		}).join(',')
		};

		var fontProperties = ['fontVariant', 'fontWeight', 'fontStretch', 'fontStyle', 'unicodeRange'];
		Object.keys(properties).filter(function (prop) {
		return fontProperties.indexOf(prop) > -1;
		}).forEach(function (fontProp) {
		return fontFace[fontProp] = properties[fontProp];
		});

		var css = '@font-face{' + (0, _cssifyObject2.default)(fontFace) + '}';
		renderer.rendered[family] = true;
		renderer.fontFaces += css;
		renderer._emitChange();
		})();
		}

		return family;
		},


		/**
		* renders static style and caches them
		*
		* @param {string\|Object} style - static style to be rendered
		* @param {string?} selector - selector used to render the styles
		* @return {string} rendered CSS output
		*/
		renderStatic: function renderStatic(style, selector) {
		var reference = typeof style === 'string' ? style : selector;

		if (!renderer.rendered.hasOwnProperty(reference)) {
		if (typeof style === 'string') {
		// remove new lines from template strings
		renderer.statics += style.replace(/\s{2,}/g, '');
		} else {
		renderer.statics += selector + '{' + (0, _cssifyObject2.default)(renderer._processStyle(style)) + '}';
		}

		renderer.rendered[reference] = true;
		renderer._emitChange();
		}
		},


		/**
		* renders all cached styles into a single valid CSS string
		* clusters media query styles into groups to reduce output size
		* @return single concatenated CSS string
		*/
		renderToString: function renderToString() {
		var css = renderer.fontFaces + renderer.statics + renderer.rules;

		for (var media in renderer.mediaRules) {
		css += '@media ' + media + '{' + renderer.mediaRules[media] + '}';
		}

		return css + renderer.keyframes;
		},


		/**
		* Adds a new subscription to get notified on every rerender
		*
		* @param {Function} callback - callback function which will be executed
		* @return {Object} equivalent unsubscribe method
		*/
		subscribe: function subscribe(callback) {
		renderer.listeners.push(callback);
		return {
		unsubscribe: function unsubscribe() {
		return renderer.listeners.splice(renderer.listeners.indexOf(callback), 1);
		}
		};
		},


		/**
		* calls each listener with the current CSS markup of all caches
		* gets only called if the markup actually changes
		*
		* @param {Function} callback - callback function which will be executed
		* @return {Object} equivalent unsubscribe method
		*/
		_emitChange: function _emitChange() {
		var css = renderer.renderToString();
		renderer.listeners.forEach(function (listener) {
		return listener(css);
		});
		},


		/**
		* generates an unique reference id by content hashing props
		*
		* @param {Object} props - props that get hashed
		* @return {string} reference - unique props reference
		*/
		_generatePropsReference: function _generatePropsReference(props) {
		return (0, _generateContentHash2.default)((0, _sortedStringify2.default)(props));
		},


		/**
		* pipes a style object through a list of plugins
		*
		* @param {Object} style - style object to process
		* @return {Object} processed style
		*/
		_processStyle: function _processStyle(style) {
		return renderer.plugins.reduce(function (processedStyle, plugin) {
		return plugin(processedStyle);
		}, style);
		},


		/**
		* iterates a style object and renders each rule to the cache
		*
		* @param {string} className - className reference to be rendered to
		* @param {Object} style - style object which is rendered
		* @param {Object`} base - base style subset for diffing
		*/
		_renderStyle: function _renderStyle(className, style) {
		var base = arguments.length <= 2 \|\| arguments[2] === undefined ? {} : arguments[2];
		var pseudo = arguments.length <= 3 \|\| arguments[3] === undefined ? '' : arguments[3];
		var media = arguments.length <= 4 \|\| arguments[4] === undefined ? '' : arguments[4];

		var ruleset = Object.keys(style).reduce(function (ruleset, property) {
		var value = style[property];
		// recursive object iteration in order to render
		// pseudo class and media class declarations
		if (value instanceof Object && !Array.isArray(value)) {
		if (property.charAt(0) === ':') {
		renderer._renderStyle(className, value, base[property], pseudo + property, media);
		} else if (property.substr(0, 6) === '@media') {
		// combine media query rules with an `and`
		var query = property.slice(6).trim();
		var combinedMedia = media.length > 0 ? media + ' and ' + query : query;
		renderer._renderStyle(className, value, base[property], pseudo, combinedMedia);
		}
		} else {
		// diff styles with the base styles to only extract dynamic styles
		if (value !== undefined && !base.hasOwnProperty(property) \|\| base[property] !== value) {
		// remove concatenated string values including `undefined`
		if (typeof value === 'string' && value.indexOf('undefined') > -1) {
		return ruleset;
		}
		ruleset[property] = value;
		}
		}
		return ruleset;
		}, {});

		// add styles to the cache
		if (Object.keys(ruleset).length > 0) {
		var css = '.' + className + pseudo + '{' + (0, _cssifyObject2.default)(ruleset) + '}';
		renderer._didChange = true;

		if (media.length > 0) {
		if (!renderer.mediaRules.hasOwnProperty(media)) {
		renderer.mediaRules[media] = '';
		}

		renderer.mediaRules[media] += css;
		} else {
		renderer.rules += css;
		}
		}
		}
		};

		// initial setup
		renderer.keyframePrefixes.push('');
		renderer.clear();

		return renderer;
		}
		module.exports = exports['default'];

21

lib/index.js

		@@ -11,6 +11,2 @@ 'use strict';

		var _applyMiddleware = require('./applyMiddleware');

		var _applyMiddleware2 = _interopRequireDefault(_applyMiddleware);

		var _combineRules = require('./combineRules');
		@@ -20,13 +16,18 @@

		var _enhance = require('./enhance');

		var _enhance2 = _interopRequireDefault(_enhance);

		var _render = require('./render');

		var _render2 = _interopRequireDefault(_render);

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

		if (process.env.NODE_ENV === 'production') {
		console.warn('You are using a minified version of Fela. If you want to get warnings please use an unminified version (process.env.NODE_ENV=development).'); // eslint-disable-line
		}

		exports.default = {
		createRenderer: _createRenderer2.default,
		applyMiddleware: _applyMiddleware2.default,
		combineRules: _combineRules2.default
		combineRules: _combineRules2.default,
		enhance: _enhance2.default,
		render: _render2.default
		};
		module.exports = exports['default'];

41

lib/plugins/customProperty.js

		@@ -6,29 +6,24 @@ "use strict";
		});
		function customProperty(style, properties) {
		Object.keys(style).forEach(function (property) {
		var value = style[property];
		if (properties[property]) {
		Object.assign(style, properties[property](value));
		delete style[property];
		}

		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; };
		if (value instanceof Object && !Array.isArray(value)) {
		style[property] = customProperty(value, properties);
		}
		});

		exports.default = customProperty;
		function customProperty(properties) {
		return function (pluginInterface) {
		var style = pluginInterface.style;
		var processStyle = pluginInterface.processStyle;
		return style;
		}

		exports.default = function (properties) {
		return function (style) {
		return customProperty(style, properties);
		};
		};

		Object.keys(style).forEach(function (property) {
		var value = style[property];
		if (properties[property]) {
		Object.assign(style, properties[property](value));
		delete style[property];
		}

		if (value instanceof Object && !Array.isArray(value)) {
		style[property] = processStyle(_extends({}, pluginInterface, {
		style: value
		}));
		}
		});

		return style;
		};
		}
		module.exports = exports['default'];

35

lib/plugins/fallbackValue.js

		@@ -7,6 +7,2 @@ 'use strict';

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

		exports.default = fallbackValue;

		var _hyphenateStyleName = require('hyphenate-style-name');
		@@ -18,22 +14,19 @@

		function fallbackValue() {
		return function (pluginInterface) {
		var style = pluginInterface.style;
		var processStyle = pluginInterface.processStyle;
		function fallbackValue(style) {
		Object.keys(style).forEach(function (property) {
		var value = style[property];
		if (Array.isArray(value)) {
		style[property] = value.join(';' + (0, _hyphenateStyleName2.default)(property) + ':');
		} else if (value instanceof Object) {
		style[property] = fallbackValue(value);
		}
		});

		return style;
		}

		Object.keys(style).forEach(function (property) {
		var value = style[property];
		if (Array.isArray(value)) {
		style[property] = value.join(';' + (0, _hyphenateStyleName2.default)(property) + ':');
		} else if (value instanceof Object) {
		style[property] = processStyle(_extends({}, pluginInterface, {
		style: value
		}));
		}
		});
		exports.default = function () {
		return fallbackValue;
		};

		return style;
		};
		}
		module.exports = exports['default'];

46

lib/plugins/friendlyPseudoClass.js

		@@ -6,33 +6,25 @@ 'use strict';
		});
		function friendlyPseudoClass(style) {
		Object.keys(style).forEach(function (property) {
		var value = style[property];
		if (value instanceof Object && !Array.isArray(value)) {
		var regex = new RegExp('^on([A-Z])');
		if (regex.test(property)) {
		var pseudo = property.replace(regex, function (match, p1) {
		return ':' + p1.toLowerCase();
		});

		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; };
		style[pseudo] = friendlyPseudoClass(value);
		delete style[property];
		}
		}
		});

		exports.default = friendlyPseudoClass;
		function friendlyPseudoClass() {
		return function (pluginInterface) {
		var style = pluginInterface.style;
		var processStyle = pluginInterface.processStyle;
		return style;
		}

		exports.default = function () {
		return friendlyPseudoClass;
		};

		Object.keys(style).forEach(function (property) {
		var value = style[property];
		if (value instanceof Object && !Array.isArray(value)) {
		var regex = new RegExp('^on([A-Z])');
		if (regex.test(property)) {
		var pseudo = property.replace(regex, function (match, p1) {
		return ':' + p1.toLowerCase();
		});

		style[pseudo] = processStyle(_extends({}, pluginInterface, {
		style: value
		}));

		delete style[property];
		}
		}
		});

		return style;
		};
		}
		module.exports = exports['default'];

19

lib/plugins/LVHA.js

		@@ -6,3 +6,2 @@ 'use strict';
		});
		exports.default = LVHA;
		var precedence = {
		@@ -27,13 +26,13 @@ ':link': 4,

		function LVHA() {
		return function (pluginInterface) {
		var style = pluginInterface.style;
		function LVHA(style) {
		return Object.keys(style).sort(sortPseudoClasses).reduce(function (out, pseudo) {
		out[pseudo] = style[pseudo];
		return out;
		}, {});
		}

		exports.default = function () {
		return LVHA;
		};

		return Object.keys(style).sort(sortPseudoClasses).reduce(function (out, pseudo) {
		out[pseudo] = style[pseudo];
		return out;
		}, {});
		};
		}
		module.exports = exports['default'];

9

lib/plugins/prefixer.js

		@@ -6,3 +6,2 @@ 'use strict';
		});
		exports.default = prefixer;

		@@ -15,8 +14,8 @@ var _inlineStylePrefixAll = require('inline-style-prefix-all');

		function prefixer() {
		return function (_ref) {
		var style = _ref.style;
		exports.default = function () {
		return function (style) {
		return (0, _inlineStylePrefixAll2.default)(style);
		};
		}
		};

		module.exports = exports['default'];

53

lib/plugins/unit.js

		@@ -7,8 +7,4 @@ 'use strict';

		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 _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };

		exports.default = unit;

		var _warning = require('fbjs/lib/warning');
		@@ -34,33 +30,32 @@

		function unit() {
		var unit = arguments.length <= 0 \|\| arguments[0] === undefined ? 'px' : arguments[0];
		function addUnit(style, unit) {
		Object.keys(style).forEach(function (property) {
		if (!(0, _unitlessCssProperty2.default)(property)) {

		process.env.NODE_ENV !== "production" ? (0, _warning2.default)(unit.match(/ch\|em\|ex\|rem\|vh\|vw\|vmin\|vmax\|px\|cm\|mm\|in\|pc\|pt\|mozmm\|%/) !== null, 'You are using an invalid unit `' + unit + '`. Consider using one of the following ch, em, ex, rem, vh, vw, vmin, vmax, px, cm, mm, in, pc, pt, mozmm or %.') : void 0;
		var value = style[property];
		if (Array.isArray(value)) {
		style[property] = value.map(function (value) {
		return addUnitIfNeeded(property, value, unit);
		});
		} else if (value instanceof Object) {
		style[property] = addUnit(value, unit);
		} else {
		style[property] = addUnitIfNeeded(property, value, unit);
		}
		}
		});

		return function (pluginInterface) {
		var style = pluginInterface.style;
		var processStyle = pluginInterface.processStyle;
		return style;
		}

		exports.default = function () {
		var unit = arguments.length <= 0 \|\| arguments[0] === undefined ? 'px' : arguments[0];

		Object.keys(style).forEach(function (property) {
		if (!(0, _unitlessCssProperty2.default)(property)) {
		process.env.NODE_ENV !== "production" ? (0, _warning2.default)(unit.match(/ch\|em\|ex\|rem\|vh\|vw\|vmin\|vmax\|px\|cm\|mm\|in\|pc\|pt\|mozmm\|%/) !== null, 'You are using an invalid unit `' + unit + '`. Consider using one of the following ch, em, ex, rem, vh, vw, vmin, vmax, px, cm, mm, in, pc, pt, mozmm or %.') : void 0;

		var value = style[property];
		if (Array.isArray(value)) {
		style[property] = value.map(function (value) {
		return addUnitIfNeeded(property, value, unit);
		});
		} else if (value instanceof Object) {
		style[property] = processStyle(_extends({}, pluginInterface, {
		style: value
		}));
		} else {
		style[property] = addUnitIfNeeded(property, value, unit);
		}
		}
		});
		return function (style) {
		return addUnit(style, unit);
		};
		};

		return style;
		};
		}
		module.exports = exports['default'];

14

lib/utils/cssifyObject.js

		@@ -8,5 +8,5 @@ 'use strict';

		var _camelToDashCase = require('./camelToDashCase');
		var _hyphenateStyleName = require('hyphenate-style-name');

		var _camelToDashCase2 = _interopRequireDefault(_camelToDashCase);
		var _hyphenateStyleName2 = _interopRequireDefault(_hyphenateStyleName);

		@@ -16,9 +16,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
		/**
		* generates a valid CSS string containing styles
		* generates a valid CSS string containing style
		*
		* @param {Object} styles - object containing CSS declarations
		* @param {Object} style - object containing CSS declarations
		* @returns {string} valid CSS string with dash cased properties
		*/
		function cssifyObject(styles) {
		return Object.keys(styles).reduce(function (css, prop) {
		function cssifyObject(style) {
		return Object.keys(style).reduce(function (css, prop) {
		// prevents the semicolon after
		@@ -29,3 +29,3 @@ // the last rule declaration
		}
		css += (0, _camelToDashCase2.default)(prop) + ':' + styles[prop];
		css += (0, _hyphenateStyleName2.default)(prop) + ':' + style[prop];
		return css;
		@@ -32,0 +32,0 @@ }, '');

7

lib/utils/sortedStringify.js

		@@ -15,13 +15,8 @@ 'use strict';
		function sortedStringify(obj) {
		if (obj === undefined) {
		return '';
		}

		return Object.keys(obj).sort().reduce(function (str, prop) {
		// only concatenate property and value
		// without any special characters
		str += prop + obj[prop];
		return str;
		return str + prop + obj[prop];
		}, '');
		}
		module.exports = exports['default'];

2

package.json

		{
		"name": "fela",
		"version": "1.0.0-beta.1",
		"version": "1.0.0-beta.2",
		"description": "Fast, tiny & dynamic low-level API to handle Styling in JavaScript",
		@@ -5,0 +5,0 @@ "main": "index.js",

dist/fela-server.js

dist/fela-server.js.map

dist/fela-server.min.js

lib/applyMiddleware.js

lib/components/dom/FontFace.js

lib/components/dom/Keyframe.js

lib/fela.js

lib/felaServer.js

lib/middleware/beautifier.js

lib/middleware/logger.js

lib/middleware/perf.js

lib/renderer/Renderer.js

lib/renderer/utils/cssifyKeyframe.js

lib/renderer/utils/cssifyObject.js

lib/renderer/utils/generateContentHash.js

lib/renderer/utils/getFontFormat.js

lib/renderer/utils/isMediaQuery.js

lib/renderer/utils/isPseudoClass.js

lib/renderer/utils/processStyle.js

lib/renderer/utils/sortedStringify.js

lib/renderer/utils/validateStyle.js

lib/renderers/dom/DOMRenderer.js

lib/renderers/dom/ServerRenderer.js

lib/renderers/dom/StyleSheet.js

lib/server/createRenderer.js

lib/server/index.js

lib/utils/camelToDashCase.js

lib/utils/isMediaQuery.js

lib/utils/isPseudo.js

server.js

dist/fela.js.map

Sorry, the diff of this file is not supported yet

fela - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics