fela - npm Package Compare versions

Comparing version 3.0.6 to 3.0.7

dist/fela.js

@@ -310,4 +310,2 @@ (function (global, factory) {
 
-          var _selectorPrefix = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-
           // rendering a rule for the first time
@@ -321,3 +319,3 @@ // will create an ID reference
             if (Object.keys(props).length > 0) {
-              renderer.renderRule(rule, {}, _selectorPrefix);
+              renderer.renderRule(rule, {});
             }
@@ -329,5 +327,19 @@ }
 
-          var classNamePrefix = renderer.prettySelectors && rule.name ? rule.name + '_' : 'c';
-          var className = _selectorPrefix + classNamePrefix + ruleId + generatePropsReference(props);
+          var classNamePrefix = 'c';
+          var propsReference = generatePropsReference(props);
 
+          // extend the className with prefixes in development
+          // this enables better debugging and className readability
+          if (true) {
+            classNamePrefix = (renderer._selectorPrefix ? renderer._selectorPrefix + '__' : '') + (renderer.prettySelectors && rule.name ? rule.name + '__' : '') + 'c';
+            // replace the cryptic hash reference with a concatenated and simplyfied version of the props object itself
+            if (renderer.prettySelectors && Object.keys(props).length > 0) {
+              propsReference += '__' + Object.keys(props).sort().map(function (prop) {
+                return prop + '-' + props[prop];
+              }).join('---').replace(/ /g, '_').match(/[-_a-zA-Z0-9]*/g).join('');
+            }
+          }
+
+          var className = classNamePrefix + ruleId + propsReference;
+
           // only if the cached rule has not already been rendered
@@ -334,0 +346,0 @@ // with a specific set of properties it actually renders

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,t=0,n=void 0,o=e.length;if(0===o)return"";for(;t<o;++t)n=e.charCodeAt(t),r=(r<<5)-r+n,r|=0;return"-"+r.toString(36)}function t(e){return Object.keys(e).sort().reduce(function(r,t){return r+t+e[t]},"")}function n(e){return Object.keys(m).reduce(function(r,t){return e.indexOf(t)>-1&&(r=m[t]),r},void 0)}function o(e,r,t){return t.reduce(function(e,t){return t(e,r)},e)}function i(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return Object.keys(e).reduce(function(t,n){var o=e[n];if(o instanceof Object&&!Array.isArray(o)){var a=i(o,r[n]);Object.keys(a).length>0&&(t[n]=a)}else if(void 0!==o&&!r.hasOwnProperty(n)||r[n]!==o){if("string"==typeof o&&o.indexOf("undefined")>-1)return t;t[n]=o}return t},{})}function a(e){return Object.keys(e).reduce(function(r,t){return r.length>0&&(r+=";"),r+=b(t)+":"+e[t]},"")}function u(e,r){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[""],n=Object.keys(e).reduce(function(r,t){return r+t+"{"+a(e[t])+"}"},"");return t.reduce(function(e,t){return e+"@"+t+"keyframes "+r+"{"+n+"}"},"")}function c(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r={listeners:[],keyframePrefixes:e.keyframePrefixes||["-webkit-","-moz-"],plugins:e.plugins||[],prettySelectors:e.prettySelectors&&!1,clear:function(){r.fontFaces="",r.keyframes="",r.statics="",r.rules="",r.mediaRules={},r.rendered={},r.base={},r.ids=[],r.callStack=[],r._emitChange({type:"clear"})},renderRule:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";r.ids.indexOf(e)<0&&(r.ids.push(e),Object.keys(t).length>0&&r.renderRule(e,{},n));var a=r.ids.indexOf(e),u=r.prettySelectors&&e.name?e.name+"_":"c",c=n+u+a+h(t);if(!r.rendered.hasOwnProperty(c)){var s=o(e(t),{type:"rule",className:c,id:a,props:t,rule:e},r.plugins),f=i(s,r.base[a]);r.rendered[c]=!1,Object.keys(f).length>0&&r._renderStyle(c,f),c===u+a&&(r.base[a]=f)}var l=u+a;return r.rendered[c]?(r.callStack.push(r.renderRule.bind(r,e,t)),c!==l?(r.rendered[l]?l+" ":"")+c:c):r.rendered[l]?l:""},renderKeyframe:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};r.ids.indexOf(e)<0&&r.ids.push(e);var n=h(t),i=r.prettySelectors&&e.name?e.name+"_":"k",a=i+r.ids.indexOf(e)+n;if(!r.rendered.hasOwnProperty(a)){var c=o(e(t),{type:"keyframe",keyframe:e,props:t,animationName:a,id:r.ids.indexOf(e)},r.plugins),s=u(c,a,r.keyframePrefixes);r.rendered[a]=!0,r.keyframes+=s,r.callStack.push(r.renderKeyframe.bind(r,e,t)),r._emitChange({name:a,style:c,css:s,type:"keyframe"})}return a},renderFont:function(e,t){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=e+h(o);return r.rendered.hasOwnProperty(i)||!function(){var u={fontFamily:"'"+e+"'",src:t.map(function(e){return"url('"+e+"') format('"+n(e)+"')"}).join(",")},c=["fontVariant","fontWeight","fontStretch","fontStyle","unicodeRange"];Object.keys(o).filter(function(e){return c.indexOf(e)>-1}).forEach(function(e){return u[e]=o[e]});var s="@font-face{"+a(u)+"}";r.rendered[i]=!0,r.fontFaces+=s,r.callStack.push(r.renderFont.bind(r,e,t,o)),r._emitChange({fontFamily:e,fontFace:u,css:s,type:"font"})}(),e},renderStatic:function(e,n){var i="string"==typeof e?e:n+t(e);if(!r.rendered.hasOwnProperty(i)){if("string"==typeof e){var u=e.replace(/\s{2,}/g,"");r.statics+=u,r._emitChange({selector:n,type:"static",css:u})}else{var c=o(e,{selector:n,type:"static"},r.plugins),s=a(c);r.statics+=n+"{"+s+"}",r.callStack.push(r.renderStatic.bind(r,e,n)),r._emitChange({selector:n,style:c,css:s,type:"rule"})}r.rendered[i]=!0}},renderToString:function(){var e=r.fontFaces+r.statics+r.rules;for(var t in r.mediaRules)e+="@media "+t+"{"+r.mediaRules[t]+"}";return e+r.keyframes},subscribe:function(e){return r.listeners.push(e),{unsubscribe:function(){return r.listeners.splice(r.listeners.indexOf(e),1)}}},rehydrate:function(){var e=r.callStack.slice(0);r.clear(),r._emitChange({type:"rehydrate",done:!1}),e.forEach(function(e){return e()}),r._emitChange({type:"rehydrate",done:!0})},_emitChange:function(e){r.listeners.forEach(function(t){return t(e,r)})},_renderStyle:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"",i=Object.keys(t).reduce(function(i,a){var u=t[a];if(u instanceof Object&&!Array.isArray(u)){if(null!==a.match(/^(:|\[|>)/))r._renderStyle(e,u,n+a,o);else if("@media"===a.substr(0,6)){var c=a.slice(6).trim(),s=o.length>0?o+" and "+c:c;r._renderStyle(e,u,n,s)}}else i[a]=u;return i},{});if(Object.keys(i).length>0){r.rendered[e]=!0;var u=a(i),c="."+e+n,s=c+"{"+u+"}";o.length>0?(r.mediaRules.hasOwnProperty(o)||(r.mediaRules[o]=""),r.mediaRules[o]+=s):r.rules+=s,r._emitChange({selector:c,style:i,css:u,media:o,type:"rule"})}}};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,t=Array(r>1?r-1:0),n=1;n<r;n++)t[n-1]=arguments[n];return t.reduce(function(e,r){for(var t in r){var n=r[t];e[t]instanceof Object&&n instanceof Object?e[t]=s({},e[t],n):e[t]=n}return e},e)}function f(){for(var e=arguments.length,r=Array(e),t=0;t<e;t++)r[t]=arguments[t];return function(e){return r.reduce(function(r,t){return s(r,t(e))},{})}}function l(){for(var e=arguments.length,r=Array(e),t=0;t<e;t++)r[t]=arguments[t];return function(e){return function(){return r.reduce(function(e,r){return r(e)},e.apply(void 0,arguments))}}}function d(e,r){var t=0,n=!1,o={updateNode:function(){var o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if("hydrate"===o.type&&(n=!o.done),!n)if("rule"===o.type){var i=o.selector,a=o.css,u=o.media,c=i+"{"+a+"}",s=r.sheet,f=s.cssRules.length;u&&u.length>0?(s.insertRule("@media "+u+"{"+c+"}",f-t),t+=1):s.insertRule(c,0)}else r.textContent=e.renderToString(),t=0}};return o}function y(e,r){if(!r||1!==r.nodeType)throw new Error("You need to specify a valid element node (nodeType = 1) to render into.");r.setAttribute("data-fela-stylesheet","");var t=d(e,r);e.subscribe(t.updateNode);var n=e.renderToString();r.textContent!==n&&(r.textContent=n)}var p={};p.typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},p.classCallCheck=function(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")},p.createClass=function(){function e(e,r){for(var t=0;t<r.length;t++){var n=r[t];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(r,t,n){return t&&e(r.prototype,t),n&&e(r,n),r}}(),p.extends=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},p.inherits=function(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function, not "+typeof r);e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r&&(Object.setPrototypeOf?Object.setPrototypeOf(e,r):e.__proto__=r)},p.objectWithoutProperties=function(e,r){var t={};for(var n in e)r.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t},p.possibleConstructorReturn=function(e,r){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!r||"object"!=typeof r&&"function"!=typeof r?e:r};var h=function(e){return r(t(e))},m={".woff":"woff",".eof":"eof",".ttf":"truetype",".svg":"svg"},v=e(function(e){function r(e){return e.replace(t,"-$&").toLowerCase().replace(n,"-ms-")}var t=/[A-Z]/g,n=/^ms-/;e.exports=r}),b=v&&"object"==typeof v&&"default"in v?v.default:v,g={createRenderer:c,combineRules:f,enhance:l,render:y};return g});
+!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,t=0,n=void 0,o=e.length;if(0===o)return"";for(;t<o;++t)n=e.charCodeAt(t),r=(r<<5)-r+n,r|=0;return"-"+r.toString(36)}function t(e){return Object.keys(e).sort().reduce(function(r,t){return r+t+e[t]},"")}function n(e){return Object.keys(m).reduce(function(r,t){return e.indexOf(t)>-1&&(r=m[t]),r},void 0)}function o(e,r,t){return t.reduce(function(e,t){return t(e,r)},e)}function i(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return Object.keys(e).reduce(function(t,n){var o=e[n];if(o instanceof Object&&!Array.isArray(o)){var a=i(o,r[n]);Object.keys(a).length>0&&(t[n]=a)}else if(void 0!==o&&!r.hasOwnProperty(n)||r[n]!==o){if("string"==typeof o&&o.indexOf("undefined")>-1)return t;t[n]=o}return t},{})}function a(e){return Object.keys(e).reduce(function(r,t){return r.length>0&&(r+=";"),r+=b(t)+":"+e[t]},"")}function u(e,r){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[""],n=Object.keys(e).reduce(function(r,t){return r+t+"{"+a(e[t])+"}"},"");return t.reduce(function(e,t){return e+"@"+t+"keyframes "+r+"{"+n+"}"},"")}function c(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r={listeners:[],keyframePrefixes:e.keyframePrefixes||["-webkit-","-moz-"],plugins:e.plugins||[],prettySelectors:e.prettySelectors&&!1,clear:function(){r.fontFaces="",r.keyframes="",r.statics="",r.rules="",r.mediaRules={},r.rendered={},r.base={},r.ids=[],r.callStack=[],r._emitChange({type:"clear"})},renderRule:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};r.ids.indexOf(e)<0&&(r.ids.push(e),Object.keys(t).length>0&&r.renderRule(e,{}));var n=r.ids.indexOf(e),a="c",u=h(t),c=a+n+u;if(!r.rendered.hasOwnProperty(c)){var s=o(e(t),{type:"rule",className:c,id:n,props:t,rule:e},r.plugins),f=i(s,r.base[n]);r.rendered[c]=!1,Object.keys(f).length>0&&r._renderStyle(c,f),c===a+n&&(r.base[n]=f)}var l=a+n;return r.rendered[c]?(r.callStack.push(r.renderRule.bind(r,e,t)),c!==l?(r.rendered[l]?l+" ":"")+c:c):r.rendered[l]?l:""},renderKeyframe:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};r.ids.indexOf(e)<0&&r.ids.push(e);var n=h(t),i=r.prettySelectors&&e.name?e.name+"_":"k",a=i+r.ids.indexOf(e)+n;if(!r.rendered.hasOwnProperty(a)){var c=o(e(t),{type:"keyframe",keyframe:e,props:t,animationName:a,id:r.ids.indexOf(e)},r.plugins),s=u(c,a,r.keyframePrefixes);r.rendered[a]=!0,r.keyframes+=s,r.callStack.push(r.renderKeyframe.bind(r,e,t)),r._emitChange({name:a,style:c,css:s,type:"keyframe"})}return a},renderFont:function(e,t){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=e+h(o);return r.rendered.hasOwnProperty(i)||!function(){var u={fontFamily:"'"+e+"'",src:t.map(function(e){return"url('"+e+"') format('"+n(e)+"')"}).join(",")},c=["fontVariant","fontWeight","fontStretch","fontStyle","unicodeRange"];Object.keys(o).filter(function(e){return c.indexOf(e)>-1}).forEach(function(e){return u[e]=o[e]});var s="@font-face{"+a(u)+"}";r.rendered[i]=!0,r.fontFaces+=s,r.callStack.push(r.renderFont.bind(r,e,t,o)),r._emitChange({fontFamily:e,fontFace:u,css:s,type:"font"})}(),e},renderStatic:function(e,n){var i="string"==typeof e?e:n+t(e);if(!r.rendered.hasOwnProperty(i)){if("string"==typeof e){var u=e.replace(/\s{2,}/g,"");r.statics+=u,r._emitChange({selector:n,type:"static",css:u})}else{var c=o(e,{selector:n,type:"static"},r.plugins),s=a(c);r.statics+=n+"{"+s+"}",r.callStack.push(r.renderStatic.bind(r,e,n)),r._emitChange({selector:n,style:c,css:s,type:"rule"})}r.rendered[i]=!0}},renderToString:function(){var e=r.fontFaces+r.statics+r.rules;for(var t in r.mediaRules)e+="@media "+t+"{"+r.mediaRules[t]+"}";return e+r.keyframes},subscribe:function(e){return r.listeners.push(e),{unsubscribe:function(){return r.listeners.splice(r.listeners.indexOf(e),1)}}},rehydrate:function(){var e=r.callStack.slice(0);r.clear(),r._emitChange({type:"rehydrate",done:!1}),e.forEach(function(e){return e()}),r._emitChange({type:"rehydrate",done:!0})},_emitChange:function(e){r.listeners.forEach(function(t){return t(e,r)})},_renderStyle:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"",i=Object.keys(t).reduce(function(i,a){var u=t[a];if(u instanceof Object&&!Array.isArray(u)){if(null!==a.match(/^(:|\[|>)/))r._renderStyle(e,u,n+a,o);else if("@media"===a.substr(0,6)){var c=a.slice(6).trim(),s=o.length>0?o+" and "+c:c;r._renderStyle(e,u,n,s)}}else i[a]=u;return i},{});if(Object.keys(i).length>0){r.rendered[e]=!0;var u=a(i),c="."+e+n,s=c+"{"+u+"}";o.length>0?(r.mediaRules.hasOwnProperty(o)||(r.mediaRules[o]=""),r.mediaRules[o]+=s):r.rules+=s,r._emitChange({selector:c,style:i,css:u,media:o,type:"rule"})}}};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,t=Array(r>1?r-1:0),n=1;n<r;n++)t[n-1]=arguments[n];return t.reduce(function(e,r){for(var t in r){var n=r[t];e[t]instanceof Object&&n instanceof Object?e[t]=s({},e[t],n):e[t]=n}return e},e)}function f(){for(var e=arguments.length,r=Array(e),t=0;t<e;t++)r[t]=arguments[t];return function(e){return r.reduce(function(r,t){return s(r,t(e))},{})}}function l(){for(var e=arguments.length,r=Array(e),t=0;t<e;t++)r[t]=arguments[t];return function(e){return function(){return r.reduce(function(e,r){return r(e)},e.apply(void 0,arguments))}}}function d(e,r){var t=0,n=!1,o={updateNode:function(){var o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if("hydrate"===o.type&&(n=!o.done),!n)if("rule"===o.type){var i=o.selector,a=o.css,u=o.media,c=i+"{"+a+"}",s=r.sheet,f=s.cssRules.length;u&&u.length>0?(s.insertRule("@media "+u+"{"+c+"}",f-t),t+=1):s.insertRule(c,0)}else r.textContent=e.renderToString(),t=0}};return o}function y(e,r){if(!r||1!==r.nodeType)throw new Error("You need to specify a valid element node (nodeType = 1) to render into.");r.setAttribute("data-fela-stylesheet","");var t=d(e,r);e.subscribe(t.updateNode);var n=e.renderToString();r.textContent!==n&&(r.textContent=n)}var p={};p.typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},p.classCallCheck=function(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")},p.createClass=function(){function e(e,r){for(var t=0;t<r.length;t++){var n=r[t];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(r,t,n){return t&&e(r.prototype,t),n&&e(r,n),r}}(),p.extends=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},p.inherits=function(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function, not "+typeof r);e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r&&(Object.setPrototypeOf?Object.setPrototypeOf(e,r):e.__proto__=r)},p.objectWithoutProperties=function(e,r){var t={};for(var n in e)r.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t},p.possibleConstructorReturn=function(e,r){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!r||"object"!=typeof r&&"function"!=typeof r?e:r};var h=function(e){return r(t(e))},m={".woff":"woff",".eof":"eof",".ttf":"truetype",".svg":"svg"},v=e(function(e){function r(e){return e.replace(t,"-$&").toLowerCase().replace(n,"-ms-")}var t=/[A-Z]/g,n=/^ms-/;e.exports=r}),b=v&&"object"==typeof v&&"default"in v?v.default:v,g={createRenderer:c,combineRules:f,enhance:l,render:y};return g});

lib/bindings/react/connect.js

@@ -43,19 +43,15 @@ 'use strict';
         value: function render() {
-          var renderer = this.context.renderer;
-
           // invoke the component name for better CSS debugging
-
           if (process.env.NODE_ENV !== 'production') {
-            (function () {
-              var displayName = Comp.displayName || Comp.name || 'ConnectedFelaComponent';
-              var oldRenderRule = renderer.renderRule.bind(renderer);
-              renderer.renderRule = function (rule, props) {
-                return oldRenderRule(rule, props, displayName);
-              };
-            })();
+            this.context.renderer._selectorPrefix = Comp.displayName || Comp.name || 'ConnectedFelaComponent';
           }
 
           // invoke props and renderer to render all styles
-          var styles = mapStylesToProps(this.props)(renderer);
+          var styles = mapStylesToProps(this.props)(this.context.renderer);
 
+          // remove the component name after rendering
+          if (process.env.NODE_ENV !== 'production') {
+            this.context.renderer._selectorPrefix = undefined;
+          }
+
           return _react2.default.createElement(Comp, _extends({}, this.props, { styles: styles }));
@@ -62,0 +58,0 @@ }

lib/bindings/react/createComponent.js

@@ -15,3 +15,2 @@ 'use strict';
   var passThroughProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var _displayName = arguments[3];
 
@@ -22,5 +21,4 @@ var component = function component(_ref, _ref2) {
     var style = _ref.style;
-    var id = _ref.id;
 
-    var felaProps = _objectWithoutProperties(_ref, ['children', 'className', 'style', 'id']);
+    var felaProps = _objectWithoutProperties(_ref, ['children', 'className', 'style']);
 
@@ -39,7 +37,6 @@ var renderer = _ref2.renderer;
 
-    componentProps.id = id;
     componentProps.style = style;
 
     var cls = className ? className + ' ' : '';
-    componentProps.className = cls + renderer.renderRule(rule, felaProps, _displayName);
+    componentProps.className = cls + renderer.renderRule(rule, felaProps);
 
@@ -50,4 +47,8 @@ return (0, _react.createElement)(type, componentProps, children);
   component.contextTypes = { renderer: _react.PropTypes.object };
+
+  // use the rule name as display name to better debug with react inspector ( see #99 )
+  component.displayName = rule.name && rule.name || 'FelaComponent';
+
   return component;
 }
 module.exports = exports['default'];

lib/createRenderer.js

@@ -86,4 +86,2 @@ 'use strict';
 
-      var _selectorPrefix = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-
       // rendering a rule for the first time
@@ -97,3 +95,3 @@ // will create an ID reference
         if (Object.keys(props).length > 0) {
-          renderer.renderRule(rule, {}, _selectorPrefix);
+          renderer.renderRule(rule, {});
         }
@@ -105,5 +103,19 @@ }
 
-      var classNamePrefix = renderer.prettySelectors && rule.name ? rule.name + '_' : 'c';
-      var className = _selectorPrefix + classNamePrefix + ruleId + (0, _generatePropsReference2.default)(props);
+      var classNamePrefix = 'c';
+      var propsReference = (0, _generatePropsReference2.default)(props);
 
+      // extend the className with prefixes in development
+      // this enables better debugging and className readability
+      if (process.env.NODE_ENV !== 'production') {
+        classNamePrefix = (renderer._selectorPrefix ? renderer._selectorPrefix + '__' : '') + (renderer.prettySelectors && rule.name ? rule.name + '__' : '') + 'c';
+        // replace the cryptic hash reference with a concatenated and simplyfied version of the props object itself
+        if (renderer.prettySelectors && Object.keys(props).length > 0) {
+          propsReference += '__' + Object.keys(props).sort().map(function (prop) {
+            return prop + '-' + props[prop];
+          }).join('---').replace(/ /g, '_').match(/[-_a-zA-Z0-9]*/g).join('');
+        }
+      }
+
+      var className = classNamePrefix + ruleId + propsReference;
+
       // only if the cached rule has not already been rendered
@@ -110,0 +122,0 @@ // with a specific set of properties it actually renders

lib/plugins/debugLayout.js

@@ -11,3 +11,3 @@ 'use strict';
   if (meta.type === 'rule') {
-    var ruleName = meta.rule.name;
+    var ruleName = meta.rule.name || 'foobar';
     var color = (ruleName + ruleName).length * 17 * ruleName.length;
@@ -14,0 +14,0 @@

package.json

 {
   "name": "fela",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "description": "Fast & Dynamic Styling in JavaScript",
@@ -5,0 +5,0 @@ "main": "index.js",

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

142794

increased by1.61%

Lines of code

2196

increased by0.83%

Worsened metrics

Number of low supply chain risk alerts

8

increased by33.33%

No dependency changes