fela - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/fela.js

@@ -76,2 +76,12 @@ (function (global, factory) {
 
+    /**
+     * generates an unique reference id by content hashing props
+     *
+     * @param {Object} props - props that get hashed
+     * @return {string} reference - unique props reference
+     */
+    var generatePropsReference = (function (props) {
+      return generateHash(sortedStringify(props));
+    });
+
     var formats = {
@@ -94,2 +104,48 @@ '.woff': 'woff',
 
+    /**
+     * pipes a style object through a list of plugins
+     *
+     * @param {Object} style - style object to process
+     * @param {Object} meta - additional meta data
+     * @param {Function[]} plugins - plugins used to process style
+     * @return {Object} processed style
+     */
+    function processStyle(style, meta, plugins) {
+      return plugins.reduce(function (processedStyle, plugin) {
+        return plugin(processedStyle, meta);
+      }, style);
+    }
+
+    /**
+     * diffs a style object against a base style object
+     *
+     * @param {Object} style - style object which is diffed
+     * @param {Object?} base - base style object
+     */
+    function diffStyle(style) {
+      var base = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+
+      return Object.keys(style).reduce(function (diff, 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)) {
+          var nestedDiff = diffStyle(value, base[property]);
+          if (Object.keys(nestedDiff).length > 0) {
+            diff[property] = nestedDiff;
+          }
+        } 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 diff;
+            }
+            diff[property] = value;
+          }
+        }
+        return diff;
+      }, {});
+    }
+
     var index$1 = __commonjs(function (module) {
@@ -198,3 +254,3 @@ 'use strict';
           var ruleId = renderer.ids.indexOf(rule);
-          var className = 'c' + ruleId + renderer._generatePropsReference(props);
+          var className = 'c' + ruleId + generatePropsReference(props);
 
@@ -204,15 +260,19 @@ // only if the cached rule has not already been rendered
           if (!renderer.rendered.hasOwnProperty(className)) {
-            var diffedStyle = renderer._diffStyle(rule(props), renderer.base[ruleId]);
+            var resolvedStyle = renderer._resolveStyle(rule, props);
 
+            // process style using each plugin
+            var style = processStyle(resolvedStyle, {
+              type: 'rule',
+              className: className,
+              id: ruleId,
+              props: props,
+              rule: rule
+            }, renderer.plugins);
+
+            // diff style objects with base styles
+            var diffedStyle = diffStyle(style, renderer.base[ruleId]);
+
             if (Object.keys(diffedStyle).length > 0) {
-              var style = renderer._processStyle(diffedStyle, {
-                type: 'rule',
-                className: className,
-                id: ruleId,
-                props: props,
-                rule: rule
-              });
+              renderer._renderStyle(className, diffedStyle);
 
-              renderer._renderStyle(className, style);
-
               renderer.rendered[className] = renderer._didChange;
@@ -230,3 +290,3 @@
             if (className === 'c' + ruleId) {
-              renderer.base[ruleId] = rule(props);
+              renderer.base[ruleId] = diffedStyle;
             }
@@ -261,3 +321,3 @@ }
 
-          var propsReference = renderer._generatePropsReference(props);
+          var propsReference = generatePropsReference(props);
           var animationName = 'k' + renderer.ids.indexOf(keyframe) + propsReference;
@@ -268,3 +328,3 @@
           if (!renderer.rendered.hasOwnProperty(animationName)) {
-            var processedKeyframe = renderer._processStyle(keyframe(props), {
+            var processedKeyframe = processStyle(renderer._resolveStyle(keyframe, props), {
               type: 'keyframe',
@@ -275,3 +335,4 @@ keyframe: keyframe,
               id: renderer.ids.indexOf(keyframe)
-            });
+            }, renderer.plugins);
+
             var css = cssifyKeyframe(processedKeyframe, animationName, renderer.keyframePrefixes);
@@ -296,3 +357,5 @@ renderer.rendered[animationName] = true;
 
-          if (!renderer.rendered.hasOwnProperty(family)) {
+          var key = family + generatePropsReference(properties);
+
+          if (!renderer.rendered.hasOwnProperty(key)) {
             (function () {
@@ -314,3 +377,3 @@ var fontFace = {
               var css = '@font-face{' + cssifyObject(fontFace) + '}';
-              renderer.rendered[family] = true;
+              renderer.rendered[key] = true;
               renderer.fontFaces += css;
@@ -340,6 +403,6 @@ renderer._emitChange();
             } else {
-              var processedStyle = renderer._processStyle(style, {
+              var processedStyle = processStyle(style, {
                 selector: selector,
                 type: 'static'
-              });
+              }, renderer.plugins);
               renderer.statics += selector + '{' + cssifyObject(processedStyle) + '}';
@@ -387,2 +450,14 @@ }
         /**
+         * Encapsulated style resolving method
+         *
+         * @param {Function} style - rule or keyframe to be resolved
+         * @param {Object} props - props used to resolve style
+         * @return {Object} resolved style
+         */
+        _resolveStyle: function _resolveStyle(style, props) {
+          return style(props);
+        },
+
+
+        /**
          * calls each listener with the current CSS markup of all caches
@@ -403,62 +478,2 @@ * gets only called if the markup actually changes
         /**
-         * 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 generateHash(sortedStringify(props));
-        },
-
-
-        /**
-         * pipes a style object through a list of plugins
-         *
-         * @param {Object} style - style object to process
-         * @param {Object} meta - additional meta data
-         * @return {Object} processed style
-         */
-        _processStyle: function _processStyle(style, meta) {
-          return renderer.plugins.reduce(function (processedStyle, plugin) {
-            return plugin(processedStyle, meta);
-          }, style);
-        },
-
-
-        /**
-         * diffs a style object against a base style object
-         *
-         * @param {Object} style - style object which is diffed
-         * @param {Object?} base - base style object
-         */
-        _diffStyle: function _diffStyle(style) {
-          var _this = this;
-
-          var base = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
-
-          return Object.keys(style).reduce(function (diff, 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)) {
-              var nestedDiff = _this._diffStyle(value, base[property]);
-              if (Object.keys(nestedDiff).length > 0) {
-                diff[property] = nestedDiff;
-              }
-            } 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 diff;
-                }
-                diff[property] = value;
-              }
-            }
-            return diff;
-          }, {});
-        },
-
-
-        /**
          * iterates a style object and renders each rule to the cache
@@ -478,3 +493,4 @@ *
             if (value instanceof Object && !Array.isArray(value)) {
-              if (property.charAt(0) === ':') {
+              // allow pseudo classes, attribute selectors and the child selector
+              if (property.charAt(0) === ':' || property.charAt(0) === '[' || property.charAt(0) === '>') {
                 renderer._renderStyle(className, value, pseudo + property, media);
@@ -481,0 +497,0 @@ } else if (property.substr(0, 6) === '@media') {

dist/fela.min.js

@@ -1,1 +0,1 @@
-!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(;n<i;++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 f(){var e=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],f={listeners:[],keyframePrefixes:e.keyframePrefixes||["-webkit-","-moz-"],plugins:e.plugins||[],clear:function(){f.fontFaces="",f.keyframes="",f.statics="",f.rules="",f.mediaRules={},f.rendered={},f.base={},f.ids=[],f._emitChange()},renderRule:function(e){var r=arguments.length<=1||void 0===arguments[1]?{}:arguments[1];f.ids.indexOf(e)<0&&(f.ids.push(e),Object.keys(r).length>0&&f.renderRule(e,{}));var n=f.ids.indexOf(e),t="c"+n+f._generatePropsReference(r);if(!f.rendered.hasOwnProperty(t)){var i=f._diffStyle(e(r),f.base[n]);if(Object.keys(i).length>0){var o=f._processStyle(i,{type:"rule",className:t,id:n,props:r,rule:e});f._renderStyle(t,o),f.rendered[t]=f._didChange,f._didChange&&(f._didChange=!1,f._emitChange())}else f.rendered[t]=!1;t==="c"+n&&(f.base[n]=e(r))}var u="c"+n;return f.rendered[t]?t!==u?u+" "+t:t:u},renderKeyframe:function(e){var r=arguments.length<=1||void 0===arguments[1]?{}:arguments[1];f.ids.indexOf(e)<0&&f.ids.push(e);var n=f._generatePropsReference(r),t="k"+f.ids.indexOf(e)+n;if(!f.rendered.hasOwnProperty(t)){var i=f._processStyle(e(r),{type:"keyframe",keyframe:e,props:r,animationName:t,id:f.ids.indexOf(e)}),u=o(i,t,f.keyframePrefixes);f.rendered[t]=!0,f.keyframes+=u,f._emitChange()}return t},renderFont:function(e,r){var n=arguments.length<=2||void 0===arguments[2]?{}:arguments[2];return f.rendered.hasOwnProperty(e)||!function(){var o={fontFamily:"'"+e+"'",src:r.map(function(e){return"url('"+e+"') format('"+t(e)+"')"}).join(",")},u=["fontVariant","fontWeight","fontStretch","fontStyle","unicodeRange"];Object.keys(n).filter(function(e){return u.indexOf(e)>-1}).forEach(function(e){return o[e]=n[e]});var s="@font-face{"+i(o)+"}";f.rendered[e]=!0,f.fontFaces+=s,f._emitChange()}(),e},renderStatic:function(e,r){var t="string"==typeof e?e:r+n(e);if(!f.rendered.hasOwnProperty(t)){if("string"==typeof e)f.statics+=e.replace(/\s{2,}/g,"");else{var o=f._processStyle(e,{selector:r,type:"static"});f.statics+=r+"{"+i(o)+"}"}f.rendered[t]=!0,f._emitChange()}},renderToString:function(){var e=f.fontFaces+f.statics+f.rules;for(var r in f.mediaRules)e+="@media "+r+"{"+f.mediaRules[r]+"}";return e+f.keyframes},subscribe:function(e){return f.listeners.push(e),{unsubscribe:function(){return f.listeners.splice(f.listeners.indexOf(e),1)}}},_emitChange:function(){var e=f.renderToString();f.listeners.forEach(function(r){return r(e)})},_generatePropsReference:function(e){return r(n(e))},_processStyle:function(e,r){return f.plugins.reduce(function(e,n){return n(e,r)},e)},_diffStyle:function(e){var r=this,n=arguments.length<=1||void 0===arguments[1]?{}:arguments[1];return Object.keys(e).reduce(function(t,i){var o=e[i];if(o instanceof Object&&!Array.isArray(o)){var f=r._diffStyle(o,n[i]);Object.keys(f).length>0&&(t[i]=f)}else if(void 0!==o&&!n.hasOwnProperty(i)||n[i]!==o){if("string"==typeof o&&o.indexOf("undefined")>-1)return t;t[i]=o}return t},{})},_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=Object.keys(r).reduce(function(i,o){var u=r[o];if(u instanceof Object&&!Array.isArray(u)){if(":"===o.charAt(0))f._renderStyle(e,u,n+o,t);else if("@media"===o.substr(0,6)){var s=o.slice(6).trim(),a=t.length>0?t+" and "+s:s;f._renderStyle(e,u,n,a)}}else i[o]=u;return i},{});if(Object.keys(o).length>0){var u="."+e+n+"{"+i(o)+"}";f._didChange=!0,t.length>0?(f.mediaRules.hasOwnProperty(t)||(f.mediaRules[t]=""),f.mediaRules[t]+=u):f.rules+=u}}};return f.keyframePrefixes.push(""),f.clear(),e.enhancers&&e.enhancers.forEach(function(e){return f=e(f)}),f}function u(e){for(var r=arguments.length,n=Array(r>1?r-1:0),t=1;t<r;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]=u({},e[n],t):e[n]=t}return e},e)}function s(){for(var e=arguments.length,r=Array(e),n=0;n<e;n++)r[n]=arguments[n];return function(e){return r.reduce(function(r,n){return u(r,n(e))},{})}}function a(){for(var e=arguments.length,r=Array(e),n=0;n<e;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 c(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});var n=e.renderToString();r.textContent!==n&&(r.textContent=n)}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,v={createRenderer:f,combineRules:s,enhance:a,render:c};return v});
+!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(;n<i;++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(p).reduce(function(r,n){return e.indexOf(n)>-1&&(r=p[n]),r},void 0)}function i(e,r,n){return n.reduce(function(e,n){return n(e,r)},e)}function o(e){var r=arguments.length<=1||void 0===arguments[1]?{}:arguments[1];return Object.keys(e).reduce(function(n,t){var i=e[t];if(i instanceof Object&&!Array.isArray(i)){var u=o(i,r[t]);Object.keys(u).length>0&&(n[t]=u)}else if(void 0!==i&&!r.hasOwnProperty(t)||r[t]!==i){if("string"==typeof i&&i.indexOf("undefined")>-1)return n;n[t]=i}return n},{})}function u(e){return Object.keys(e).reduce(function(r,n){return r.length>0&&(r+=";"),r+=g(n)+":"+e[n]},"")}function f(e,r){var n=arguments.length<=2||void 0===arguments[2]?[""]:arguments[2],t=Object.keys(e).reduce(function(r,n){return r+n+"{"+u(e[n])+"}"},"");return n.reduce(function(e,n){return e+"@"+n+"keyframes "+r+"{"+t+"}"},"")}function a(){var e=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],r={listeners:[],keyframePrefixes:e.keyframePrefixes||["-webkit-","-moz-"],plugins:e.plugins||[],clear:function(){r.fontFaces="",r.keyframes="",r.statics="",r.rules="",r.mediaRules={},r.rendered={},r.base={},r.ids=[],r._emitChange()},renderRule:function(e){var n=arguments.length<=1||void 0===arguments[1]?{}:arguments[1];r.ids.indexOf(e)<0&&(r.ids.push(e),Object.keys(n).length>0&&r.renderRule(e,{}));var t=r.ids.indexOf(e),u="c"+t+h(n);if(!r.rendered.hasOwnProperty(u)){var f=r._resolveStyle(e,n),a=i(f,{type:"rule",className:u,id:t,props:n,rule:e},r.plugins),s=o(a,r.base[t]);Object.keys(s).length>0?(r._renderStyle(u,s),r.rendered[u]=r._didChange,r._didChange&&(r._didChange=!1,r._emitChange())):r.rendered[u]=!1,u==="c"+t&&(r.base[t]=s)}var c="c"+t;return r.rendered[u]?u!==c?c+" "+u:u:c},renderKeyframe:function(e){var n=arguments.length<=1||void 0===arguments[1]?{}:arguments[1];r.ids.indexOf(e)<0&&r.ids.push(e);var t=h(n),o="k"+r.ids.indexOf(e)+t;if(!r.rendered.hasOwnProperty(o)){var u=i(r._resolveStyle(e,n),{type:"keyframe",keyframe:e,props:n,animationName:o,id:r.ids.indexOf(e)},r.plugins),a=f(u,o,r.keyframePrefixes);r.rendered[o]=!0,r.keyframes+=a,r._emitChange()}return o},renderFont:function(e,n){var i=arguments.length<=2||void 0===arguments[2]?{}:arguments[2],o=e+h(i);return r.rendered.hasOwnProperty(o)||!function(){var f={fontFamily:"'"+e+"'",src:n.map(function(e){return"url('"+e+"') format('"+t(e)+"')"}).join(",")},a=["fontVariant","fontWeight","fontStretch","fontStyle","unicodeRange"];Object.keys(i).filter(function(e){return a.indexOf(e)>-1}).forEach(function(e){return f[e]=i[e]});var s="@font-face{"+u(f)+"}";r.rendered[o]=!0,r.fontFaces+=s,r._emitChange()}(),e},renderStatic:function(e,t){var o="string"==typeof e?e:t+n(e);if(!r.rendered.hasOwnProperty(o)){if("string"==typeof e)r.statics+=e.replace(/\s{2,}/g,"");else{var f=i(e,{selector:t,type:"static"},r.plugins);r.statics+=t+"{"+u(f)+"}"}r.rendered[o]=!0,r._emitChange()}},renderToString:function(){var e=r.fontFaces+r.statics+r.rules;for(var n in r.mediaRules)e+="@media "+n+"{"+r.mediaRules[n]+"}";return e+r.keyframes},subscribe:function(e){return r.listeners.push(e),{unsubscribe:function(){return r.listeners.splice(r.listeners.indexOf(e),1)}}},_resolveStyle:function(e,r){return e(r)},_emitChange:function(){var e=r.renderToString();r.listeners.forEach(function(r){return r(e)})},_renderStyle:function(e,n){var t=arguments.length<=2||void 0===arguments[2]?"":arguments[2],i=arguments.length<=3||void 0===arguments[3]?"":arguments[3],o=Object.keys(n).reduce(function(o,u){var f=n[u];if(f instanceof Object&&!Array.isArray(f)){if(":"===u.charAt(0)||"["===u.charAt(0)||">"===u.charAt(0))r._renderStyle(e,f,t+u,i);else if("@media"===u.substr(0,6)){var a=u.slice(6).trim(),s=i.length>0?i+" and "+a:a;r._renderStyle(e,f,t,s)}}else o[u]=f;return o},{});if(Object.keys(o).length>0){var f="."+e+t+"{"+u(o)+"}";r._didChange=!0,i.length>0?(r.mediaRules.hasOwnProperty(i)||(r.mediaRules[i]=""),r.mediaRules[i]+=f):r.rules+=f}}};return r.keyframePrefixes.push(""),r.clear(),e.enhancers&&e.enhancers.forEach(function(e){return r=e(r)}),r}function s(e){for(var r=arguments.length,n=Array(r>1?r-1:0),t=1;t<r;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]=s({},e[n],t):e[n]=t}return e},e)}function c(){for(var e=arguments.length,r=Array(e),n=0;n<e;n++)r[n]=arguments[n];return function(e){return r.reduce(function(r,n){return s(r,n(e))},{})}}function d(){for(var e=arguments.length,r=Array(e),n=0;n<e;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 l(e,r){if(!r||r.nodeType!==m)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});var n=e.renderToString();r.textContent!==n&&(r.textContent=n)}var y={};y.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},y.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 h=function(e){return r(n(e))},p={".woff":"woff",".eof":"eof",".ttf":"truetype",".svg":"svg"},v=e(function(e){function r(e){return e.replace(n,"-$&").toLowerCase().replace(t,"-ms-")}var n=/[A-Z]/g,t=/^ms-/;e.exports=r}),g=v&&"object"==typeof v&&"default"in v?v.default:v,m=1,b={createRenderer:a,combineRules:c,enhance:d,render:l};return b});

lib/createRenderer.js

@@ -8,5 +8,5 @@ 'use strict';
 
-var _generateContentHash = require('./utils/generateContentHash');
+var _generatePropsReference = require('./utils/generatePropsReference');
 
-var _generateContentHash2 = _interopRequireDefault(_generateContentHash);
+var _generatePropsReference2 = _interopRequireDefault(_generatePropsReference);
 
@@ -21,2 +21,10 @@ var _sortedStringify = require('./utils/sortedStringify');
 
+var _processStyle = require('./utils/processStyle');
+
+var _processStyle2 = _interopRequireDefault(_processStyle);
+
+var _diffStyle = require('./utils/diffStyle');
+
+var _diffStyle2 = _interopRequireDefault(_diffStyle);
+
 var _cssifyKeyframe = require('./utils/cssifyKeyframe');
@@ -82,3 +90,3 @@
       var ruleId = renderer.ids.indexOf(rule);
-      var className = 'c' + ruleId + renderer._generatePropsReference(props);
+      var className = 'c' + ruleId + (0, _generatePropsReference2.default)(props);
 
@@ -88,15 +96,19 @@ // only if the cached rule has not already been rendered
       if (!renderer.rendered.hasOwnProperty(className)) {
-        var diffedStyle = renderer._diffStyle(rule(props), renderer.base[ruleId]);
+        var resolvedStyle = renderer._resolveStyle(rule, props);
 
+        // process style using each plugin
+        var style = (0, _processStyle2.default)(resolvedStyle, {
+          type: 'rule',
+          className: className,
+          id: ruleId,
+          props: props,
+          rule: rule
+        }, renderer.plugins);
+
+        // diff style objects with base styles
+        var diffedStyle = (0, _diffStyle2.default)(style, renderer.base[ruleId]);
+
         if (Object.keys(diffedStyle).length > 0) {
-          var style = renderer._processStyle(diffedStyle, {
-            type: 'rule',
-            className: className,
-            id: ruleId,
-            props: props,
-            rule: rule
-          });
+          renderer._renderStyle(className, diffedStyle);
 
-          renderer._renderStyle(className, style);
-
           renderer.rendered[className] = renderer._didChange;
@@ -114,3 +126,3 @@
         if (className === 'c' + ruleId) {
-          renderer.base[ruleId] = rule(props);
+          renderer.base[ruleId] = diffedStyle;
         }
@@ -145,3 +157,3 @@ }
 
-      var propsReference = renderer._generatePropsReference(props);
+      var propsReference = (0, _generatePropsReference2.default)(props);
       var animationName = 'k' + renderer.ids.indexOf(keyframe) + propsReference;
@@ -152,3 +164,3 @@
       if (!renderer.rendered.hasOwnProperty(animationName)) {
-        var processedKeyframe = renderer._processStyle(keyframe(props), {
+        var processedKeyframe = (0, _processStyle2.default)(renderer._resolveStyle(keyframe, props), {
           type: 'keyframe',
@@ -159,3 +171,4 @@ keyframe: keyframe,
           id: renderer.ids.indexOf(keyframe)
-        });
+        }, renderer.plugins);
+
         var css = (0, _cssifyKeyframe2.default)(processedKeyframe, animationName, renderer.keyframePrefixes);
@@ -180,3 +193,5 @@ renderer.rendered[animationName] = true;
 
-      if (!renderer.rendered.hasOwnProperty(family)) {
+      var key = family + (0, _generatePropsReference2.default)(properties);
+
+      if (!renderer.rendered.hasOwnProperty(key)) {
         (function () {
@@ -198,3 +213,3 @@ var fontFace = {
           var css = '@font-face{' + (0, _cssifyObject2.default)(fontFace) + '}';
-          renderer.rendered[family] = true;
+          renderer.rendered[key] = true;
           renderer.fontFaces += css;
@@ -224,6 +239,6 @@ renderer._emitChange();
         } else {
-          var processedStyle = renderer._processStyle(style, {
+          var processedStyle = (0, _processStyle2.default)(style, {
             selector: selector,
             type: 'static'
-          });
+          }, renderer.plugins);
           renderer.statics += selector + '{' + (0, _cssifyObject2.default)(processedStyle) + '}';
@@ -271,2 +286,14 @@ }
     /**
+     * Encapsulated style resolving method
+     *
+     * @param {Function} style - rule or keyframe to be resolved
+     * @param {Object} props - props used to resolve style
+     * @return {Object} resolved style
+     */
+    _resolveStyle: function _resolveStyle(style, props) {
+      return style(props);
+    },
+
+
+    /**
      * calls each listener with the current CSS markup of all caches
@@ -287,62 +314,2 @@ * gets only called if the markup actually changes
     /**
-     * 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
-     * @param {Object} meta - additional meta data
-     * @return {Object} processed style
-     */
-    _processStyle: function _processStyle(style, meta) {
-      return renderer.plugins.reduce(function (processedStyle, plugin) {
-        return plugin(processedStyle, meta);
-      }, style);
-    },
-
-
-    /**
-     * diffs a style object against a base style object
-     *
-     * @param {Object} style - style object which is diffed
-     * @param {Object?} base - base style object
-     */
-    _diffStyle: function _diffStyle(style) {
-      var _this = this;
-
-      var base = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
-
-      return Object.keys(style).reduce(function (diff, 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)) {
-          var nestedDiff = _this._diffStyle(value, base[property]);
-          if (Object.keys(nestedDiff).length > 0) {
-            diff[property] = nestedDiff;
-          }
-        } 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 diff;
-            }
-            diff[property] = value;
-          }
-        }
-        return diff;
-      }, {});
-    },
-
-
-    /**
      * iterates a style object and renders each rule to the cache
@@ -362,3 +329,4 @@ *
         if (value instanceof Object && !Array.isArray(value)) {
-          if (property.charAt(0) === ':') {
+          // allow pseudo classes, attribute selectors and the child selector
+          if (property.charAt(0) === ':' || property.charAt(0) === '[' || property.charAt(0) === '>') {
             renderer._renderStyle(className, value, pseudo + property, media);
@@ -365,0 +333,0 @@ } else if (property.substr(0, 6) === '@media') {

lib/plugins/friendlyPseudoClass.js

@@ -6,2 +6,4 @@ 'use strict';
 });
+var regex = new RegExp('^on([A-Z])');
+
 function friendlyPseudoClass(style) {
@@ -11,3 +13,4 @@ Object.keys(style).forEach(function (property) {
     if (value instanceof Object && !Array.isArray(value)) {
-      var regex = new RegExp('^on([A-Z])');
+      var resolvedValue = friendlyPseudoClass(value);
+
       if (regex.test(property)) {
@@ -18,4 +21,6 @@ var pseudo = property.replace(regex, function (match, p1) {
 
-        style[pseudo] = friendlyPseudoClass(value);
+        style[pseudo] = resolvedValue;
         delete style[property];
+      } else {
+        style[property] = resolvedValue;
       }
@@ -22,0 +27,0 @@ }

lib/plugins/validator.js

@@ -13,3 +13,3 @@ 'use strict';
     if (value instanceof Object && !Array.isArray(value)) {
-      if (property.indexOf(':') === 0 || property.substr(0, 6) === '@media') {
+      if (/^(@media|:|\[|>)/.test(property)) {
         validateStyleObject(value, logInvalid, deleteInvalid);
@@ -16,0 +16,0 @@ } else {

package.json

 {
   "name": "fela",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Fast & Dynamic Styling in JavaScript",
   "main": "index.js",
+  "typings": "index.d.ts",
   "files": [
@@ -7,0 +8,0 @@ "LICENSE",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

102773

increased by9.08%

Number of package files

39

increased by21.88%

Lines of code

1633

increased by13.8%

No dependency changes