stylefire - npm Package Compare versions

Comparing version 7.0.2 to 7.0.3

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog
 
+## [7.0.3] 2020-03-31
+
+### Added
+
+- Can now configure CSS style builder to never return `transform: none` with `allowTransformNone` config.
+
 ## [7.0.2] 2020-01-24
@@ -7,0 +13,0 @@

dist/css/build-styles.d.ts

 import { State, ResolvedState } from '../styler/types';
-declare function buildStyleProperty(state: State, enableHardwareAcceleration?: boolean, styles?: ResolvedState, transform?: ResolvedState, transformOrigin?: ResolvedState, transformKeys?: string[], isDashCase?: boolean): ResolvedState;
-declare function createStyleBuilder(enableHardwareAcceleration?: boolean, isDashCase?: boolean): (state: State) => ResolvedState;
+declare function buildStyleProperty(state: State, enableHardwareAcceleration?: boolean, styles?: ResolvedState, transform?: ResolvedState, transformOrigin?: ResolvedState, transformKeys?: string[], isDashCase?: boolean, allowTransformNone?: boolean): ResolvedState;
+declare function createStyleBuilder({ enableHardwareAcceleration, isDashCase, allowTransformNone }?: {
+    enableHardwareAcceleration?: boolean;
+    isDashCase?: boolean;
+    allowTransformNone?: boolean;
+}): (state: State) => ResolvedState;
 export { buildStyleProperty, createStyleBuilder };

dist/css/index.d.ts

@@ -5,2 +5,3 @@ import { Styler, ResolvedState, State } from '../styler/types';
     preparseOutput?: boolean;
+    allowTransformNone?: boolean;
 };
@@ -13,3 +14,3 @@ export declare type CssStylerOptions = {
 };
-export default function createCssStyler(element: HTMLElement, { enableHardwareAcceleration, ...props }?: Props): Styler;
+export default function createCssStyler(element: HTMLElement, { enableHardwareAcceleration, allowTransformNone, ...props }?: Props): Styler;
 export {};

dist/stylefire.es.js

@@ -227,3 +227,6 @@ import { __rest, __assign } from 'tslib';
 }
-function buildTransform(state, transform, transformKeys, transformIsDefault, enableHardwareAcceleration) {
+function buildTransform(state, transform, transformKeys, transformIsDefault, enableHardwareAcceleration, allowTransformNone) {
+    if (allowTransformNone === void 0) {
+        allowTransformNone = true;
+    }
     var transformString = '';
@@ -245,3 +248,3 @@ var transformHasZ = false;
         transformString = state.transform(transform, transformIsDefault ? '' : transformString);
-    } else if (transformIsDefault) {
+    } else if (allowTransformNone && transformIsDefault) {
         transformString = 'none';
@@ -251,3 +254,3 @@ }
 }
-function buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, isDashCase) {
+function buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, isDashCase, allowTransformNone) {
     if (enableHardwareAcceleration === void 0) {
@@ -271,2 +274,5 @@ enableHardwareAcceleration = true;
     }
+    if (allowTransformNone === void 0) {
+        allowTransformNone = true;
+    }
     var transformIsDefault = true;
@@ -296,3 +302,3 @@ var hasTransform = false;
     if (hasTransform || typeof state.transform === 'function') {
-        styles.transform = buildTransform(state, transform, transformKeys, transformIsDefault, enableHardwareAcceleration);
+        styles.transform = buildTransform(state, transform, transformKeys, transformIsDefault, enableHardwareAcceleration, allowTransformNone);
     }
@@ -304,9 +310,10 @@ if (hasTransformOrigin) {
 }
-function createStyleBuilder(enableHardwareAcceleration, isDashCase) {
-    if (enableHardwareAcceleration === void 0) {
-        enableHardwareAcceleration = true;
-    }
-    if (isDashCase === void 0) {
-        isDashCase = true;
-    }
+function createStyleBuilder(_a) {
+    var _b = _a === void 0 ? {} : _a,
+        _c = _b.enableHardwareAcceleration,
+        enableHardwareAcceleration = _c === void 0 ? true : _c,
+        _d = _b.isDashCase,
+        isDashCase = _d === void 0 ? true : _d,
+        _e = _b.allowTransformNone,
+        allowTransformNone = _e === void 0 ? true : _e;
     var styles = {};
@@ -318,3 +325,3 @@ var transform = {};
         transformKeys.length = 0;
-        buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, isDashCase);
+        buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, isDashCase, allowTransformNone);
         return styles;
@@ -368,4 +375,8 @@ };
     var enableHardwareAcceleration = _a.enableHardwareAcceleration,
-        props = __rest(_a, ["enableHardwareAcceleration"]);
-    return cssStyler(__assign({ element: element, buildStyles: createStyleBuilder(enableHardwareAcceleration), preparseOutput: true }, props));
+        allowTransformNone = _a.allowTransformNone,
+        props = __rest(_a, ["enableHardwareAcceleration", "allowTransformNone"]);
+    return cssStyler(__assign({ element: element, buildStyles: createStyleBuilder({
+            enableHardwareAcceleration: enableHardwareAcceleration,
+            allowTransformNone: allowTransformNone
+        }), preparseOutput: true }, props));
 }
@@ -391,2 +402,6 @@
 }
+var svgStyleConfig = {
+    enableHardwareAcceleration: false,
+    isDashCase: false
+};
 function buildSVGAttrs(_a, dimensions, totalPathLength, cssBuilder, attrs, isDashCase) {
@@ -397,3 +412,3 @@ if (dimensions === void 0) {
     if (cssBuilder === void 0) {
-        cssBuilder = createStyleBuilder(false, false);
+        cssBuilder = createStyleBuilder(svgStyleConfig);
     }
@@ -441,3 +456,3 @@ if (attrs === void 0) {
     var attrs = svgAttrsTemplate();
-    var cssBuilder = createStyleBuilder(false, false);
+    var cssBuilder = createStyleBuilder(svgStyleConfig);
     return function (state) {
@@ -444,0 +459,0 @@ return buildSVGAttrs(state, dimensions, totalPathLength, cssBuilder, attrs, isDashCase);

dist/stylefire.js

@@ -220,3 +220,4 @@ (function (global, factory) {
   }
-  function buildTransform(state, transform, transformKeys, transformIsDefault, enableHardwareAcceleration) {
+  function buildTransform(state, transform, transformKeys, transformIsDefault, enableHardwareAcceleration, allowTransformNone) {
+      if (allowTransformNone === void 0) { allowTransformNone = true; }
       var transformString = '';
@@ -240,3 +241,3 @@ var transformHasZ = false;
       }
-      else if (transformIsDefault) {
+      else if (allowTransformNone && transformIsDefault) {
           transformString = 'none';
@@ -246,3 +247,3 @@ }
   }
-  function buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, isDashCase) {
+  function buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, isDashCase, allowTransformNone) {
       if (enableHardwareAcceleration === void 0) { enableHardwareAcceleration = true; }
@@ -254,2 +255,3 @@ if (styles === void 0) { styles = {}; }
       if (isDashCase === void 0) { isDashCase = false; }
+      if (allowTransformNone === void 0) { allowTransformNone = true; }
       var transformIsDefault = true;
@@ -282,3 +284,3 @@ var hasTransform = false;
       if (hasTransform || typeof state.transform === 'function') {
-          styles.transform = buildTransform(state, transform, transformKeys, transformIsDefault, enableHardwareAcceleration);
+          styles.transform = buildTransform(state, transform, transformKeys, transformIsDefault, enableHardwareAcceleration, allowTransformNone);
       }
@@ -292,5 +294,4 @@ if (hasTransformOrigin) {
   }
-  function createStyleBuilder(enableHardwareAcceleration, isDashCase) {
-      if (enableHardwareAcceleration === void 0) { enableHardwareAcceleration = true; }
-      if (isDashCase === void 0) { isDashCase = true; }
+  function createStyleBuilder(_a) {
+      var _b = _a === void 0 ? {} : _a, _c = _b.enableHardwareAcceleration, enableHardwareAcceleration = _c === void 0 ? true : _c, _d = _b.isDashCase, isDashCase = _d === void 0 ? true : _d, _e = _b.allowTransformNone, allowTransformNone = _e === void 0 ? true : _e;
       var styles = {};
@@ -302,3 +303,3 @@ var transform = {};
           transformKeys.length = 0;
-          buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, isDashCase);
+          buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, isDashCase, allowTransformNone);
           return styles;
@@ -355,4 +356,7 @@ };
       if (_a === void 0) { _a = {}; }
-      var enableHardwareAcceleration = _a.enableHardwareAcceleration, props = tslib.__rest(_a, ["enableHardwareAcceleration"]);
-      return cssStyler(tslib.__assign({ element: element, buildStyles: createStyleBuilder(enableHardwareAcceleration), preparseOutput: true }, props));
+      var enableHardwareAcceleration = _a.enableHardwareAcceleration, allowTransformNone = _a.allowTransformNone, props = tslib.__rest(_a, ["enableHardwareAcceleration", "allowTransformNone"]);
+      return cssStyler(tslib.__assign({ element: element, buildStyles: createStyleBuilder({
+              enableHardwareAcceleration: enableHardwareAcceleration,
+              allowTransformNone: allowTransformNone
+          }), preparseOutput: true }, props));
   }
@@ -396,5 +400,9 @@
   }
+  var svgStyleConfig = {
+      enableHardwareAcceleration: false,
+      isDashCase: false
+  };
   function buildSVGAttrs(_a, dimensions, totalPathLength, cssBuilder, attrs, isDashCase) {
       if (dimensions === void 0) { dimensions = unmeasured; }
-      if (cssBuilder === void 0) { cssBuilder = createStyleBuilder(false, false); }
+      if (cssBuilder === void 0) { cssBuilder = createStyleBuilder(svgStyleConfig); }
       if (attrs === void 0) { attrs = svgAttrsTemplate(); }
@@ -429,3 +437,3 @@ if (isDashCase === void 0) { isDashCase = true; }
       var attrs = svgAttrsTemplate();
-      var cssBuilder = createStyleBuilder(false, false);
+      var cssBuilder = createStyleBuilder(svgStyleConfig);
       return function (state) {
@@ -432,0 +440,0 @@ return buildSVGAttrs(state, dimensions, totalPathLength, cssBuilder, attrs, isDashCase);

dist/stylefire.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("tslib"),require("framesync"),require("style-value-types"),require("hey-listen")):"function"==typeof define&&define.amd?define(["exports","tslib","framesync","style-value-types","hey-listen"],t):t((e=e||self).stylefire={},e.tslib,e.framesync,e.valueTypes,e.heyListen)}(this,function(e,y,f,n,i){"use strict";f=f&&f.hasOwnProperty("default")?f.default:f;function t(e){var r=e.onRead,t=e.onRender,n=e.uncachedValues,d=void 0===n?new Set:n,o=e.useCache,l=void 0===o||o;return function(e){void 0===e&&(e={});var n=y.__rest(e,[]),o={},i=[],a=!1;function s(e,t){e.startsWith("--")&&(n.hasCSSVariable=!0);var r=o[e];o[e]=t,o[e]!==r&&(-1===i.indexOf(e)&&i.push(e),a||(a=!0,f.render(u.render)))}var u={get:function(e,t){return void 0===t&&(t=!1),!t&&l&&!d.has(e)&&void 0!==o[e]?o[e]:r(e,n)},set:function(e,t){if("string"==typeof e)s(e,t);else for(var r in e)s(r,e[r]);return this},render:function(e){return void 0===e&&(e=!1),!a&&!0!==e||(t(o,n,i),a=!1,i.length=0),this}};return u}}function a(e,t){return d.set(e,b(t))}var s,r=/([a-z])([A-Z])/g,b=function(e){return e.replace(r,"$1-$2").toLowerCase()},u=new Map,d=new Map,l=["Webkit","Moz","O","ms",""],c=l.length,o="undefined"!=typeof document,v=function(e,t){void 0===t&&(t=!1);var r,n=t?d:u;return n.has(e)||(o?function(e){s=s||document.createElement("div");for(var t=0;t<c;t++){var r=l[t],n=""===r,o=n?e:r+e.charAt(0).toUpperCase()+e.slice(1);if(o in s.style||n){if(n&&"clipPath"===e&&d.has(e))return;u.set(e,o),a(e,(n?"":"-")+b(o))}}}(e):a(r=e,r)),n.get(e)||e},p=["","X","Y","Z"],g=["translate","scale","rotate","skew","transformPerspective"].reduce(function(e,r){return p.reduce(function(e,t){return e.push(r+t),e},e)},["x","y","z"]),h=g.reduce(function(e,t){return e[t]=!0,e},{});function m(e){return!0===h[e]}function x(e,t){return g.indexOf(e)-g.indexOf(t)}var w=new Set(["originX","originY","originZ"]);var S=y.__assign(y.__assign({},n.number),{transform:Math.round}),O={color:n.color,backgroundColor:n.color,outlineColor:n.color,fill:n.color,stroke:n.color,borderColor:n.color,borderTopColor:n.color,borderRightColor:n.color,borderBottomColor:n.color,borderLeftColor:n.color,borderWidth:n.px,borderTopWidth:n.px,borderRightWidth:n.px,borderBottomWidth:n.px,borderLeftWidth:n.px,borderRadius:n.px,radius:n.px,borderTopLeftRadius:n.px,borderTopRightRadius:n.px,borderBottomRightRadius:n.px,borderBottomLeftRadius:n.px,width:n.px,maxWidth:n.px,height:n.px,maxHeight:n.px,size:n.px,top:n.px,right:n.px,bottom:n.px,left:n.px,padding:n.px,paddingTop:n.px,paddingRight:n.px,paddingBottom:n.px,paddingLeft:n.px,margin:n.px,marginTop:n.px,marginRight:n.px,marginBottom:n.px,marginLeft:n.px,rotate:n.degrees,rotateX:n.degrees,rotateY:n.degrees,rotateZ:n.degrees,scale:n.scale,scaleX:n.scale,scaleY:n.scale,scaleZ:n.scale,skew:n.degrees,skewX:n.degrees,skewY:n.degrees,distance:n.px,translateX:n.px,translateY:n.px,translateZ:n.px,x:n.px,y:n.px,z:n.px,perspective:n.px,opacity:n.alpha,originX:n.progressPercentage,originY:n.progressPercentage,originZ:n.px,zIndex:S,fillOpacity:n.alpha,strokeOpacity:n.alpha,numOctaves:S},k=function(e){return O[e]},R=function(e,t){return t&&"number"==typeof e?t.transform(e):e},C="scrollLeft",L="scrollTop",T=new Set([C,L]),X=new Set([C,L,"transform"]),Y={x:"translateX",y:"translateY",z:"translateZ"};function _(e){return"function"==typeof e}function B(e,t,r,n,o,i,a){void 0===t&&(t=!0),void 0===r&&(r={}),void 0===n&&(n={}),void 0===o&&(o={}),void 0===i&&(i=[]),void 0===a&&(a=!1);var s,u=!0,d=!1,l=!1;for(var f in e){var c=e[f],p=k(f),g=R(c,p);m(f)?(d=!0,n[f]=g,i.push(f),u&&(p.default&&c!==p.default||!p.default&&0!==c)&&(u=!1)):(s=f,w.has(s)?(o[f]=g,l=!0):X.has(f)&&_(g)||(r[v(f,a)]=g))}return!d&&"function"!=typeof e.transform||(r.transform=function(e,t,r,n,o){var i="",a=!1;r.sort(x);for(var s=r.length,u=0;u<s;u++){var d=r[u];i+=(Y[d]||d)+"("+t[d]+") ",a="z"===d||a}return!a&&o?i+="translateZ(0)":i=i.trim(),_(e.transform)?i=e.transform(t,n?"":i):n&&(i="none"),i}(e,n,i,u,t)),l&&(r.transformOrigin=(o.originX||"50%")+" "+(o.originY||"50%")+" "+(o.originZ||0)),r}function P(t,r){void 0===t&&(t=!0),void 0===r&&(r=!0);var n={},o={},i={},a=[];return function(e){return a.length=0,B(e,t,n,o,i,a,r),n}}var W=t({onRead:function(e,t){var r=t.element,n=t.preparseOutput,o=k(e);if(m(e))return o&&o.default||0;if(T.has(e))return r[e];var i=window.getComputedStyle(r,null).getPropertyValue(v(e,!0))||0;return n&&o&&o.test(i)&&o.parse?o.parse(i):i},onRender:function(e,t,r){var n=t.element,o=t.buildStyles,i=t.hasCSSVariable;if(Object.assign(n.style,o(e)),i)for(var a=r.length,s=0;s<a;s++){var u=r[s];u.startsWith("--")&&n.style.setProperty(u,e[u])}-1!==r.indexOf(C)&&(n[C]=e[C]),-1!==r.indexOf(L)&&(n[L]=e[L])},uncachedValues:T});var A=new Set(["baseFrequency","diffuseConstant","kernelMatrix","kernelUnitLength","keySplines","keyTimes","limitingConeAngle","markerHeight","markerWidth","numOctaves","targetX","targetY","surfaceScale","specularConstant","specularExponent","stdDeviation","tableValues"]),V=.5,Z=function(){return{style:{}}},M=function(e,t){return n.px.transform(e*t)},z={x:0,y:0,width:0,height:0};function E(e,t,r){return"string"==typeof e?e:n.px.transform(t+r*e)}function q(e,t,r,n,o,i){void 0===t&&(t=z),void 0===n&&(n=P(!1,!1)),void 0===o&&(o=Z()),void 0===i&&(i=!0);var a,s,u=e.attrX,d=e.attrY,l=e.originX,f=e.originY,c=e.pathLength,p=e.pathSpacing,g=void 0===p?1:p,v=e.pathOffset,h=void 0===v?0:v,m=n(y.__rest(e,["attrX","attrY","originX","originY","pathLength","pathSpacing","pathOffset"]));for(var x in m){if("transform"===x)o.style.transform=m[x];else o[i&&!A.has(x)?b(x):x]=m[x]}return void 0===l&&void 0===f&&!m.transform||(o.style.transformOrigin=(s=void 0!==f?f:V,E(void 0!==l?l:V,(a=t).x,a.width)+" "+E(s,a.y,a.height))),void 0!==u&&(o.x=u),void 0!==d&&(o.y=d),void 0!==r&&void 0!==c&&(o[i?"stroke-dashoffset":"strokeDashoffset"]=M(-h,r),o[i?"stroke-dasharray":"strokeDasharray"]=M(c,r)+" "+M(g,r)),o}function H(e){var t=function(e){try{return"function"==typeof(t=e).getBBox?t.getBBox():t.getBoundingClientRect()}catch(e){return{x:0,y:0,width:0,height:0}}var t}(e),r="path"===e.tagName&&e.getTotalLength?e.getTotalLength():void 0;return G({element:e,buildAttrs:function(t,r,n){void 0===n&&(n=!0);var o=Z(),i=P(!1,!1);return function(e){return q(e,t,r,i,o,n)}}(t,r)})}function j(e,t){var r,n,o;return e===window?r=D(e):(o=e)instanceof HTMLElement||"function"==typeof o.click?r=function(e,t){void 0===t&&(t={});var r=t.enableHardwareAcceleration,n=y.__rest(t,["enableHardwareAcceleration"]);return W(y.__assign({element:e,buildStyles:P(r),preparseOutput:!0},n))}(e,t):((n=e)instanceof SVGElement||"ownerSVGElement"in n)&&(r=H(e)),i.invariant(void 0!==r,"No valid node provided. Node must be HTMLElement, SVGElement or window."),N.set(e,r),r}var G=t({onRead:function(e,t){var r=t.element;if(m(e=A.has(e)?e:b(e))){var n=k(e);return n&&n.default||0}return r.getAttribute(e)},onRender:function(e,t){var r=t.element,n=(0,t.buildAttrs)(e);for(var o in n)"style"===o?Object.assign(r.style,n.style):r.setAttribute(o,n[o])}}),D=t({useCache:!1,onRead:function(e){return"scrollTop"===e?window.pageYOffset:window.pageXOffset},onRender:function(e){var t=e.scrollTop,r=void 0===t?0:t,n=e.scrollLeft,o=void 0===n?0:n;return window.scrollTo(o,r)}}),N=new WeakMap;e.buildSVGAttrs=q,e.buildStyleProperty=B,e.createStylerFactory=t,e.default=function(e,t){var r,n,o="string"==typeof e?document.querySelector(e):e;return r=o,n=t,N.has(r)?N.get(r):j(r,n)},e.isTransformProp=m,e.transformProps=g,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("tslib"),require("framesync"),require("style-value-types"),require("hey-listen")):"function"==typeof define&&define.amd?define(["exports","tslib","framesync","style-value-types","hey-listen"],r):r((e=e||self).stylefire={},e.tslib,e.framesync,e.valueTypes,e.heyListen)}(this,function(e,y,f,n,a){"use strict";f=f&&f.hasOwnProperty("default")?f.default:f;function r(e){var t=e.onRead,r=e.onRender,n=e.uncachedValues,l=void 0===n?new Set:n,o=e.useCache,u=void 0===o||o;return function(e){void 0===e&&(e={});var n=y.__rest(e,[]),o={},a=[],i=!1;function s(e,r){e.startsWith("--")&&(n.hasCSSVariable=!0);var t=o[e];o[e]=r,o[e]!==t&&(-1===a.indexOf(e)&&a.push(e),i||(i=!0,f.render(d.render)))}var d={get:function(e,r){return void 0===r&&(r=!1),!r&&u&&!l.has(e)&&void 0!==o[e]?o[e]:t(e,n)},set:function(e,r){if("string"==typeof e)s(e,r);else for(var t in e)s(t,e[t]);return this},render:function(e){return void 0===e&&(e=!1),!i&&!0!==e||(r(o,n,a),i=!1,a.length=0),this}};return d}}function i(e,r){return l.set(e,b(r))}var s,t=/([a-z])([A-Z])/g,b=function(e){return e.replace(t,"$1-$2").toLowerCase()},d=new Map,l=new Map,u=["Webkit","Moz","O","ms",""],c=u.length,o="undefined"!=typeof document,h=function(e,r){void 0===r&&(r=!1);var t,n=r?l:d;return n.has(e)||(o?function(e){s=s||document.createElement("div");for(var r=0;r<c;r++){var t=u[r],n=""===t,o=n?e:t+e.charAt(0).toUpperCase()+e.slice(1);if(o in s.style||n){if(n&&"clipPath"===e&&l.has(e))return;d.set(e,o),i(e,(n?"":"-")+b(o))}}}(e):i(t=e,t)),n.get(e)||e},p=["","X","Y","Z"],v=["translate","scale","rotate","skew","transformPerspective"].reduce(function(e,t){return p.reduce(function(e,r){return e.push(t+r),e},e)},["x","y","z"]),g=v.reduce(function(e,r){return e[r]=!0,e},{});function m(e){return!0===g[e]}function x(e,r){return v.indexOf(e)-v.indexOf(r)}var w=new Set(["originX","originY","originZ"]);var S=y.__assign(y.__assign({},n.number),{transform:Math.round}),O={color:n.color,backgroundColor:n.color,outlineColor:n.color,fill:n.color,stroke:n.color,borderColor:n.color,borderTopColor:n.color,borderRightColor:n.color,borderBottomColor:n.color,borderLeftColor:n.color,borderWidth:n.px,borderTopWidth:n.px,borderRightWidth:n.px,borderBottomWidth:n.px,borderLeftWidth:n.px,borderRadius:n.px,radius:n.px,borderTopLeftRadius:n.px,borderTopRightRadius:n.px,borderBottomRightRadius:n.px,borderBottomLeftRadius:n.px,width:n.px,maxWidth:n.px,height:n.px,maxHeight:n.px,size:n.px,top:n.px,right:n.px,bottom:n.px,left:n.px,padding:n.px,paddingTop:n.px,paddingRight:n.px,paddingBottom:n.px,paddingLeft:n.px,margin:n.px,marginTop:n.px,marginRight:n.px,marginBottom:n.px,marginLeft:n.px,rotate:n.degrees,rotateX:n.degrees,rotateY:n.degrees,rotateZ:n.degrees,scale:n.scale,scaleX:n.scale,scaleY:n.scale,scaleZ:n.scale,skew:n.degrees,skewX:n.degrees,skewY:n.degrees,distance:n.px,translateX:n.px,translateY:n.px,translateZ:n.px,x:n.px,y:n.px,z:n.px,perspective:n.px,opacity:n.alpha,originX:n.progressPercentage,originY:n.progressPercentage,originZ:n.px,zIndex:S,fillOpacity:n.alpha,strokeOpacity:n.alpha,numOctaves:S},T=function(e){return O[e]},k=function(e,r){return r&&"number"==typeof e?r.transform(e):e},C="scrollLeft",R="scrollTop",L=new Set([C,R]),X=new Set([C,R,"transform"]),Y={x:"translateX",y:"translateY",z:"translateZ"};function _(e){return"function"==typeof e}function A(e,r,t,n,o,a,i,s){void 0===r&&(r=!0),void 0===t&&(t={}),void 0===n&&(n={}),void 0===o&&(o={}),void 0===a&&(a=[]),void 0===i&&(i=!1),void 0===s&&(s=!0);var d,l=!0,u=!1,f=!1;for(var c in e){var p=e[c],v=T(c),g=k(p,v);m(c)?(u=!0,n[c]=g,a.push(c),l&&(v.default&&p!==v.default||!v.default&&0!==p)&&(l=!1)):(d=c,w.has(d)?(o[c]=g,f=!0):X.has(c)&&_(g)||(t[h(c,i)]=g))}return!u&&"function"!=typeof e.transform||(t.transform=function(e,r,t,n,o,a){void 0===a&&(a=!0);var i="",s=!1;t.sort(x);for(var d=t.length,l=0;l<d;l++){var u=t[l];i+=(Y[u]||u)+"("+r[u]+") ",s="z"===u||s}return!s&&o?i+="translateZ(0)":i=i.trim(),_(e.transform)?i=e.transform(r,n?"":i):a&&n&&(i="none"),i}(e,n,a,l,r,s)),f&&(t.transformOrigin=(o.originX||"50%")+" "+(o.originY||"50%")+" "+(o.originZ||0)),t}function B(e){var r=void 0===e?{}:e,t=r.enableHardwareAcceleration,n=void 0===t||t,o=r.isDashCase,a=void 0===o||o,i=r.allowTransformNone,s=void 0===i||i,d={},l={},u={},f=[];return function(e){return f.length=0,A(e,n,d,l,u,f,a,s),d}}var P=r({onRead:function(e,r){var t=r.element,n=r.preparseOutput,o=T(e);if(m(e))return o&&o.default||0;if(L.has(e))return t[e];var a=window.getComputedStyle(t,null).getPropertyValue(h(e,!0))||0;return n&&o&&o.test(a)&&o.parse?o.parse(a):a},onRender:function(e,r,t){var n=r.element,o=r.buildStyles,a=r.hasCSSVariable;if(Object.assign(n.style,o(e)),a)for(var i=t.length,s=0;s<i;s++){var d=t[s];d.startsWith("--")&&n.style.setProperty(d,e[d])}-1!==t.indexOf(C)&&(n[C]=e[C]),-1!==t.indexOf(R)&&(n[R]=e[R])},uncachedValues:L});var W=new Set(["baseFrequency","diffuseConstant","kernelMatrix","kernelUnitLength","keySplines","keyTimes","limitingConeAngle","markerHeight","markerWidth","numOctaves","targetX","targetY","surfaceScale","specularConstant","specularExponent","stdDeviation","tableValues"]),V=.5,Z=function(){return{style:{}}},H=function(e,r){return n.px.transform(e*r)},M={x:0,y:0,width:0,height:0};function z(e,r,t){return"string"==typeof e?e:n.px.transform(r+t*e)}var E={enableHardwareAcceleration:!1,isDashCase:!1};function N(e,r,t,n,o,a){void 0===r&&(r=M),void 0===n&&(n=B(E)),void 0===o&&(o=Z()),void 0===a&&(a=!0);var i,s,d=e.attrX,l=e.attrY,u=e.originX,f=e.originY,c=e.pathLength,p=e.pathSpacing,v=void 0===p?1:p,g=e.pathOffset,h=void 0===g?0:g,m=n(y.__rest(e,["attrX","attrY","originX","originY","pathLength","pathSpacing","pathOffset"]));for(var x in m){if("transform"===x)o.style.transform=m[x];else o[a&&!W.has(x)?b(x):x]=m[x]}return void 0===u&&void 0===f&&!m.transform||(o.style.transformOrigin=(s=void 0!==f?f:V,z(void 0!==u?u:V,(i=r).x,i.width)+" "+z(s,i.y,i.height))),void 0!==d&&(o.x=d),void 0!==l&&(o.y=l),void 0!==t&&void 0!==c&&(o[a?"stroke-dashoffset":"strokeDashoffset"]=H(-h,t),o[a?"stroke-dasharray":"strokeDasharray"]=H(c,t)+" "+H(v,t)),o}function q(e){var r=function(e){try{return"function"==typeof(r=e).getBBox?r.getBBox():r.getBoundingClientRect()}catch(e){return{x:0,y:0,width:0,height:0}}var r}(e),t="path"===e.tagName&&e.getTotalLength?e.getTotalLength():void 0;return j({element:e,buildAttrs:function(r,t,n){void 0===n&&(n=!0);var o=Z(),a=B(E);return function(e){return N(e,r,t,a,o,n)}}(r,t)})}function D(e,r){var t,n,o;return e===window?t=G(e):(o=e)instanceof HTMLElement||"function"==typeof o.click?t=function(e,r){void 0===r&&(r={});var t=r.enableHardwareAcceleration,n=r.allowTransformNone,o=y.__rest(r,["enableHardwareAcceleration","allowTransformNone"]);return P(y.__assign({element:e,buildStyles:B({enableHardwareAcceleration:t,allowTransformNone:n}),preparseOutput:!0},o))}(e,r):((n=e)instanceof SVGElement||"ownerSVGElement"in n)&&(t=q(e)),a.invariant(void 0!==t,"No valid node provided. Node must be HTMLElement, SVGElement or window."),F.set(e,t),t}var j=r({onRead:function(e,r){var t=r.element;if(m(e=W.has(e)?e:b(e))){var n=T(e);return n&&n.default||0}return t.getAttribute(e)},onRender:function(e,r){var t=r.element,n=(0,r.buildAttrs)(e);for(var o in n)"style"===o?Object.assign(t.style,n.style):t.setAttribute(o,n[o])}}),G=r({useCache:!1,onRead:function(e){return"scrollTop"===e?window.pageYOffset:window.pageXOffset},onRender:function(e){var r=e.scrollTop,t=void 0===r?0:r,n=e.scrollLeft,o=void 0===n?0:n;return window.scrollTo(o,t)}}),F=new WeakMap;e.buildSVGAttrs=N,e.buildStyleProperty=A,e.createStylerFactory=r,e.default=function(e,r){var t,n,o="string"==typeof e?document.querySelector(e):e;return t=o,n=r,F.has(t)?F.get(t):D(t,n)},e.isTransformProp=m,e.transformProps=v,Object.defineProperty(e,"__esModule",{value:!0})});

lib/css/build-styles.d.ts

 import { State, ResolvedState } from '../styler/types';
-declare function buildStyleProperty(state: State, enableHardwareAcceleration?: boolean, styles?: ResolvedState, transform?: ResolvedState, transformOrigin?: ResolvedState, transformKeys?: string[], isDashCase?: boolean): ResolvedState;
-declare function createStyleBuilder(enableHardwareAcceleration?: boolean, isDashCase?: boolean): (state: State) => ResolvedState;
+declare function buildStyleProperty(state: State, enableHardwareAcceleration?: boolean, styles?: ResolvedState, transform?: ResolvedState, transformOrigin?: ResolvedState, transformKeys?: string[], isDashCase?: boolean, allowTransformNone?: boolean): ResolvedState;
+declare function createStyleBuilder({ enableHardwareAcceleration, isDashCase, allowTransformNone }?: {
+    enableHardwareAcceleration?: boolean;
+    isDashCase?: boolean;
+    allowTransformNone?: boolean;
+}): (state: State) => ResolvedState;
 export { buildStyleProperty, createStyleBuilder };

lib/css/index.d.ts

@@ -5,2 +5,3 @@ import { Styler, ResolvedState, State } from '../styler/types';
     preparseOutput?: boolean;
+    allowTransformNone?: boolean;
 };
@@ -13,3 +14,3 @@ export declare type CssStylerOptions = {
 };
-export default function createCssStyler(element: HTMLElement, { enableHardwareAcceleration, ...props }?: Props): Styler;
+export default function createCssStyler(element: HTMLElement, { enableHardwareAcceleration, allowTransformNone, ...props }?: Props): Styler;
 export {};

lib/index.js

@@ -223,3 +223,4 @@ 'use strict';
 }
-function buildTransform(state, transform, transformKeys, transformIsDefault, enableHardwareAcceleration) {
+function buildTransform(state, transform, transformKeys, transformIsDefault, enableHardwareAcceleration, allowTransformNone) {
+    if (allowTransformNone === void 0) { allowTransformNone = true; }
     var transformString = '';
@@ -243,3 +244,3 @@ var transformHasZ = false;
     }
-    else if (transformIsDefault) {
+    else if (allowTransformNone && transformIsDefault) {
         transformString = 'none';
@@ -249,3 +250,3 @@ }
 }
-function buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, isDashCase) {
+function buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, isDashCase, allowTransformNone) {
     if (enableHardwareAcceleration === void 0) { enableHardwareAcceleration = true; }
@@ -257,2 +258,3 @@ if (styles === void 0) { styles = {}; }
     if (isDashCase === void 0) { isDashCase = false; }
+    if (allowTransformNone === void 0) { allowTransformNone = true; }
     var transformIsDefault = true;
@@ -285,3 +287,3 @@ var hasTransform = false;
     if (hasTransform || typeof state.transform === 'function') {
-        styles.transform = buildTransform(state, transform, transformKeys, transformIsDefault, enableHardwareAcceleration);
+        styles.transform = buildTransform(state, transform, transformKeys, transformIsDefault, enableHardwareAcceleration, allowTransformNone);
     }
@@ -295,5 +297,4 @@ if (hasTransformOrigin) {
 }
-function createStyleBuilder(enableHardwareAcceleration, isDashCase) {
-    if (enableHardwareAcceleration === void 0) { enableHardwareAcceleration = true; }
-    if (isDashCase === void 0) { isDashCase = true; }
+function createStyleBuilder(_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.enableHardwareAcceleration, enableHardwareAcceleration = _c === void 0 ? true : _c, _d = _b.isDashCase, isDashCase = _d === void 0 ? true : _d, _e = _b.allowTransformNone, allowTransformNone = _e === void 0 ? true : _e;
     var styles = {};
@@ -305,3 +306,3 @@ var transform = {};
         transformKeys.length = 0;
-        buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, isDashCase);
+        buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, isDashCase, allowTransformNone);
         return styles;
@@ -358,4 +359,7 @@ };
     if (_a === void 0) { _a = {}; }
-    var enableHardwareAcceleration = _a.enableHardwareAcceleration, props = tslib.__rest(_a, ["enableHardwareAcceleration"]);
-    return cssStyler(tslib.__assign({ element: element, buildStyles: createStyleBuilder(enableHardwareAcceleration), preparseOutput: true }, props));
+    var enableHardwareAcceleration = _a.enableHardwareAcceleration, allowTransformNone = _a.allowTransformNone, props = tslib.__rest(_a, ["enableHardwareAcceleration", "allowTransformNone"]);
+    return cssStyler(tslib.__assign({ element: element, buildStyles: createStyleBuilder({
+            enableHardwareAcceleration: enableHardwareAcceleration,
+            allowTransformNone: allowTransformNone
+        }), preparseOutput: true }, props));
 }
@@ -399,5 +403,9 @@
 }
+var svgStyleConfig = {
+    enableHardwareAcceleration: false,
+    isDashCase: false
+};
 function buildSVGAttrs(_a, dimensions, totalPathLength, cssBuilder, attrs, isDashCase) {
     if (dimensions === void 0) { dimensions = unmeasured; }
-    if (cssBuilder === void 0) { cssBuilder = createStyleBuilder(false, false); }
+    if (cssBuilder === void 0) { cssBuilder = createStyleBuilder(svgStyleConfig); }
     if (attrs === void 0) { attrs = svgAttrsTemplate(); }
@@ -432,3 +440,3 @@ if (isDashCase === void 0) { isDashCase = true; }
     var attrs = svgAttrsTemplate();
-    var cssBuilder = createStyleBuilder(false, false);
+    var cssBuilder = createStyleBuilder(svgStyleConfig);
     return function (state) {
@@ -435,0 +443,0 @@ return buildSVGAttrs(state, dimensions, totalPathLength, cssBuilder, attrs, isDashCase);

package.json

 {
   "name": "stylefire",
-  "version": "7.0.2",
+  "version": "7.0.3",
   "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

91160

increased by3.04%

Lines of code

1844

increased by2.33%

No dependency changes