stylefire - npm Package Compare versions

Comparing version 2.4.0 to 2.4.1

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog
 
+## [2.4.1] 2019-02-27
+
+### Added
+
+- Support for `transform` template function to accept the Stylefire-built transform string.
+
 ## [2.4.0] 2019-01-30
@@ -7,0 +13,0 @@

dist/stylefire.es.js

@@ -245,2 +245,22 @@ import sync from 'framesync';
 };
+var buildTransform = function (state, transform, transformKeys, enableHardwareAcceleration) {
+    var transformString = '';
+    var transformHasZ = false;
+    transformKeys.sort(sortTransformProps);
+    var numTransformKeys = transformKeys.length;
+    for (var i = 0; i < numTransformKeys; i++) {
+        var key = transformKeys[i];
+        transformString += (aliasMap[key] || key) + "(" + transform[key] + ") ";
+        transformHasZ = key === 'z' ? true : transformHasZ;
+    }
+    if (!transformHasZ && enableHardwareAcceleration) {
+        transformString += 'translateZ(0)';
+    } else {
+        transformString = transformString.trim();
+    }
+    if (isCustomTemplate(state.transform)) {
+        transformString = state.transform(transform, transformString);
+    }
+    return transformString;
+};
 var buildStyleProperty = function (state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, isDashCase) {
@@ -288,24 +308,4 @@ if (enableHardwareAcceleration === void 0) {
     }
-    if (!transformIsDefault) {
-        var transformString = '';
-        if (isCustomTemplate(state.transform)) {
-            transformString = state.transform(transform);
-        } else {
-            var transformHasZ = false;
-            transformKeys.sort(sortTransformProps);
-            var numTransformKeys = transformKeys.length;
-            for (var i = 0; i < numTransformKeys; i++) {
-                var key = transformKeys[i];
-                transformString += (aliasMap[key] || key) + "(" + transform[key] + ") ";
-                transformHasZ = key === 'z' ? true : transformHasZ;
-            }
-            if (!transformHasZ && enableHardwareAcceleration) {
-                transformString += 'translateZ(0)';
-            } else {
-                transformString = transformString.trim();
-            }
-        }
-        styles.transform = transformString;
-    } else if (hasTransform) {
-        styles.transform = 'none';
+    if (hasTransform) {
+        styles.transform = transformIsDefault ? 'none' : buildTransform(state, transform, transformKeys, enableHardwareAcceleration);
     }
@@ -312,0 +312,0 @@ if (hasTransformOrigin) {

dist/stylefire.js

@@ -102,5 +102,8 @@ (function (global, factory) {
             schedule: function (process, keepAlive, immediate) {
+                if (keepAlive === void 0) { keepAlive = false; }
+                if (immediate === void 0) { immediate = false; }
                 invariant(typeof process === 'function', 'Argument must be a function');
                 var addToCurrentBuffer = immediate && isProcessing;
                 var buffer = addToCurrentBuffer ? processToRun : processToRunNextFrame;
+                cancelled.delete(process);
                 if (keepAlive)
@@ -552,2 +555,23 @@ toKeepAlive.add(process);
     };
+    var buildTransform = function (state, transform, transformKeys, enableHardwareAcceleration) {
+        var transformString = '';
+        var transformHasZ = false;
+        transformKeys.sort(sortTransformProps);
+        var numTransformKeys = transformKeys.length;
+        for (var i = 0; i < numTransformKeys; i++) {
+            var key = transformKeys[i];
+            transformString += (aliasMap[key] || key) + "(" + transform[key] + ") ";
+            transformHasZ = key === 'z' ? true : transformHasZ;
+        }
+        if (!transformHasZ && enableHardwareAcceleration) {
+            transformString += 'translateZ(0)';
+        }
+        else {
+            transformString = transformString.trim();
+        }
+        if (isCustomTemplate(state.transform)) {
+            transformString = state.transform(transform, transformString);
+        }
+        return transformString;
+    };
     var buildStyleProperty = function (state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, isDashCase) {
@@ -588,28 +612,7 @@ if (enableHardwareAcceleration === void 0) { enableHardwareAcceleration = true; }
         }
-        if (!transformIsDefault) {
-            var transformString = '';
-            if (isCustomTemplate(state.transform)) {
-                transformString = state.transform(transform);
-            }
-            else {
-                var transformHasZ = false;
-                transformKeys.sort(sortTransformProps);
-                var numTransformKeys = transformKeys.length;
-                for (var i = 0; i < numTransformKeys; i++) {
-                    var key = transformKeys[i];
-                    transformString += (aliasMap[key] || key) + "(" + transform[key] + ") ";
-                    transformHasZ = key === 'z' ? true : transformHasZ;
-                }
-                if (!transformHasZ && enableHardwareAcceleration) {
-                    transformString += 'translateZ(0)';
-                }
-                else {
-                    transformString = transformString.trim();
-                }
-            }
-            styles.transform = transformString;
+        if (hasTransform) {
+            styles.transform = transformIsDefault
+                ? 'none'
+                : buildTransform(state, transform, transformKeys, enableHardwareAcceleration);
         }
-        else if (hasTransform) {
-            styles.transform = 'none';
-        }
         if (hasTransformOrigin) {
@@ -616,0 +619,0 @@ styles.transformOrigin = (transformOrigin.originX ||

dist/stylefire.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.stylefire={})}(this,function(e){"use strict";var t=function(){return(t=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)};var n=function(){};"production"!==process.env.NODE_ENV&&(n=function(e,t){if(!e)throw new Error("Hey, listen! ".toUpperCase()+t)});var r,o=0,a="undefined"!=typeof window&&void 0!==window.requestAnimationFrame?function(e){return window.requestAnimationFrame(e)}:function(e){var t=Date.now(),n=Math.max(0,16.7-(t-o));o=t+n,setTimeout(function(){return e(o)},n)};!function(e){e.Read="read",e.Update="update",e.Render="render",e.PostRender="postRender",e.FixedUpdate="fixedUpdate"}(r||(r={}));var i,s=1/60*1e3,u=!0,f=!1,c=!1,l={delta:0,timestamp:0},d=[r.Read,r.Update,r.Render,r.PostRender],p=function(e){return f=e},h=d.reduce(function(e,t){var r,o,a,i,s,u,c,l,d,h=(r=p,o=[],a=[],i=0,s=!1,u=0,c=new WeakSet,l=new WeakSet,d={cancel:function(e){var t=a.indexOf(e);c.add(e),-1!==t&&a.splice(t,1)},process:function(e){var t,n;if(s=!0,o=(t=[a,o])[0],(a=t[1]).length=0,i=o.length)for(u=0;u<i;u++)(n=o[u])(e),!0!==l.has(n)||c.has(n)||(d.schedule(n),r(!0));s=!1},schedule:function(e,t,r){n("function"==typeof e,"Argument must be a function");var u=r&&s,f=u?o:a;t&&l.add(e),-1===f.indexOf(e)&&(f.push(e),u&&(i=o.length))}});return e.sync[t]=function(e,t,n){return void 0===t&&(t=!1),void 0===n&&(n=!1),f||b(),h.schedule(e,t,n),e},e.cancelSync[t]=function(e){return h.cancel(e)},e.steps[t]=h,e},{steps:{},sync:{},cancelSync:{}}),g=h.steps,m=h.sync,v=(h.cancelSync,function(e){return g[e].process(l)}),y=function(e){f=!1,l.delta=u?s:Math.max(Math.min(e-l.timestamp,40),1),u||(s=l.delta),l.timestamp=e,c=!0,d.forEach(v),c=!1,f&&(u=!1,a(y))},b=function(){f=!0,u=!0,c||a(y)},w=function(e){var t=e.onRead,n=e.onRender,r=e.uncachedValues,o=void 0===r?new Set:r,a=e.useCache,i=void 0===a||a;return function(e){var r={},a=[],s=!1,u=function(e,t){var n=r[e];r[e]=t,r[e]!==n&&(-1===a.indexOf(e)&&a.push(e),s||(s=!0,m.render(f)))};function f(t){return void 0===t&&(t=!1),(!0===t||s)&&(n(r,e,a),s=!1,a.length=0),this}return{get:function(n){return n?i&&!o.has(n)&&void 0!==r[n]?r[n]:t(n,e):r},set:function(e,t){if("string"==typeof e){if(void 0===t)return function(t){return u(e,t)};u(e,t)}else for(var n in e)e.hasOwnProperty(n)&&u(n,e[n]);return this},render:f}}},O=/([a-z])([A-Z])/g,x=function(e){return e.replace(O,"$1-$2").toLowerCase()},R=new Map,k=new Map,S=["Webkit","Moz","O","ms",""],L=S.length,T="undefined"!=typeof document,P=function(e,t){return k.set(e,x(t))},C=function(e,t){void 0===t&&(t=!1);var n=t?k:R;return n.has(e)||(T?function(e){i=i||document.createElement("div");for(var t=0;t<L;t++){var n=S[t],r=""===n,o=r?e:n+e.charAt(0).toUpperCase()+e.slice(1);(o in i.style||r)&&(R.set(e,o),P(e,(r?"":"-")+x(o)))}}(e):function(e){P(e,e)}(e)),n.get(e)||e},Y=["","X","Y","Z"],M=["scale","rotate","skew","transformPerspective"].reduce(function(e,t){return Y.reduce(function(e,n){return e.push(t+n),e},e)},["x","y","z"]),X=M.reduce(function(e,t){return e[t]=!0,e},{}),W=function(e){return!0===X[e]},B=function(e,t){return M.indexOf(e)-M.indexOf(t)},j=function(e){return"originX"===e||"originY"===e},A=function(){return(A=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)},E=function(e,t){return function(n){return Math.max(Math.min(n,t),e)}},F=function(e){return function(t){return"string"==typeof t&&0===t.indexOf(e)}},Z=function(e){return e%1?Number(e.toFixed(5)):e},H={test:function(e){return"number"==typeof e},parse:parseFloat,transform:function(e){return e}},U=A({},H,{transform:E(0,1)}),V=A({},H,{default:1}),z=function(e){return{test:function(t){return"string"==typeof t&&t.endsWith(e)&&1===t.split(" ").length},parse:parseFloat,transform:function(t){return""+t+e}}},N=z("deg"),q=z("%"),I=z("px"),D=E(0,255),$=/^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))$/i,_=function(e){return void 0!==e.red},G=function(e){return void 0!==e.hue},J=function(e){var t=e.length;return function(n){if("string"!=typeof n)return n;for(var r,o={},a=function(e){return"string"==typeof e?e.split(/,\s*/):[e]}((r=n).substring(r.indexOf("(")+1,r.lastIndexOf(")"))),i=0;i<t;i++)o[e[i]]=void 0!==a[i]?parseFloat(a[i]):1;return o}},K=A({},H,{transform:function(e){return Math.round(D(e))}}),Q=F("rgb"),ee={test:function(e){return"string"==typeof e?Q(e):_(e)},parse:J(["red","green","blue","alpha"]),transform:function(e){var t=e.red,n=e.green,r=e.blue,o=e.alpha;return function(e){var t=e.red,n=e.green,r=e.blue,o=e.alpha;return"rgba("+t+", "+n+", "+r+", "+(void 0===o?1:o)+")"}({red:K.transform(t),green:K.transform(n),blue:K.transform(r),alpha:Z(o)})}},te=F("hsl"),ne={test:function(e){return"string"==typeof e?te(e):G(e)},parse:J(["hue","saturation","lightness","alpha"]),transform:function(e){var t=e.hue,n=e.saturation,r=e.lightness,o=e.alpha;return function(e){var t=e.hue,n=e.saturation,r=e.lightness,o=e.alpha;return"hsla("+t+", "+n+", "+r+", "+(void 0===o?1:o)+")"}({hue:Math.round(t),saturation:q.transform(Z(n)),lightness:q.transform(Z(r)),alpha:Z(o)})}},re=A({},ee,{test:F("#"),parse:function(e){var t="",n="",r="";return e.length>4?(t=e.substr(1,2),n=e.substr(3,2),r=e.substr(5,2)):(t=e.substr(1,1),n=e.substr(2,1),r=e.substr(3,1),t+=t,n+=n,r+=r),{red:parseInt(t,16),green:parseInt(n,16),blue:parseInt(r,16),alpha:1}}}),oe={test:function(e){return"string"==typeof e&&$.test(e)||ee.test(e)||ne.test(e)||re.test(e)},parse:function(e){return ee.test(e)?ee.parse(e):ne.test(e)?ne.parse(e):re.test(e)?re.parse(e):e},transform:function(e){return _(e)?ee.transform(e):G(e)?ne.transform(e):e}},ae={color:oe,backgroundColor:oe,outlineColor:oe,fill:oe,stroke:oe,borderColor:oe,borderTopColor:oe,borderRightColor:oe,borderBottomColor:oe,borderLeftColor:oe,borderWidth:I,borderTopWidth:I,borderRightWidth:I,borderBottomWidth:I,borderLeftWidth:I,borderRadius:I,borderTopLeftRadius:I,borderTopRightRadius:I,borderBottomRightRadius:I,borderBottomLeftRadius:I,width:I,maxWidth:I,height:I,maxHeight:I,top:I,right:I,bottom:I,left:I,padding:I,paddingTop:I,paddingRight:I,paddingBottom:I,paddingLeft:I,margin:I,marginTop:I,marginRight:I,marginBottom:I,marginLeft:I,rotate:N,rotateX:N,rotateY:N,rotateZ:N,scale:V,scaleX:V,scaleY:V,scaleZ:V,skew:N,skewX:N,skewY:N,distance:I,x:I,y:I,z:I,perspective:I,opacity:U,originX:q,originY:q,originZ:I},ie=function(e){return ae[e]},se=new Set(["scrollLeft","scrollTop"]),ue=new Set(["scrollLeft","scrollTop","transform"]),fe={x:"translateX",y:"translateY",z:"translateZ"},ce=function(e){return"function"==typeof e},le=function(e,t,n,r,o,a,i){void 0===t&&(t=!0),void 0===n&&(n={}),void 0===r&&(r={}),void 0===o&&(o={}),void 0===a&&(a=[]),void 0===i&&(i=!1);var s=!0,u=!1,f=!1;for(var c in e){var l=e[c],d=ie(c),p="number"==typeof l&&d?d.transform(l):l;W(c)?(u=!0,r[c]=p,a.push(c),s&&(d.default&&l!==d.default||!d.default&&0!==l)&&(s=!1)):j(c)?(o[c]=p,f=!0):ue.has(c)&&ce(p)||(n[C(c,i)]=p)}if(s)u&&(n.transform="none");else{var h="";if(ce(e.transform))h=e.transform(r);else{var g=!1;a.sort(B);for(var m=a.length,v=0;v<m;v++){c=a[v];h+=(fe[c]||c)+"("+r[c]+") ",g="z"===c||g}!g&&t?h+="translateZ(0)":h=h.trim()}n.transform=h}return f&&(n.transformOrigin=(o.originX||0)+" "+(o.originY||0)+" "+(o.originZ||0)),n},de=w({onRead:function(e,t){var n=t.element,r=t.preparseOutput,o=ie(e);if(W(e))return o&&o.default||0;if(se.has(e))return n[e];var a=window.getComputedStyle(n,null).getPropertyValue(C(e,!0))||0;return r&&o&&o.parse?o.parse(a):a},onRender:function(e,t,n){var r=t.element,o=t.buildStyles;Object.assign(r.style,o(e)),-1!==n.indexOf("scrollLeft")&&(r.scrollLeft=e.scrollLeft),-1!==n.indexOf("scrollTop")&&(r.scrollTop=e.scrollTop)},uncachedValues:se}),pe=function(e,n){void 0===n&&(n={});var r=n.enableHardwareAcceleration,o=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&(n[r[o]]=e[r[o]])}return n}(n,["enableHardwareAcceleration"]);return de(t({element:e,buildStyles:function(e){void 0===e&&(e=!0);var t={},n={},r={},o=[];return function(a){return o.length=0,le(a,e,t,n,r,o,!0),t}}(r),preparseOutput:!0},o))},he=new Set(["baseFrequency","diffuseConstant","kernelMatrix","kernelUnitLength","keySplines","keyTimes","limitingConeAngle","markerHeight","markerWidth","numOctaves","targetX","targetY","surfaceScale","specularConstant","specularExponent","stdDeviation","tableValues"]),ge=function(e,t){return e/100*t+"px"},me={fill:oe,stroke:oe,scale:V,scaleX:V,scaleY:V,opacity:U,fillOpacity:U,strokeOpacity:U,numOctaves:t({},H,{transform:Math.round})},ve=w({onRead:function(e,t){var n=t.element;if(W(e)){var r=function(e){return me[e]}(e);return r?r.default:0}return n.getAttribute(e)},onRender:function(e,t){var n=t.dimensions;!function(e,t){for(var n in t)t.hasOwnProperty(n)&&e.setAttribute(n,t[n])}(t.element,function(e,t,n,r){var o=!1,a=!1,i={},s=n?{pathLength:"0",pathSpacing:""+r}:void 0,u=void 0!==e.scale?e.scale||1e-7:e.scaleX||1,f=void 0!==e.scaleY?e.scaleY||1e-7:u||1,c=t.width*((e.originX||50)/100)+t.x,l=t.height*((e.originY||50)/100)+t.y,d=1*u*-c,p=1*f*-l,h=c/u,g=l/f,m={translate:"translate("+e.x+", "+e.y+") ",scale:"translate("+d+", "+p+") scale("+u+", "+f+") translate("+h+", "+g+") ",rotate:"rotate("+e.rotate+", "+c+", "+l+") ",skewX:"skewX("+e.skewX+") ",skewY:"skewY("+e.skewY+") "};for(var v in e)if(e.hasOwnProperty(v)){var y=e[v];W(v)?o=!0:!n||"pathLength"!==v&&"pathSpacing"!==v||"number"!=typeof y?n&&"pathOffset"===v?i["stroke-dashoffset"]=ge(-y,r):i[he.has(v)?v:x(v)]=y:(a=!0,s[v]=ge(y,r))}if(a&&(i["stroke-dasharray"]=s.pathLength+" "+s.pathSpacing),o)for(var v in i.transform="",m)if(m.hasOwnProperty(v)){var b="scale"===v?"1":"0";i.transform+=m[v].replace(/undefined/g,b)}return i}(e,n,t.isPath,t.pathLength))}}),ye=w({useCache:!1,onRead:function(e){return"scrollTop"===e?window.pageYOffset:window.pageXOffset},onRender:function(e){var t=e.scrollTop,n=void 0===t?0:t,r=e.scrollLeft,o=void 0===r?0:r;return window.scrollTo(o,n)}}),be=new WeakMap,we=function(e,t){var r;return e instanceof HTMLElement?r=pe(e,t):e instanceof SVGElement?r=function(e){var t={element:e,dimensions:function(e){try{return function(e){return"function"==typeof e.getBBox?e.getBBox():e.getBoundingClientRect()}(e)}catch(e){return{x:0,y:0,width:0,height:0}}}(e),isPath:!1};return"path"===e.tagName&&(t.isPath=!0,t.pathLength=e.getTotalLength()),ve(t)}(e):e===window&&(r=ye(e)),n(void 0!==r,"No valid node provided. Node must be HTMLElement, SVGElement or window."),be.set(e,r),r},Oe=function(e,t){return be.has(e)?be.get(e):we(e,t)};e.default=function(e,t){var n="string"==typeof e?document.querySelector(e):e;return Oe(n,t)},e.createStylerFactory=w,e.buildStyleProperty=le,e.isTransformProp=W,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.stylefire={})}(this,function(e){"use strict";var t=function(){return(t=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)};var n=function(){};"production"!==process.env.NODE_ENV&&(n=function(e,t){if(!e)throw new Error("Hey, listen! ".toUpperCase()+t)});var r,o=0,a="undefined"!=typeof window&&void 0!==window.requestAnimationFrame?function(e){return window.requestAnimationFrame(e)}:function(e){var t=Date.now(),n=Math.max(0,16.7-(t-o));o=t+n,setTimeout(function(){return e(o)},n)};!function(e){e.Read="read",e.Update="update",e.Render="render",e.PostRender="postRender",e.FixedUpdate="fixedUpdate"}(r||(r={}));var i,s=1/60*1e3,u=!0,f=!1,c=!1,d={delta:0,timestamp:0},l=[r.Read,r.Update,r.Render,r.PostRender],p=function(e){return f=e},h=l.reduce(function(e,t){var r,o,a,i,s,u,c,d,l,h=(r=p,o=[],a=[],i=0,s=!1,u=0,c=new WeakSet,d=new WeakSet,l={cancel:function(e){var t=a.indexOf(e);c.add(e),-1!==t&&a.splice(t,1)},process:function(e){var t,n;if(s=!0,o=(t=[a,o])[0],(a=t[1]).length=0,i=o.length)for(u=0;u<i;u++)(n=o[u])(e),!0!==d.has(n)||c.has(n)||(l.schedule(n),r(!0));s=!1},schedule:function(e,t,r){void 0===t&&(t=!1),void 0===r&&(r=!1),n("function"==typeof e,"Argument must be a function");var u=r&&s,f=u?o:a;c.delete(e),t&&d.add(e),-1===f.indexOf(e)&&(f.push(e),u&&(i=o.length))}});return e.sync[t]=function(e,t,n){return void 0===t&&(t=!1),void 0===n&&(n=!1),f||b(),h.schedule(e,t,n),e},e.cancelSync[t]=function(e){return h.cancel(e)},e.steps[t]=h,e},{steps:{},sync:{},cancelSync:{}}),g=h.steps,v=h.sync,m=(h.cancelSync,function(e){return g[e].process(d)}),y=function(e){f=!1,d.delta=u?s:Math.max(Math.min(e-d.timestamp,40),1),u||(s=d.delta),d.timestamp=e,c=!0,l.forEach(m),c=!1,f&&(u=!1,a(y))},b=function(){f=!0,u=!0,c||a(y)},w=function(e){var t=e.onRead,n=e.onRender,r=e.uncachedValues,o=void 0===r?new Set:r,a=e.useCache,i=void 0===a||a;return function(e){var r={},a=[],s=!1,u=function(e,t){var n=r[e];r[e]=t,r[e]!==n&&(-1===a.indexOf(e)&&a.push(e),s||(s=!0,v.render(f)))};function f(t){return void 0===t&&(t=!1),(!0===t||s)&&(n(r,e,a),s=!1,a.length=0),this}return{get:function(n){return n?i&&!o.has(n)&&void 0!==r[n]?r[n]:t(n,e):r},set:function(e,t){if("string"==typeof e){if(void 0===t)return function(t){return u(e,t)};u(e,t)}else for(var n in e)e.hasOwnProperty(n)&&u(n,e[n]);return this},render:f}}},O=/([a-z])([A-Z])/g,x=function(e){return e.replace(O,"$1-$2").toLowerCase()},R=new Map,k=new Map,S=["Webkit","Moz","O","ms",""],L=S.length,T="undefined"!=typeof document,P=function(e,t){return k.set(e,x(t))},C=function(e,t){void 0===t&&(t=!1);var n=t?k:R;return n.has(e)||(T?function(e){i=i||document.createElement("div");for(var t=0;t<L;t++){var n=S[t],r=""===n,o=r?e:n+e.charAt(0).toUpperCase()+e.slice(1);(o in i.style||r)&&(R.set(e,o),P(e,(r?"":"-")+x(o)))}}(e):function(e){P(e,e)}(e)),n.get(e)||e},Y=["","X","Y","Z"],M=["scale","rotate","skew","transformPerspective"].reduce(function(e,t){return Y.reduce(function(e,n){return e.push(t+n),e},e)},["x","y","z"]),X=M.reduce(function(e,t){return e[t]=!0,e},{}),W=function(e){return!0===X[e]},B=function(e,t){return M.indexOf(e)-M.indexOf(t)},j=function(e){return"originX"===e||"originY"===e},A=function(){return(A=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)},E=function(e,t){return function(n){return Math.max(Math.min(n,t),e)}},F=function(e){return function(t){return"string"==typeof t&&0===t.indexOf(e)}},Z=function(e){return e%1?Number(e.toFixed(5)):e},H={test:function(e){return"number"==typeof e},parse:parseFloat,transform:function(e){return e}},U=A({},H,{transform:E(0,1)}),V=A({},H,{default:1}),z=function(e){return{test:function(t){return"string"==typeof t&&t.endsWith(e)&&1===t.split(" ").length},parse:parseFloat,transform:function(t){return""+t+e}}},N=z("deg"),q=z("%"),I=z("px"),D=E(0,255),$=/^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))$/i,_=function(e){return void 0!==e.red},G=function(e){return void 0!==e.hue},J=function(e){var t=e.length;return function(n){if("string"!=typeof n)return n;for(var r,o={},a=function(e){return"string"==typeof e?e.split(/,\s*/):[e]}((r=n).substring(r.indexOf("(")+1,r.lastIndexOf(")"))),i=0;i<t;i++)o[e[i]]=void 0!==a[i]?parseFloat(a[i]):1;return o}},K=A({},H,{transform:function(e){return Math.round(D(e))}}),Q=F("rgb"),ee={test:function(e){return"string"==typeof e?Q(e):_(e)},parse:J(["red","green","blue","alpha"]),transform:function(e){var t=e.red,n=e.green,r=e.blue,o=e.alpha;return function(e){var t=e.red,n=e.green,r=e.blue,o=e.alpha;return"rgba("+t+", "+n+", "+r+", "+(void 0===o?1:o)+")"}({red:K.transform(t),green:K.transform(n),blue:K.transform(r),alpha:Z(o)})}},te=F("hsl"),ne={test:function(e){return"string"==typeof e?te(e):G(e)},parse:J(["hue","saturation","lightness","alpha"]),transform:function(e){var t=e.hue,n=e.saturation,r=e.lightness,o=e.alpha;return function(e){var t=e.hue,n=e.saturation,r=e.lightness,o=e.alpha;return"hsla("+t+", "+n+", "+r+", "+(void 0===o?1:o)+")"}({hue:Math.round(t),saturation:q.transform(Z(n)),lightness:q.transform(Z(r)),alpha:Z(o)})}},re=A({},ee,{test:F("#"),parse:function(e){var t="",n="",r="";return e.length>4?(t=e.substr(1,2),n=e.substr(3,2),r=e.substr(5,2)):(t=e.substr(1,1),n=e.substr(2,1),r=e.substr(3,1),t+=t,n+=n,r+=r),{red:parseInt(t,16),green:parseInt(n,16),blue:parseInt(r,16),alpha:1}}}),oe={test:function(e){return"string"==typeof e&&$.test(e)||ee.test(e)||ne.test(e)||re.test(e)},parse:function(e){return ee.test(e)?ee.parse(e):ne.test(e)?ne.parse(e):re.test(e)?re.parse(e):e},transform:function(e){return _(e)?ee.transform(e):G(e)?ne.transform(e):e}},ae={color:oe,backgroundColor:oe,outlineColor:oe,fill:oe,stroke:oe,borderColor:oe,borderTopColor:oe,borderRightColor:oe,borderBottomColor:oe,borderLeftColor:oe,borderWidth:I,borderTopWidth:I,borderRightWidth:I,borderBottomWidth:I,borderLeftWidth:I,borderRadius:I,borderTopLeftRadius:I,borderTopRightRadius:I,borderBottomRightRadius:I,borderBottomLeftRadius:I,width:I,maxWidth:I,height:I,maxHeight:I,top:I,right:I,bottom:I,left:I,padding:I,paddingTop:I,paddingRight:I,paddingBottom:I,paddingLeft:I,margin:I,marginTop:I,marginRight:I,marginBottom:I,marginLeft:I,rotate:N,rotateX:N,rotateY:N,rotateZ:N,scale:V,scaleX:V,scaleY:V,scaleZ:V,skew:N,skewX:N,skewY:N,distance:I,x:I,y:I,z:I,perspective:I,opacity:U,originX:q,originY:q,originZ:I},ie=function(e){return ae[e]},se=new Set(["scrollLeft","scrollTop"]),ue=new Set(["scrollLeft","scrollTop","transform"]),fe={x:"translateX",y:"translateY",z:"translateZ"},ce=function(e){return"function"==typeof e},de=function(e,t,n,r,o,a,i){void 0===t&&(t=!0),void 0===n&&(n={}),void 0===r&&(r={}),void 0===o&&(o={}),void 0===a&&(a=[]),void 0===i&&(i=!1);var s=!0,u=!1,f=!1;for(var c in e){var d=e[c],l=ie(c),p="number"==typeof d&&l?l.transform(d):d;W(c)?(u=!0,r[c]=p,a.push(c),s&&(l.default&&d!==l.default||!l.default&&0!==d)&&(s=!1)):j(c)?(o[c]=p,f=!0):ue.has(c)&&ce(p)||(n[C(c,i)]=p)}return u&&(n.transform=s?"none":function(e,t,n,r){var o="",a=!1;n.sort(B);for(var i=n.length,s=0;s<i;s++){var u=n[s];o+=(fe[u]||u)+"("+t[u]+") ",a="z"===u||a}return!a&&r?o+="translateZ(0)":o=o.trim(),ce(e.transform)&&(o=e.transform(t,o)),o}(e,r,a,t)),f&&(n.transformOrigin=(o.originX||0)+" "+(o.originY||0)+" "+(o.originZ||0)),n},le=w({onRead:function(e,t){var n=t.element,r=t.preparseOutput,o=ie(e);if(W(e))return o&&o.default||0;if(se.has(e))return n[e];var a=window.getComputedStyle(n,null).getPropertyValue(C(e,!0))||0;return r&&o&&o.parse?o.parse(a):a},onRender:function(e,t,n){var r=t.element,o=t.buildStyles;Object.assign(r.style,o(e)),-1!==n.indexOf("scrollLeft")&&(r.scrollLeft=e.scrollLeft),-1!==n.indexOf("scrollTop")&&(r.scrollTop=e.scrollTop)},uncachedValues:se}),pe=function(e,n){void 0===n&&(n={});var r=n.enableHardwareAcceleration,o=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&(n[r[o]]=e[r[o]])}return n}(n,["enableHardwareAcceleration"]);return le(t({element:e,buildStyles:function(e){void 0===e&&(e=!0);var t={},n={},r={},o=[];return function(a){return o.length=0,de(a,e,t,n,r,o,!0),t}}(r),preparseOutput:!0},o))},he=new Set(["baseFrequency","diffuseConstant","kernelMatrix","kernelUnitLength","keySplines","keyTimes","limitingConeAngle","markerHeight","markerWidth","numOctaves","targetX","targetY","surfaceScale","specularConstant","specularExponent","stdDeviation","tableValues"]),ge=function(e,t){return e/100*t+"px"},ve={fill:oe,stroke:oe,scale:V,scaleX:V,scaleY:V,opacity:U,fillOpacity:U,strokeOpacity:U,numOctaves:t({},H,{transform:Math.round})},me=w({onRead:function(e,t){var n=t.element;if(W(e)){var r=function(e){return ve[e]}(e);return r?r.default:0}return n.getAttribute(e)},onRender:function(e,t){var n=t.dimensions;!function(e,t){for(var n in t)t.hasOwnProperty(n)&&e.setAttribute(n,t[n])}(t.element,function(e,t,n,r){var o=!1,a=!1,i={},s=n?{pathLength:"0",pathSpacing:""+r}:void 0,u=void 0!==e.scale?e.scale||1e-7:e.scaleX||1,f=void 0!==e.scaleY?e.scaleY||1e-7:u||1,c=t.width*((e.originX||50)/100)+t.x,d=t.height*((e.originY||50)/100)+t.y,l=1*u*-c,p=1*f*-d,h=c/u,g=d/f,v={translate:"translate("+e.x+", "+e.y+") ",scale:"translate("+l+", "+p+") scale("+u+", "+f+") translate("+h+", "+g+") ",rotate:"rotate("+e.rotate+", "+c+", "+d+") ",skewX:"skewX("+e.skewX+") ",skewY:"skewY("+e.skewY+") "};for(var m in e)if(e.hasOwnProperty(m)){var y=e[m];W(m)?o=!0:!n||"pathLength"!==m&&"pathSpacing"!==m||"number"!=typeof y?n&&"pathOffset"===m?i["stroke-dashoffset"]=ge(-y,r):i[he.has(m)?m:x(m)]=y:(a=!0,s[m]=ge(y,r))}if(a&&(i["stroke-dasharray"]=s.pathLength+" "+s.pathSpacing),o)for(var m in i.transform="",v)if(v.hasOwnProperty(m)){var b="scale"===m?"1":"0";i.transform+=v[m].replace(/undefined/g,b)}return i}(e,n,t.isPath,t.pathLength))}}),ye=w({useCache:!1,onRead:function(e){return"scrollTop"===e?window.pageYOffset:window.pageXOffset},onRender:function(e){var t=e.scrollTop,n=void 0===t?0:t,r=e.scrollLeft,o=void 0===r?0:r;return window.scrollTo(o,n)}}),be=new WeakMap,we=function(e,t){var r;return e instanceof HTMLElement?r=pe(e,t):e instanceof SVGElement?r=function(e){var t={element:e,dimensions:function(e){try{return function(e){return"function"==typeof e.getBBox?e.getBBox():e.getBoundingClientRect()}(e)}catch(e){return{x:0,y:0,width:0,height:0}}}(e),isPath:!1};return"path"===e.tagName&&(t.isPath=!0,t.pathLength=e.getTotalLength()),me(t)}(e):e===window&&(r=ye(e)),n(void 0!==r,"No valid node provided. Node must be HTMLElement, SVGElement or window."),be.set(e,r),r},Oe=function(e,t){return be.has(e)?be.get(e):we(e,t)};e.default=function(e,t){var n="string"==typeof e?document.querySelector(e):e;return Oe(n,t)},e.createStylerFactory=w,e.buildStyleProperty=de,e.isTransformProp=W,Object.defineProperty(e,"__esModule",{value:!0})});

lib/index.js

@@ -246,2 +246,23 @@ 'use strict';
 };
+var buildTransform = function (state, transform, transformKeys, enableHardwareAcceleration) {
+    var transformString = '';
+    var transformHasZ = false;
+    transformKeys.sort(sortTransformProps);
+    var numTransformKeys = transformKeys.length;
+    for (var i = 0; i < numTransformKeys; i++) {
+        var key = transformKeys[i];
+        transformString += (aliasMap[key] || key) + "(" + transform[key] + ") ";
+        transformHasZ = key === 'z' ? true : transformHasZ;
+    }
+    if (!transformHasZ && enableHardwareAcceleration) {
+        transformString += 'translateZ(0)';
+    }
+    else {
+        transformString = transformString.trim();
+    }
+    if (isCustomTemplate(state.transform)) {
+        transformString = state.transform(transform, transformString);
+    }
+    return transformString;
+};
 var buildStyleProperty = function (state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, isDashCase) {
@@ -282,28 +303,7 @@ if (enableHardwareAcceleration === void 0) { enableHardwareAcceleration = true; }
     }
-    if (!transformIsDefault) {
-        var transformString = '';
-        if (isCustomTemplate(state.transform)) {
-            transformString = state.transform(transform);
-        }
-        else {
-            var transformHasZ = false;
-            transformKeys.sort(sortTransformProps);
-            var numTransformKeys = transformKeys.length;
-            for (var i = 0; i < numTransformKeys; i++) {
-                var key = transformKeys[i];
-                transformString += (aliasMap[key] || key) + "(" + transform[key] + ") ";
-                transformHasZ = key === 'z' ? true : transformHasZ;
-            }
-            if (!transformHasZ && enableHardwareAcceleration) {
-                transformString += 'translateZ(0)';
-            }
-            else {
-                transformString = transformString.trim();
-            }
-        }
-        styles.transform = transformString;
+    if (hasTransform) {
+        styles.transform = transformIsDefault
+            ? 'none'
+            : buildTransform(state, transform, transformKeys, enableHardwareAcceleration);
     }
-    else if (hasTransform) {
-        styles.transform = 'none';
-    }
     if (hasTransformOrigin) {
@@ -310,0 +310,0 @@ styles.transformOrigin = (transformOrigin.originX ||

lib/styler/types.d.ts

@@ -11,3 +11,3 @@ export declare type State = {
 export declare type ChangedValues = string[];
-export declare type CustomTemplate = (state: State) => string;
+export declare type CustomTemplate = (state: State, prebuilt: string) => string;
 export declare type Config = {
@@ -14,0 +14,0 @@ onRead: (key: string, props: Props) => any;

package.json

 {
   "name": "stylefire",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "Performant, simplified stylers for CSS, SVG, path and DOM scroll.",
@@ -5,0 +5,0 @@ "main": "lib/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

96366

increased by0.48%

Lines of code

2005

increased by0.2%

No dependency changes