fela - npm Package Compare versions

Comparing version 3.0.0 to 3.0.1

dist/fela.js

@@ -217,2 +217,6 @@ (function (global, factory) {
 
+        // try and use readable selectors when
+        // prettySelectors is on and not in a prod environment
+        prettySelectors: config.prettySelectors && true,
+
         /**
@@ -261,4 +265,6 @@ * clears the sheet's cache but keeps all listeners
           var ruleId = renderer.ids.indexOf(rule);
-          var className = 'c' + ruleId + generatePropsReference(props);
 
+          var classNamePrefix = renderer.prettySelectors && rule.name ? rule.name + '_' : 'c';
+          var className = classNamePrefix + ruleId + generatePropsReference(props);
+
           // only if the cached rule has not already been rendered
@@ -286,3 +292,3 @@ // with a specific set of properties it actually renders
             // keep static style to diff dynamic onces later on
-            if (className === 'c' + ruleId) {
+            if (className === classNamePrefix + ruleId) {
               renderer.base[ruleId] = diffedStyle;
@@ -292,3 +298,3 @@ }
 
-          var baseClassName = 'c' + ruleId;
+          var baseClassName = classNamePrefix + ruleId;
           if (!renderer.rendered[className]) {
@@ -322,3 +328,4 @@ return baseClassName;
           var propsReference = generatePropsReference(props);
-          var animationName = 'k' + renderer.ids.indexOf(keyframe) + propsReference;
+          var prefix = renderer.prettySelectors && keyframe.name ? keyframe.name + '_' : 'k';
+          var animationName = prefix + renderer.ids.indexOf(keyframe) + propsReference;
 
@@ -325,0 +332,0 @@ // only if the cached keyframe has not already been rendered

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(m).reduce(function(r,n){return e.indexOf(n)>-1&&(r=m[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 a(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 c(){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.callStack=[],r._emitFullReload()},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 a=i(e(n),{type:"rule",className:u,id:t,props:n,rule:e},r.plugins),c=o(a,r.base[t]);r.rendered[u]=!1,Object.keys(c).length>0&&r._renderStyle(u,c),u==="c"+t&&(r.base[t]=c)}var s="c"+t;return r.rendered[u]?(r.callStack.push(r.renderRule.bind(r,e,n)),u!==s?s+" "+u:u):s},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(e(n),{type:"keyframe",keyframe:e,props:n,animationName:o,id:r.ids.indexOf(e)},r.plugins),c=a(u,o,r.keyframePrefixes);r.rendered[o]=!0,r.keyframes+=c,r.callStack.push(r.renderKeyframe.bind(r,e,n)),r._emitFullReload()}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 a={fontFamily:"'"+e+"'",src:n.map(function(e){return"url('"+e+"') format('"+t(e)+"')"}).join(",")},c=["fontVariant","fontWeight","fontStretch","fontStyle","unicodeRange"];Object.keys(i).filter(function(e){return c.indexOf(e)>-1}).forEach(function(e){return a[e]=i[e]});var s="@font-face{"+u(a)+"}";r.rendered[o]=!0,r.fontFaces+=s,r.callStack.push(r.renderFont.bind(r,e,n,i)),r._emitFullReload()}(),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,""),r._emitFullReload();else{var a=i(e,{selector:t,type:"static"},r.plugins),c=u(a);r.statics+=t+"{"+c+"}",r.callStack.push(r.renderStatic.bind(r,e,t)),r._emitChange({selector:t,style:c,type:"rule"})}r.rendered[o]=!0}},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)}}},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}),r._emitFullReload()},_emitChange:function(e){r.listeners.forEach(function(n){return n(e,r)})},_emitFullReload:function(){r._emitChange({css:r.renderToString(),type:"static"})},_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 a=n[u];if(a instanceof Object&&!Array.isArray(a)){if(null!==u.match(/^(:|\[|>)/))r._renderStyle(e,a,t+u,i);else if("@media"===u.substr(0,6)){var c=u.slice(6).trim(),s=i.length>0?i+" and "+c:c;r._renderStyle(e,a,t,s)}}else o[u]=a;return o},{});if(Object.keys(o).length>0){r.rendered[e]=!0;var a=u(o),c="."+e+t,s=c+"{"+a+"}";i.length>0?(r.mediaRules.hasOwnProperty(i)||(r.mediaRules[i]=""),r.mediaRules[i]+=s):r.rules+=s,r._emitChange({selector:c,style:a,media:i,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,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 f(){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){var n=0,t=!1,i={updateNode:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if("hydrate"===e.type)return t=!e.done,!0;if(!t)switch(e.type){case"rule":var i=e.selector,o=e.style,u=e.media,a=i+"{"+o+"}",c=r.sheet,s=c.cssRules.length;u&&u.length>0?(c.insertRule("@media "+u+"{"+a+"}",s-n),n+=1):c.insertRule(a,0);break;case"static":r.textContent=e.css,n=0}}};return i}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 n=l(e,r);e.subscribe(n.updateNode);var t=e.renderToString();r.textContent!==t&&(r.textContent=t)}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.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))},m={".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,b={createRenderer:c,combineRules:f,enhance:d,render:y};return b});
+!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,i=e.length;if(0===i)return"";for(;t<i;++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 i(e,r,t){return t.reduce(function(e,t){return t(e,r)},e)}function o(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return Object.keys(e).reduce(function(t,n){var i=e[n];if(i instanceof Object&&!Array.isArray(i)){var u=o(i,r[n]);Object.keys(u).length>0&&(t[n]=u)}else if(void 0!==i&&!r.hasOwnProperty(n)||r[n]!==i){if("string"==typeof i&&i.indexOf("undefined")>-1)return t;t[n]=i}return t},{})}function u(e){return Object.keys(e).reduce(function(r,t){return r.length>0&&(r+=";"),r+=g(t)+":"+e[t]},"")}function a(e,r){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[""],n=Object.keys(e).reduce(function(r,t){return r+t+"{"+u(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._emitFullReload()},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),u=r.prettySelectors&&e.name?e.name+"_":"c",a=u+n+h(t);if(!r.rendered.hasOwnProperty(a)){var c=i(e(t),{type:"rule",className:a,id:n,props:t,rule:e},r.plugins),s=o(c,r.base[n]);r.rendered[a]=!1,Object.keys(s).length>0&&r._renderStyle(a,s),a===u+n&&(r.base[n]=s)}var f=u+n;return r.rendered[a]?(r.callStack.push(r.renderRule.bind(r,e,t)),a!==f?f+" "+a:a):f},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),o=r.prettySelectors&&e.name?e.name+"_":"k",u=o+r.ids.indexOf(e)+n;if(!r.rendered.hasOwnProperty(u)){var c=i(e(t),{type:"keyframe",keyframe:e,props:t,animationName:u,id:r.ids.indexOf(e)},r.plugins),s=a(c,u,r.keyframePrefixes);r.rendered[u]=!0,r.keyframes+=s,r.callStack.push(r.renderKeyframe.bind(r,e,t)),r._emitFullReload()}return u},renderFont:function(e,t){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=e+h(i);return r.rendered.hasOwnProperty(o)||!function(){var a={fontFamily:"'"+e+"'",src:t.map(function(e){return"url('"+e+"') format('"+n(e)+"')"}).join(",")},c=["fontVariant","fontWeight","fontStretch","fontStyle","unicodeRange"];Object.keys(i).filter(function(e){return c.indexOf(e)>-1}).forEach(function(e){return a[e]=i[e]});var s="@font-face{"+u(a)+"}";r.rendered[o]=!0,r.fontFaces+=s,r.callStack.push(r.renderFont.bind(r,e,t,i)),r._emitFullReload()}(),e},renderStatic:function(e,n){var o="string"==typeof e?e:n+t(e);if(!r.rendered.hasOwnProperty(o)){if("string"==typeof e)r.statics+=e.replace(/\s{2,}/g,""),r._emitFullReload();else{var a=i(e,{selector:n,type:"static"},r.plugins),c=u(a);r.statics+=n+"{"+c+"}",r.callStack.push(r.renderStatic.bind(r,e,n)),r._emitChange({selector:n,style:c,type:"rule"})}r.rendered[o]=!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}),r._emitFullReload()},_emitChange:function(e){r.listeners.forEach(function(t){return t(e,r)})},_emitFullReload:function(){r._emitChange({css:r.renderToString(),type:"static"})},_renderStyle:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"",o=Object.keys(t).reduce(function(o,u){var a=t[u];if(a instanceof Object&&!Array.isArray(a)){if(null!==u.match(/^(:|\[|>)/))r._renderStyle(e,a,n+u,i);else if("@media"===u.substr(0,6)){var c=u.slice(6).trim(),s=i.length>0?i+" and "+c:c;r._renderStyle(e,a,n,s)}}else o[u]=a;return o},{});if(Object.keys(o).length>0){r.rendered[e]=!0;var a=u(o),c="."+e+n,s=c+"{"+a+"}";i.length>0?(r.mediaRules.hasOwnProperty(i)||(r.mediaRules[i]=""),r.mediaRules[i]+=s):r.rules+=s,r._emitChange({selector:c,style:a,media:i,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 d(){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 l(e,r){var t=0,n=!1,i={updateNode:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if("hydrate"===e.type)return n=!e.done,!0;if(!n)switch(e.type){case"rule":var i=e.selector,o=e.style,u=e.media,a=i+"{"+o+"}",c=r.sheet,s=c.cssRules.length;u&&u.length>0?(c.insertRule("@media "+u+"{"+a+"}",s-t),t+=1):c.insertRule(a,0);break;case"static":r.textContent=e.css,t=0}}};return i}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=l(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.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};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}),g=v&&"object"==typeof v&&"default"in v?v.default:v,b={createRenderer:c,combineRules:f,enhance:d,render:y};return b});

lib/createRenderer.js

@@ -53,2 +53,6 @@ 'use strict';
 
+    // try and use readable selectors when
+    // prettySelectors is on and not in a prod environment
+    prettySelectors: config.prettySelectors && process.env.NODE_ENV !== 'production',
+
     /**
@@ -97,4 +101,6 @@ * clears the sheet's cache but keeps all listeners
       var ruleId = renderer.ids.indexOf(rule);
-      var className = 'c' + ruleId + (0, _generatePropsReference2.default)(props);
 
+      var classNamePrefix = renderer.prettySelectors && rule.name ? rule.name + '_' : 'c';
+      var className = classNamePrefix + ruleId + (0, _generatePropsReference2.default)(props);
+
       // only if the cached rule has not already been rendered
@@ -122,3 +128,3 @@ // with a specific set of properties it actually renders
         // keep static style to diff dynamic onces later on
-        if (className === 'c' + ruleId) {
+        if (className === classNamePrefix + ruleId) {
           renderer.base[ruleId] = diffedStyle;
@@ -128,3 +134,3 @@ }
 
-      var baseClassName = 'c' + ruleId;
+      var baseClassName = classNamePrefix + ruleId;
       if (!renderer.rendered[className]) {
@@ -158,3 +164,4 @@ return baseClassName;
       var propsReference = (0, _generatePropsReference2.default)(props);
-      var animationName = 'k' + renderer.ids.indexOf(keyframe) + propsReference;
+      var prefix = renderer.prettySelectors && keyframe.name ? keyframe.name + '_' : 'k';
+      var animationName = prefix + renderer.ids.indexOf(keyframe) + propsReference;
 
@@ -161,0 +168,0 @@ // only if the cached keyframe has not already been rendered

package.json

 {
   "name": "fela",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "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

122344

increased by2.24%

Number of package files

42

increased by2.44%

Lines of code

1848

increased by1.82%

Worsened metrics

Number of low supply chain risk alerts

5

increased by25%

No dependency changes