Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
stylefire - npm Package Compare versions
Comparing version 2.3.2 to 2.3.3
@@ -5,2 +5,9 @@ # Changelog | ||
| ## [2.3.3] 2018-12-07 | ||
| ### Added | ||
| - Moving from `cssText` to `Object.assign(element.style)` - around 2x faster. | ||
| - `transform` can now be set as a function to return a custom transform order. This is currently undocumented behaviour. | ||
| ## [2.3.2] 2018-11-27 | ||
@@ -7,0 +14,0 @@ |
@@ -34,8 +34,6 @@ import sync from 'framesync'; | ||
| onRender = _a.onRender, | ||
| _b = _a.aliasMap, | ||
| aliasMap = _b === void 0 ? {} : _b, | ||
| _c = _a.uncachedValues, | ||
| uncachedValues = _c === void 0 ? new Set() : _c, | ||
| _d = _a.useCache, | ||
| useCache = _d === void 0 ? true : _d; | ||
| _b = _a.uncachedValues, | ||
| uncachedValues = _b === void 0 ? new Set() : _b, | ||
| _c = _a.useCache, | ||
| useCache = _c === void 0 ? true : _c; | ||
| return function (props) { | ||
@@ -45,4 +43,3 @@ var state = {}; | ||
| var hasChanged = false; | ||
| var setValue = function (unmappedKey, value) { | ||
| var key = aliasMap[unmappedKey] || unmappedKey; | ||
| var setValue = function (key, value) { | ||
| var currentValue = state[key]; | ||
@@ -72,4 +69,3 @@ state[key] = value; | ||
| return { | ||
| get: function (unmappedKey) { | ||
| var key = aliasMap[unmappedKey] || unmappedKey; | ||
| get: function (key) { | ||
| return key ? useCache && !uncachedValues.has(key) && state[key] !== undefined ? state[key] : onRead(key, props) : state; | ||
@@ -147,5 +143,3 @@ }, | ||
| var axes = ['', 'X', 'Y', 'Z']; | ||
| var order = ['translate', 'scale', 'rotate', 'skew', 'transformPerspective']; | ||
| var TRANSFORM_ORIGIN_X = 'transformOriginX'; | ||
| var TRANSFORM_ORIGIN_Y = 'transformOriginY'; | ||
| var order = ['scale', 'rotate', 'skew', 'transformPerspective']; | ||
| var transformProps = /*#__PURE__*/order.reduce(function (acc, key) { | ||
@@ -168,3 +162,3 @@ return axes.reduce(function (axesAcc, axesKey) { | ||
| var isTransformOriginProp = function (key) { | ||
| return key === TRANSFORM_ORIGIN_X || key === TRANSFORM_ORIGIN_Y; | ||
| return key === 'originX' || key === 'originY'; | ||
| }; | ||
@@ -223,10 +217,10 @@ | ||
| distance: px, | ||
| translateX: px, | ||
| translateY: px, | ||
| translateZ: px, | ||
| x: px, | ||
| y: px, | ||
| z: px, | ||
| perspective: px, | ||
| opacity: alpha, | ||
| transformOriginX: percent, | ||
| transformOriginY: percent, | ||
| transformOriginZ: px | ||
| originX: percent, | ||
| originY: percent, | ||
| originZ: px | ||
| }; | ||
@@ -241,14 +235,10 @@ var getValueType = function (key) { | ||
| var blacklist = /*#__PURE__*/new Set([SCROLL_LEFT, SCROLL_TOP, 'transform']); | ||
| var aliasMap = { | ||
| x: 'translateX', | ||
| y: 'translateY', | ||
| z: 'translateZ', | ||
| originX: 'transformOriginX', | ||
| originY: 'transformOriginY', | ||
| originZ: 'transformOriginZ', | ||
| scrollX: SCROLL_LEFT, | ||
| scrollY: SCROLL_TOP | ||
| z: 'translateZ' | ||
| }; | ||
| var styleRule = function (key, value) { | ||
| return ";" + prefixer(key, true) + ":" + value; | ||
| var isCustomTemplate = function (v) { | ||
| return typeof v === 'function'; | ||
| }; | ||
@@ -272,9 +262,10 @@ var buildStyleProperty = function (state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys) { | ||
| var transformIsDefault = true; | ||
| var hasTransform = false; | ||
| var hasTransformOrigin = false; | ||
| for (var k in state) { | ||
| var key = aliasMap[k] ? aliasMap[k] : k; | ||
| var value = state[k]; | ||
| for (var key in state) { | ||
| var value = state[key]; | ||
| var valueType = getValueType(key); | ||
| var valueAsType = typeof value === 'number' && valueType ? valueType.transform(value) : value; | ||
| if (isTransformProp(key)) { | ||
| hasTransform = true; | ||
| transform[key] = valueAsType; | ||
@@ -290,4 +281,4 @@ transformKeys.push(key); | ||
| hasTransformOrigin = true; | ||
| } else if (!scrollKeys.has(key)) { | ||
| styles[key] = valueAsType; | ||
| } else if (!blacklist.has(key) || !isCustomTemplate(valueAsType)) { | ||
| styles[prefixer(key, true)] = valueAsType; | ||
| } | ||
@@ -297,28 +288,31 @@ } | ||
| var transformString = ''; | ||
| var transformHasZ = false; | ||
| transformKeys.sort(sortTransformProps); | ||
| var numTransformKeys = transformKeys.length; | ||
| for (var i = 0; i < numTransformKeys; i++) { | ||
| var key = transformKeys[i]; | ||
| transformString += key + "(" + transform[key] + ") "; | ||
| transformHasZ = key === 'z' ? true : transformHasZ; | ||
| 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)'; | ||
| } | ||
| } | ||
| if (!transformHasZ && enableHardwareAcceleration) { | ||
| transformString += 'translateZ(0)'; | ||
| } | ||
| styles.transform = transformString; | ||
| } else { | ||
| } else if (hasTransform) { | ||
| styles.transform = 'none'; | ||
| } | ||
| if (hasTransformOrigin) { | ||
| styles.transformOrigin = (transformOrigin.transformOriginX || 0) + " " + (transformOrigin.transformOriginY || 0) + " " + (transformOrigin.transformOriginZ || 0); | ||
| styles.transformOrigin = (transformOrigin.originX || 0) + " " + (transformOrigin.originY || 0) + " " + (transformOrigin.originZ || 0); | ||
| } | ||
| return styles; | ||
| }; | ||
| var buildStyleString = function (enableHardwareAcceleration) { | ||
| var createStyleBuilder = function (enableHardwareAcceleration) { | ||
| if (enableHardwareAcceleration === void 0) { | ||
| enableHardwareAcceleration = true; | ||
| } | ||
| var next = {}; | ||
| var prev = {}; | ||
| var styles = {}; | ||
| var transform = {}; | ||
@@ -328,14 +322,5 @@ var transformOrigin = {}; | ||
| return function (state) { | ||
| var _a; | ||
| var style = ''; | ||
| transformKeys.length = 0; | ||
| next = buildStyleProperty(state, enableHardwareAcceleration, next, transform, transformOrigin, transformKeys); | ||
| for (var key in next) { | ||
| var value = next[key]; | ||
| if (value !== prev[key]) { | ||
| style += styleRule(key, value); | ||
| } | ||
| } | ||
| _a = [prev, next], next = _a[0], prev = _a[1]; | ||
| return style; | ||
| buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys); | ||
| return styles; | ||
| }; | ||
@@ -361,11 +346,10 @@ }; | ||
| buildStyles = _a.buildStyles; | ||
| element.style.cssText += buildStyles(state); | ||
| Object.assign(element.style, buildStyles(state)); | ||
| if (changedValues.indexOf(SCROLL_LEFT) !== -1) element.scrollLeft = state.scrollLeft; | ||
| if (changedValues.indexOf(SCROLL_TOP) !== -1) element.scrollTop = state.scrollTop; | ||
| }, | ||
| aliasMap: aliasMap, | ||
| uncachedValues: scrollKeys | ||
| }); | ||
| var css = function (element, props) { | ||
| return cssStyler(__assign({ element: element, buildStyles: buildStyleString(), preparseOutput: true }, props)); | ||
| return cssStyler(__assign({ element: element, buildStyles: createStyleBuilder(), preparseOutput: true }, props)); | ||
| }; | ||
@@ -394,3 +378,3 @@ | ||
| var transform = { | ||
| translate: "translate(" + state.translateX + ", " + state.translateY + ") ", | ||
| translate: "translate(" + state.x + ", " + state.y + ") ", | ||
| scale: "translate(" + scaleTransformX + ", " + scaleTransformY + ") scale(" + scale$$1 + ", " + scaleY + ") translate(" + scaleReplaceX + ", " + scaleReplaceY + ") ", | ||
@@ -455,3 +439,3 @@ rotate: "rotate(" + state.rotate + ", " + transformOriginX + ", " + transformOriginY + ") ", | ||
| }, | ||
| onRender: function (state, _a, changedValues) { | ||
| onRender: function (state, _a) { | ||
| var dimensions = _a.dimensions, | ||
@@ -462,11 +446,6 @@ element = _a.element, | ||
| setDomAttrs(element, build(state, dimensions, isPath, pathLength)); | ||
| }, | ||
| aliasMap: { | ||
| x: 'translateX', | ||
| y: 'translateY', | ||
| background: 'fill' | ||
| } | ||
| }); | ||
| var svg = function (element) { | ||
| var _a = element.getBBox(), | ||
| var _a = typeof element.getBBox === 'function' ? element.getBBox() : element.getBoundingClientRect(), | ||
| x = _a.x, | ||
@@ -473,0 +452,0 @@ y = _a.y, |
@@ -175,3 +175,3 @@ (function (global, factory) { | ||
| var createStyler = function (_a) { | ||
| var onRead = _a.onRead, onRender = _a.onRender, _b = _a.aliasMap, aliasMap = _b === void 0 ? {} : _b, _c = _a.uncachedValues, uncachedValues = _c === void 0 ? new Set() : _c, _d = _a.useCache, useCache = _d === void 0 ? true : _d; | ||
| var onRead = _a.onRead, onRender = _a.onRender, _b = _a.uncachedValues, uncachedValues = _b === void 0 ? new Set() : _b, _c = _a.useCache, useCache = _c === void 0 ? true : _c; | ||
| return function (props) { | ||
@@ -181,4 +181,3 @@ var state = {}; | ||
| var hasChanged = false; | ||
| var setValue = function (unmappedKey, value) { | ||
| var key = aliasMap[unmappedKey] || unmappedKey; | ||
| var setValue = function (key, value) { | ||
| var currentValue = state[key]; | ||
@@ -206,4 +205,3 @@ state[key] = value; | ||
| return { | ||
| get: function (unmappedKey) { | ||
| var key = aliasMap[unmappedKey] || unmappedKey; | ||
| get: function (key) { | ||
| return key | ||
@@ -282,5 +280,3 @@ ? useCache && !uncachedValues.has(key) && state[key] !== undefined | ||
| var axes = ['', 'X', 'Y', 'Z']; | ||
| var order = ['translate', 'scale', 'rotate', 'skew', 'transformPerspective']; | ||
| var TRANSFORM_ORIGIN_X = 'transformOriginX'; | ||
| var TRANSFORM_ORIGIN_Y = 'transformOriginY'; | ||
| var order = ['scale', 'rotate', 'skew', 'transformPerspective']; | ||
| var transformProps = order.reduce(function (acc, key) { | ||
@@ -296,5 +292,11 @@ return axes.reduce(function (axesAcc, axesKey) { | ||
| }, {}); | ||
| var isTransformProp = function (key) { return transformPropDictionary[key] === true; }; | ||
| var sortTransformProps = function (a, b) { return transformProps.indexOf(a) - transformProps.indexOf(b); }; | ||
| var isTransformOriginProp = function (key) { return key === TRANSFORM_ORIGIN_X || key === TRANSFORM_ORIGIN_Y; }; | ||
| var isTransformProp = function (key) { | ||
| return transformPropDictionary[key] === true; | ||
| }; | ||
| var sortTransformProps = function (a, b) { | ||
| return transformProps.indexOf(a) - transformProps.indexOf(b); | ||
| }; | ||
| var isTransformOriginProp = function (key) { | ||
| return key === 'originX' || key === 'originY'; | ||
| }; | ||
@@ -520,10 +522,10 @@ /*! ***************************************************************************** | ||
| distance: px, | ||
| translateX: px, | ||
| translateY: px, | ||
| translateZ: px, | ||
| x: px, | ||
| y: px, | ||
| z: px, | ||
| perspective: px, | ||
| opacity: alpha, | ||
| transformOriginX: percent, | ||
| transformOriginY: percent, | ||
| transformOriginZ: px | ||
| originX: percent, | ||
| originY: percent, | ||
| originZ: px | ||
| }; | ||
@@ -536,14 +538,10 @@ var getValueType = (function (key) { return valueTypes[key]; }); | ||
| var blacklist = new Set([SCROLL_LEFT, SCROLL_TOP, 'transform']); | ||
| var aliasMap = { | ||
| x: 'translateX', | ||
| y: 'translateY', | ||
| z: 'translateZ', | ||
| originX: 'transformOriginX', | ||
| originY: 'transformOriginY', | ||
| originZ: 'transformOriginZ', | ||
| scrollX: SCROLL_LEFT, | ||
| scrollY: SCROLL_TOP | ||
| z: 'translateZ' | ||
| }; | ||
| var styleRule = function (key, value) { | ||
| return ";" + prefixer(key, true) + ":" + value; | ||
| var isCustomTemplate = function (v) { | ||
| return typeof v === 'function'; | ||
| }; | ||
@@ -557,6 +555,6 @@ var buildStyleProperty = function (state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys) { | ||
| var transformIsDefault = true; | ||
| var hasTransform = false; | ||
| var hasTransformOrigin = false; | ||
| for (var k in state) { | ||
| var key = aliasMap[k] ? aliasMap[k] : k; | ||
| var value = state[k]; | ||
| for (var key in state) { | ||
| var value = state[key]; | ||
| var valueType = getValueType(key); | ||
@@ -567,2 +565,3 @@ var valueAsType = typeof value === 'number' && valueType | ||
| if (isTransformProp(key)) { | ||
| hasTransform = true; | ||
| transform[key] = valueAsType; | ||
@@ -581,4 +580,4 @@ transformKeys.push(key); | ||
| } | ||
| else if (!scrollKeys.has(key)) { | ||
| styles[key] = valueAsType; | ||
| else if (!blacklist.has(key) || !isCustomTemplate(valueAsType)) { | ||
| styles[prefixer(key, true)] = valueAsType; | ||
| } | ||
@@ -588,29 +587,32 @@ } | ||
| var transformString = ''; | ||
| var transformHasZ = false; | ||
| transformKeys.sort(sortTransformProps); | ||
| var numTransformKeys = transformKeys.length; | ||
| for (var i = 0; i < numTransformKeys; i++) { | ||
| var key = transformKeys[i]; | ||
| transformString += key + "(" + transform[key] + ") "; | ||
| transformHasZ = key === 'z' ? true : transformHasZ; | ||
| if (isCustomTemplate(state.transform)) { | ||
| transformString = state.transform(transform); | ||
| } | ||
| if (!transformHasZ && enableHardwareAcceleration) { | ||
| transformString += 'translateZ(0)'; | ||
| 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)'; | ||
| } | ||
| } | ||
| styles.transform = transformString; | ||
| } | ||
| else { | ||
| else if (hasTransform) { | ||
| styles.transform = 'none'; | ||
| } | ||
| if (hasTransformOrigin) { | ||
| styles.transformOrigin = (transformOrigin.transformOriginX || | ||
| 0) + " " + (transformOrigin.transformOriginY || | ||
| 0) + " " + (transformOrigin.transformOriginZ || 0); | ||
| styles.transformOrigin = (transformOrigin.originX || | ||
| 0) + " " + (transformOrigin.originY || 0) + " " + (transformOrigin.originZ || 0); | ||
| } | ||
| return styles; | ||
| }; | ||
| var buildStyleString = function (enableHardwareAcceleration) { | ||
| var createStyleBuilder = function (enableHardwareAcceleration) { | ||
| if (enableHardwareAcceleration === void 0) { enableHardwareAcceleration = true; } | ||
| var next = {}; | ||
| var prev = {}; | ||
| var styles = {}; | ||
| var transform = {}; | ||
@@ -620,14 +622,5 @@ var transformOrigin = {}; | ||
| return function (state) { | ||
| var _a; | ||
| var style = ''; | ||
| transformKeys.length = 0; | ||
| next = buildStyleProperty(state, enableHardwareAcceleration, next, transform, transformOrigin, transformKeys); | ||
| for (var key in next) { | ||
| var value = next[key]; | ||
| if (value !== prev[key]) { | ||
| style += styleRule(key, value); | ||
| } | ||
| } | ||
| _a = [prev, next], next = _a[0], prev = _a[1]; | ||
| return style; | ||
| buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys); | ||
| return styles; | ||
| }; | ||
@@ -657,3 +650,3 @@ }; | ||
| var element = _a.element, buildStyles = _a.buildStyles; | ||
| element.style.cssText += buildStyles(state); | ||
| Object.assign(element.style, buildStyles(state)); | ||
| if (changedValues.indexOf(SCROLL_LEFT) !== -1) | ||
@@ -664,7 +657,6 @@ element.scrollLeft = state.scrollLeft; | ||
| }, | ||
| aliasMap: aliasMap, | ||
| uncachedValues: scrollKeys | ||
| }); | ||
| var css = (function (element, props) { | ||
| return cssStyler(__assign({ element: element, buildStyles: buildStyleString(), preparseOutput: true }, props)); | ||
| return cssStyler(__assign({ element: element, buildStyles: createStyleBuilder(), preparseOutput: true }, props)); | ||
| }); | ||
@@ -697,3 +689,3 @@ | ||
| var transform = { | ||
| translate: "translate(" + state.translateX + ", " + state.translateY + ") ", | ||
| translate: "translate(" + state.x + ", " + state.y + ") ", | ||
| scale: "translate(" + scaleTransformX + ", " + scaleTransformY + ") scale(" + scale + ", " + scaleY + ") translate(" + scaleReplaceX + ", " + scaleReplaceY + ") ", | ||
@@ -763,14 +755,11 @@ rotate: "rotate(" + state.rotate + ", " + transformOriginX + ", " + transformOriginY + ") ", | ||
| }, | ||
| onRender: function (state, _a, changedValues) { | ||
| onRender: function (state, _a) { | ||
| var dimensions = _a.dimensions, element = _a.element, isPath = _a.isPath, pathLength = _a.pathLength; | ||
| setDomAttrs(element, build(state, dimensions, isPath, pathLength)); | ||
| }, | ||
| aliasMap: { | ||
| x: 'translateX', | ||
| y: 'translateY', | ||
| background: 'fill' | ||
| } | ||
| }); | ||
| var svg = (function (element) { | ||
| var _a = element.getBBox(), x = _a.x, y = _a.y, width = _a.width, height = _a.height; | ||
| var _a = typeof element.getBBox === 'function' | ||
| ? element.getBBox() | ||
| : element.getBoundingClientRect(), x = _a.x, y = _a.y, width = _a.width, height = _a.height; | ||
| var props = { | ||
@@ -777,0 +766,0 @@ element: element, |
@@ -1,1 +0,1 @@ | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.stylefire={})}(this,function(t){"use strict";var e=function(){return(e=Object.assign||function(t){for(var e,r=1,n=arguments.length;r<n;r++)for(var o in e=arguments[r])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)},r=function(){};"production"!==process.env.NODE_ENV&&(r=function(t,e){if(!t)throw new Error("Hey, listen! ".toUpperCase()+e)});var n,o=0,a="undefined"!=typeof window&&void 0!==window.requestAnimationFrame?function(t){return window.requestAnimationFrame(t)}:function(t){var e=Date.now(),r=Math.max(0,16.7-(e-o));o=e+r,setTimeout(function(){return t(o)},r)};!function(t){t.Read="read",t.Update="update",t.Render="render",t.PostRender="postRender",t.FixedUpdate="fixedUpdate"}(n||(n={}));var i,s=1/60*1e3,u=!0,f=!1,c=!1,l={delta:0,timestamp:0},d=[n.Read,n.Update,n.Render,n.PostRender],p=function(t){return f=t},h=d.reduce(function(t,e){var n,o,a,i,s,u,c,l,d,h=(n=p,o=[],a=[],i=0,s=!1,u=0,c=new WeakSet,l=new WeakSet,d={cancel:function(t){var e=a.indexOf(t);c.add(t),-1!==e&&a.splice(e,1)},process:function(t){var e,r;if(s=!0,o=(e=[a,o])[0],(a=e[1]).length=0,i=o.length)for(u=0;u<i;u++)(r=o[u])(t),!0!==l.has(r)||c.has(r)||(d.schedule(r),n(!0));s=!1},schedule:function(t,e,n){r("function"==typeof t,"Argument must be a function");var u=n&&s,f=u?o:a;e&&l.add(t),-1===f.indexOf(t)&&(f.push(t),u&&(i=o.length))}});return t.sync[e]=function(t,e,r){return void 0===e&&(e=!1),void 0===r&&(r=!1),f||b(),h.schedule(t,e,r),t},t.cancelSync[e]=function(t){return h.cancel(t)},t.steps[e]=h,t},{steps:{},sync:{},cancelSync:{}}),g=h.steps,m=h.sync,v=(h.cancelSync,function(t){return g[t].process(l)}),y=function(t){f=!1,l.delta=u?s:Math.max(Math.min(t-l.timestamp,40),1),u||(s=l.delta),l.timestamp=t,c=!0,d.forEach(v),c=!1,f&&(u=!1,a(y))},b=function(){f=!0,u=!0,c||a(y)},w=function(t){var e=t.onRead,r=t.onRender,n=t.aliasMap,o=void 0===n?{}:n,a=t.uncachedValues,i=void 0===a?new Set:a,s=t.useCache,u=void 0===s||s;return function(t){var n={},a=[],s=!1,f=function(t,e){var r=o[t]||t,i=n[r];n[r]=e,n[r]!==i&&(-1===a.indexOf(r)&&a.push(r),s||(s=!0,m.render(c)))};function c(e){return void 0===e&&(e=!1),(!0===e||s)&&(r(n,t,a),s=!1,a.length=0),this}return{get:function(r){var a=o[r]||r;return a?u&&!i.has(a)&&void 0!==n[a]?n[a]:e(a,t):n},set:function(t,e){if("string"==typeof t){if(void 0===e)return function(e){return f(t,e)};f(t,e)}else for(var r in t)t.hasOwnProperty(r)&&f(r,t[r]);return this},render:c}}},O=/([a-z])([A-Z])/g,x=function(t){return t.replace(O,"$1-$2").toLowerCase()},R=new Map,Y=new Map,k=["Webkit","Moz","O","ms",""],L=k.length,X="undefined"!=typeof document,T=function(t,e){return Y.set(t,x(e))},S=function(t,e){void 0===e&&(e=!1);var r=e?Y:R;return r.has(t)||(X?function(t){i=i||document.createElement("div");for(var e=0;e<L;e++){var r=k[e],n=""===r,o=n?t:r+t.charAt(0).toUpperCase()+t.slice(1);(o in i.style||n)&&(R.set(t,o),T(t,(n?"":"-")+x(o)))}}(t):function(t){T(t,t)}(t)),r.get(t)||t},M=["","X","Y","Z"],P=["translate","scale","rotate","skew","transformPerspective"].reduce(function(t,e){return M.reduce(function(t,r){return t.push(e+r),t},t)},["x","y","z"]),C=P.reduce(function(t,e){return t[e]=!0,t},{}),W=function(t){return!0===C[t]},Z=function(t,e){return P.indexOf(t)-P.indexOf(e)},E=function(t){return"transformOriginX"===t||"transformOriginY"===t},B=function(){return(B=Object.assign||function(t){for(var e,r=1,n=arguments.length;r<n;r++)for(var o in e=arguments[r])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)},F=function(t,e){return function(r){return Math.max(Math.min(r,e),t)}},A=function(t){return function(e){return"string"==typeof e&&0===e.indexOf(t)}},j=function(t){return t%1?Number(t.toFixed(5)):t},N={test:function(t){return"number"==typeof t},parse:parseFloat,transform:function(t){return t}},U=B({},N,{transform:F(0,1)}),V=B({},N,{default:1}),z=function(t){return{test:function(e){return"string"==typeof e&&e.endsWith(t)&&1===e.split(" ").length},parse:parseFloat,transform:function(e){return""+e+t}}},H=z("deg"),I=z("%"),q=z("px"),$=F(0,255),_=/^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))$/i,D=function(t){return void 0!==t.red},G=function(t){return void 0!==t.hue},J=function(t){var e=t.length;return function(r){if("string"!=typeof r)return r;for(var n,o={},a=function(t){return"string"==typeof t?t.split(/,\s*/):[t]}((n=r).substring(n.indexOf("(")+1,n.lastIndexOf(")"))),i=0;i<e;i++)o[t[i]]=void 0!==a[i]?parseFloat(a[i]):1;return o}},K=B({},N,{transform:function(t){return Math.round($(t))}}),Q=A("rgb"),tt={test:function(t){return"string"==typeof t?Q(t):D(t)},parse:J(["red","green","blue","alpha"]),transform:function(t){var e=t.red,r=t.green,n=t.blue,o=t.alpha;return function(t){var e=t.red,r=t.green,n=t.blue,o=t.alpha;return"rgba("+e+", "+r+", "+n+", "+(void 0===o?1:o)+")"}({red:K.transform(e),green:K.transform(r),blue:K.transform(n),alpha:j(o)})}},et=A("hsl"),rt={test:function(t){return"string"==typeof t?et(t):G(t)},parse:J(["hue","saturation","lightness","alpha"]),transform:function(t){var e=t.hue,r=t.saturation,n=t.lightness,o=t.alpha;return function(t){var e=t.hue,r=t.saturation,n=t.lightness,o=t.alpha;return"hsla("+e+", "+r+", "+n+", "+(void 0===o?1:o)+")"}({hue:Math.round(e),saturation:I.transform(j(r)),lightness:I.transform(j(n)),alpha:j(o)})}},nt=B({},tt,{test:A("#"),parse:function(t){var e="",r="",n="";return t.length>4?(e=t.substr(1,2),r=t.substr(3,2),n=t.substr(5,2)):(e=t.substr(1,1),r=t.substr(2,1),n=t.substr(3,1),e+=e,r+=r,n+=n),{red:parseInt(e,16),green:parseInt(r,16),blue:parseInt(n,16),alpha:1}}}),ot={test:function(t){return"string"==typeof t&&_.test(t)||tt.test(t)||rt.test(t)||nt.test(t)},parse:function(t){return tt.test(t)?tt.parse(t):rt.test(t)?rt.parse(t):nt.test(t)?nt.parse(t):t},transform:function(t){return D(t)?tt.transform(t):G(t)?rt.transform(t):t}},at={color:ot,backgroundColor:ot,outlineColor:ot,fill:ot,stroke:ot,borderColor:ot,borderTopColor:ot,borderRightColor:ot,borderBottomColor:ot,borderLeftColor:ot,borderWidth:q,borderTopWidth:q,borderRightWidth:q,borderBottomWidth:q,borderLeftWidth:q,borderRadius:q,borderTopLeftRadius:q,borderTopRightRadius:q,borderBottomRightRadius:q,borderBottomLeftRadius:q,width:q,maxWidth:q,height:q,maxHeight:q,top:q,right:q,bottom:q,left:q,padding:q,paddingTop:q,paddingRight:q,paddingBottom:q,paddingLeft:q,margin:q,marginTop:q,marginRight:q,marginBottom:q,marginLeft:q,rotate:H,rotateX:H,rotateY:H,rotateZ:H,scale:V,scaleX:V,scaleY:V,scaleZ:V,skew:H,skewX:H,skewY:H,distance:q,translateX:q,translateY:q,translateZ:q,perspective:q,opacity:U,transformOriginX:I,transformOriginY:I,transformOriginZ:q},it=function(t){return at[t]},st=new Set(["scrollLeft","scrollTop"]),ut={x:"translateX",y:"translateY",z:"translateZ",originX:"transformOriginX",originY:"transformOriginY",originZ:"transformOriginZ",scrollX:"scrollLeft",scrollY:"scrollTop"},ft=function(t,e){return";"+S(t,!0)+":"+e},ct=function(t,e,r,n,o,a){void 0===e&&(e=!0),void 0===r&&(r={}),void 0===n&&(n={}),void 0===o&&(o={}),void 0===a&&(a=[]);var i=!0,s=!1;for(var u in t){var f=ut[u]?ut[u]:u,c=t[u],l=it(f),d="number"==typeof c&&l?l.transform(c):c;W(f)?(n[f]=d,a.push(f),i&&(l.default&&c!==l.default||!l.default&&0!==c)&&(i=!1)):E(f)?(o[f]=d,s=!0):st.has(f)||(r[f]=d)}if(i)r.transform="none";else{var p="",h=!1;a.sort(Z);for(var g=a.length,m=0;m<g;m++){p+=(f=a[m])+"("+n[f]+") ",h="z"===f||h}!h&&e&&(p+="translateZ(0)"),r.transform=p}return s&&(r.transformOrigin=(o.transformOriginX||0)+" "+(o.transformOriginY||0)+" "+(o.transformOriginZ||0)),r},lt=w({onRead:function(t,e){var r=e.element,n=e.preparseOutput,o=it(t);if(W(t))return o&&o.default||0;if(st.has(t))return r[t];var a=window.getComputedStyle(r,null).getPropertyValue(S(t,!0))||0;return n&&o&&o.parse?o.parse(a):a},onRender:function(t,e,r){var n=e.element,o=e.buildStyles;n.style.cssText+=o(t),-1!==r.indexOf("scrollLeft")&&(n.scrollLeft=t.scrollLeft),-1!==r.indexOf("scrollTop")&&(n.scrollTop=t.scrollTop)},aliasMap:ut,uncachedValues:st}),dt=function(t,r){return lt(e({element:t,buildStyles:function(t){void 0===t&&(t=!0);var e={},r={},n={},o={},a=[];return function(i){var s,u="";for(var f in a.length=0,e=ct(i,t,e,n,o,a)){var c=e[f];c!==r[f]&&(u+=ft(f,c))}return e=(s=[r,e])[0],r=s[1],u}}(),preparseOutput:!0},r))},pt=function(t,e){return t/100*e+"px"},ht={fill:ot,stroke:ot,scale:V,scaleX:V,scaleY:V,opacity:U,fillOpacity:U,strokeOpacity:U},gt=w({onRead:function(t,e){var r=e.element;if(W(t)){var n=function(t){return ht[t]}(t);return n?n.default:0}return r.getAttribute(t)},onRender:function(t,e,r){var n=e.dimensions;!function(t,e){for(var r in e)e.hasOwnProperty(r)&&t.setAttribute(r,e[r])}(e.element,function(t,e,r,n){var o=!1,a=!1,i={},s=r?{pathLength:"0",pathSpacing:""+n}:void 0,u=void 0!==t.scale?t.scale||1e-7:t.scaleX||1,f=void 0!==t.scaleY?t.scaleY||1e-7:u||1,c=e.width*((t.originX||50)/100)+e.x,l=e.height*((t.originY||50)/100)+e.y,d=1*u*-c,p=1*f*-l,h=c/u,g=l/f,m={translate:"translate("+t.translateX+", "+t.translateY+") ",scale:"translate("+d+", "+p+") scale("+u+", "+f+") translate("+h+", "+g+") ",rotate:"rotate("+t.rotate+", "+c+", "+l+") ",skewX:"skewX("+t.skewX+") ",skewY:"skewY("+t.skewY+") "};for(var v in t)if(t.hasOwnProperty(v)){var y=t[v];W(v)?o=!0:!r||"pathLength"!==v&&"pathSpacing"!==v||"number"!=typeof y?r&&"pathOffset"===v?i["stroke-dashoffset"]=pt(-y,n):i[x(v)]=y:(a=!0,s[v]=pt(y,n))}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}(t,n,e.isPath,e.pathLength))},aliasMap:{x:"translateX",y:"translateY",background:"fill"}}),mt=w({useCache:!1,onRead:function(t){return"scrollTop"===t?window.pageYOffset:window.pageXOffset},onRender:function(t){var e=t.scrollTop,r=void 0===e?0:e,n=t.scrollLeft,o=void 0===n?0:n;return window.scrollTo(o,r)}}),vt=new WeakMap,yt=function(t,e){var n;return t instanceof HTMLElement?n=dt(t,e):t instanceof SVGElement?n=function(t){var e=t.getBBox(),r={element:t,dimensions:{x:e.x,y:e.y,width:e.width,height:e.height},isPath:!1};return"path"===t.tagName&&(r.isPath=!0,r.pathLength=t.getTotalLength()),gt(r)}(t):t===window&&(n=mt(t)),r(void 0!==n,"No valid node provided. Node must be HTMLElement, SVGElement or window."),vt.set(t,n),n},bt=function(t,e){return vt.has(t)?vt.get(t):yt(t,e)};t.default=function(t,e){var r="string"==typeof t?document.querySelector(t):t;return bt(r,e)},t.createStylerFactory=w,t.buildStyleProperty=ct,Object.defineProperty(t,"__esModule",{value:!0})}); | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.stylefire={})}(this,function(t){"use strict";var e=function(){return(e=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)},n=function(){};"production"!==process.env.NODE_ENV&&(n=function(t,e){if(!t)throw new Error("Hey, listen! ".toUpperCase()+e)});var r,o=0,a="undefined"!=typeof window&&void 0!==window.requestAnimationFrame?function(t){return window.requestAnimationFrame(t)}:function(t){var e=Date.now(),n=Math.max(0,16.7-(e-o));o=e+n,setTimeout(function(){return t(o)},n)};!function(t){t.Read="read",t.Update="update",t.Render="render",t.PostRender="postRender",t.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(t){return f=t},h=l.reduce(function(t,e){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(t){var e=a.indexOf(t);c.add(t),-1!==e&&a.splice(e,1)},process:function(t){var e,n;if(s=!0,o=(e=[a,o])[0],(a=e[1]).length=0,i=o.length)for(u=0;u<i;u++)(n=o[u])(t),!0!==d.has(n)||c.has(n)||(l.schedule(n),r(!0));s=!1},schedule:function(t,e,r){n("function"==typeof t,"Argument must be a function");var u=r&&s,f=u?o:a;e&&d.add(t),-1===f.indexOf(t)&&(f.push(t),u&&(i=o.length))}});return t.sync[e]=function(t,e,n){return void 0===e&&(e=!1),void 0===n&&(n=!1),f||b(),h.schedule(t,e,n),t},t.cancelSync[e]=function(t){return h.cancel(t)},t.steps[e]=h,t},{steps:{},sync:{},cancelSync:{}}),g=h.steps,m=h.sync,v=(h.cancelSync,function(t){return g[t].process(d)}),y=function(t){f=!1,d.delta=u?s:Math.max(Math.min(t-d.timestamp,40),1),u||(s=d.delta),d.timestamp=t,c=!0,l.forEach(v),c=!1,f&&(u=!1,a(y))},b=function(){f=!0,u=!0,c||a(y)},w=function(t){var e=t.onRead,n=t.onRender,r=t.uncachedValues,o=void 0===r?new Set:r,a=t.useCache,i=void 0===a||a;return function(t){var r={},a=[],s=!1,u=function(t,e){var n=r[t];r[t]=e,r[t]!==n&&(-1===a.indexOf(t)&&a.push(t),s||(s=!0,m.render(f)))};function f(e){return void 0===e&&(e=!1),(!0===e||s)&&(n(r,t,a),s=!1,a.length=0),this}return{get:function(n){return n?i&&!o.has(n)&&void 0!==r[n]?r[n]:e(n,t):r},set:function(t,e){if("string"==typeof t){if(void 0===e)return function(e){return u(t,e)};u(t,e)}else for(var n in t)t.hasOwnProperty(n)&&u(n,t[n]);return this},render:f}}},x=/([a-z])([A-Z])/g,O=function(t){return t.replace(x,"$1-$2").toLowerCase()},R=new Map,L=new Map,k=["Webkit","Moz","O","ms",""],S=k.length,T="undefined"!=typeof document,Y=function(t,e){return L.set(t,O(e))},P=function(t,e){void 0===e&&(e=!1);var n=e?L:R;return n.has(t)||(T?function(t){i=i||document.createElement("div");for(var e=0;e<S;e++){var n=k[e],r=""===n,o=r?t:n+t.charAt(0).toUpperCase()+t.slice(1);(o in i.style||r)&&(R.set(t,o),Y(t,(r?"":"-")+O(o)))}}(t):function(t){Y(t,t)}(t)),n.get(t)||t},X=["","X","Y","Z"],C=["scale","rotate","skew","transformPerspective"].reduce(function(t,e){return X.reduce(function(t,n){return t.push(e+n),t},t)},["x","y","z"]),M=C.reduce(function(t,e){return t[e]=!0,t},{}),B=function(t){return!0===M[t]},W=function(t,e){return C.indexOf(t)-C.indexOf(e)},E=function(t){return"originX"===t||"originY"===t},F=function(){return(F=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)},Z=function(t,e){return function(n){return Math.max(Math.min(n,e),t)}},j=function(t){return function(e){return"string"==typeof e&&0===e.indexOf(t)}},A=function(t){return t%1?Number(t.toFixed(5)):t},z={test:function(t){return"number"==typeof t},parse:parseFloat,transform:function(t){return t}},N=F({},z,{transform:Z(0,1)}),U=F({},z,{default:1}),V=function(t){return{test:function(e){return"string"==typeof e&&e.endsWith(t)&&1===e.split(" ").length},parse:parseFloat,transform:function(e){return""+e+t}}},H=V("deg"),I=V("%"),q=V("px"),$=Z(0,255),_=/^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))$/i,D=function(t){return void 0!==t.red},G=function(t){return void 0!==t.hue},J=function(t){var e=t.length;return function(n){if("string"!=typeof n)return n;for(var r,o={},a=function(t){return"string"==typeof t?t.split(/,\s*/):[t]}((r=n).substring(r.indexOf("(")+1,r.lastIndexOf(")"))),i=0;i<e;i++)o[t[i]]=void 0!==a[i]?parseFloat(a[i]):1;return o}},K=F({},z,{transform:function(t){return Math.round($(t))}}),Q=j("rgb"),tt={test:function(t){return"string"==typeof t?Q(t):D(t)},parse:J(["red","green","blue","alpha"]),transform:function(t){var e=t.red,n=t.green,r=t.blue,o=t.alpha;return function(t){var e=t.red,n=t.green,r=t.blue,o=t.alpha;return"rgba("+e+", "+n+", "+r+", "+(void 0===o?1:o)+")"}({red:K.transform(e),green:K.transform(n),blue:K.transform(r),alpha:A(o)})}},et=j("hsl"),nt={test:function(t){return"string"==typeof t?et(t):G(t)},parse:J(["hue","saturation","lightness","alpha"]),transform:function(t){var e=t.hue,n=t.saturation,r=t.lightness,o=t.alpha;return function(t){var e=t.hue,n=t.saturation,r=t.lightness,o=t.alpha;return"hsla("+e+", "+n+", "+r+", "+(void 0===o?1:o)+")"}({hue:Math.round(e),saturation:I.transform(A(n)),lightness:I.transform(A(r)),alpha:A(o)})}},rt=F({},tt,{test:j("#"),parse:function(t){var e="",n="",r="";return t.length>4?(e=t.substr(1,2),n=t.substr(3,2),r=t.substr(5,2)):(e=t.substr(1,1),n=t.substr(2,1),r=t.substr(3,1),e+=e,n+=n,r+=r),{red:parseInt(e,16),green:parseInt(n,16),blue:parseInt(r,16),alpha:1}}}),ot={test:function(t){return"string"==typeof t&&_.test(t)||tt.test(t)||nt.test(t)||rt.test(t)},parse:function(t){return tt.test(t)?tt.parse(t):nt.test(t)?nt.parse(t):rt.test(t)?rt.parse(t):t},transform:function(t){return D(t)?tt.transform(t):G(t)?nt.transform(t):t}},at={color:ot,backgroundColor:ot,outlineColor:ot,fill:ot,stroke:ot,borderColor:ot,borderTopColor:ot,borderRightColor:ot,borderBottomColor:ot,borderLeftColor:ot,borderWidth:q,borderTopWidth:q,borderRightWidth:q,borderBottomWidth:q,borderLeftWidth:q,borderRadius:q,borderTopLeftRadius:q,borderTopRightRadius:q,borderBottomRightRadius:q,borderBottomLeftRadius:q,width:q,maxWidth:q,height:q,maxHeight:q,top:q,right:q,bottom:q,left:q,padding:q,paddingTop:q,paddingRight:q,paddingBottom:q,paddingLeft:q,margin:q,marginTop:q,marginRight:q,marginBottom:q,marginLeft:q,rotate:H,rotateX:H,rotateY:H,rotateZ:H,scale:U,scaleX:U,scaleY:U,scaleZ:U,skew:H,skewX:H,skewY:H,distance:q,x:q,y:q,z:q,perspective:q,opacity:N,originX:I,originY:I,originZ:q},it=function(t){return at[t]},st=new Set(["scrollLeft","scrollTop"]),ut=new Set(["scrollLeft","scrollTop","transform"]),ft={x:"translateX",y:"translateY",z:"translateZ"},ct=function(t){return"function"==typeof t},dt=function(t,e,n,r,o,a){void 0===e&&(e=!0),void 0===n&&(n={}),void 0===r&&(r={}),void 0===o&&(o={}),void 0===a&&(a=[]);var i=!0,s=!1,u=!1;for(var f in t){var c=t[f],d=it(f),l="number"==typeof c&&d?d.transform(c):c;B(f)?(s=!0,r[f]=l,a.push(f),i&&(d.default&&c!==d.default||!d.default&&0!==c)&&(i=!1)):E(f)?(o[f]=l,u=!0):ut.has(f)&&ct(l)||(n[P(f,!0)]=l)}if(i)s&&(n.transform="none");else{var p="";if(ct(t.transform))p=t.transform(r);else{var h=!1;a.sort(W);for(var g=a.length,m=0;m<g;m++){f=a[m];p+=(ft[f]||f)+"("+r[f]+") ",h="z"===f||h}!h&&e&&(p+="translateZ(0)")}n.transform=p}return u&&(n.transformOrigin=(o.originX||0)+" "+(o.originY||0)+" "+(o.originZ||0)),n},lt=w({onRead:function(t,e){var n=e.element,r=e.preparseOutput,o=it(t);if(B(t))return o&&o.default||0;if(st.has(t))return n[t];var a=window.getComputedStyle(n,null).getPropertyValue(P(t,!0))||0;return r&&o&&o.parse?o.parse(a):a},onRender:function(t,e,n){var r=e.element,o=e.buildStyles;Object.assign(r.style,o(t)),-1!==n.indexOf("scrollLeft")&&(r.scrollLeft=t.scrollLeft),-1!==n.indexOf("scrollTop")&&(r.scrollTop=t.scrollTop)},uncachedValues:st}),pt=function(t,n){return lt(e({element:t,buildStyles:function(t){void 0===t&&(t=!0);var e={},n={},r={},o=[];return function(a){return o.length=0,dt(a,t,e,n,r,o),e}}(),preparseOutput:!0},n))},ht=function(t,e){return t/100*e+"px"},gt={fill:ot,stroke:ot,scale:U,scaleX:U,scaleY:U,opacity:N,fillOpacity:N,strokeOpacity:N},mt=w({onRead:function(t,e){var n=e.element;if(B(t)){var r=function(t){return gt[t]}(t);return r?r.default:0}return n.getAttribute(t)},onRender:function(t,e){var n=e.dimensions;!function(t,e){for(var n in e)e.hasOwnProperty(n)&&t.setAttribute(n,e[n])}(e.element,function(t,e,n,r){var o=!1,a=!1,i={},s=n?{pathLength:"0",pathSpacing:""+r}:void 0,u=void 0!==t.scale?t.scale||1e-7:t.scaleX||1,f=void 0!==t.scaleY?t.scaleY||1e-7:u||1,c=e.width*((t.originX||50)/100)+e.x,d=e.height*((t.originY||50)/100)+e.y,l=1*u*-c,p=1*f*-d,h=c/u,g=d/f,m={translate:"translate("+t.x+", "+t.y+") ",scale:"translate("+l+", "+p+") scale("+u+", "+f+") translate("+h+", "+g+") ",rotate:"rotate("+t.rotate+", "+c+", "+d+") ",skewX:"skewX("+t.skewX+") ",skewY:"skewY("+t.skewY+") "};for(var v in t)if(t.hasOwnProperty(v)){var y=t[v];B(v)?o=!0:!n||"pathLength"!==v&&"pathSpacing"!==v||"number"!=typeof y?n&&"pathOffset"===v?i["stroke-dashoffset"]=ht(-y,r):i[O(v)]=y:(a=!0,s[v]=ht(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}(t,n,e.isPath,e.pathLength))}}),vt=w({useCache:!1,onRead:function(t){return"scrollTop"===t?window.pageYOffset:window.pageXOffset},onRender:function(t){var e=t.scrollTop,n=void 0===e?0:e,r=t.scrollLeft,o=void 0===r?0:r;return window.scrollTo(o,n)}}),yt=new WeakMap,bt=function(t,e){var r;return t instanceof HTMLElement?r=pt(t,e):t instanceof SVGElement?r=function(t){var e="function"==typeof t.getBBox?t.getBBox():t.getBoundingClientRect(),n={element:t,dimensions:{x:e.x,y:e.y,width:e.width,height:e.height},isPath:!1};return"path"===t.tagName&&(n.isPath=!0,n.pathLength=t.getTotalLength()),mt(n)}(t):t===window&&(r=vt(t)),n(void 0!==r,"No valid node provided. Node must be HTMLElement, SVGElement or window."),yt.set(t,r),r},wt=function(t,e){return yt.has(t)?yt.get(t):bt(t,e)};t.default=function(t,e){var n="string"==typeof t?document.querySelector(t):t;return wt(n,e)},t.createStylerFactory=w,t.buildStyleProperty=dt,Object.defineProperty(t,"__esModule",{value:!0})}); |
@@ -1,8 +0,4 @@ | ||
| import { State } from '../styler/types'; | ||
| export declare type AliasMap = { | ||
| [key: string]: string; | ||
| }; | ||
| export declare const aliasMap: AliasMap; | ||
| declare const buildStyleProperty: (state: State, enableHardwareAcceleration?: boolean, styles?: State, transform?: State, transformOrigin?: State, transformKeys?: string[]) => State; | ||
| declare const buildStyleString: (enableHardwareAcceleration?: boolean) => (state: State) => string; | ||
| export { buildStyleProperty, buildStyleString }; | ||
| import { State, ResolvedState } from '../styler/types'; | ||
| declare const buildStyleProperty: (state: State, enableHardwareAcceleration?: boolean, styles?: ResolvedState, transform?: State, transformOrigin?: State, transformKeys?: string[]) => ResolvedState; | ||
| declare const createStyleBuilder: (enableHardwareAcceleration?: boolean) => (state: State) => ResolvedState; | ||
| export { buildStyleProperty, createStyleBuilder }; |
@@ -0,3 +1,4 @@ | ||
| export declare const transformProps: string[]; | ||
| export declare const isTransformProp: (key: string) => boolean; | ||
| export declare const sortTransformProps: (a: string, b: string) => number; | ||
| export declare const isTransformOriginProp: (key: string) => boolean; |
125
lib/index.js
@@ -38,3 +38,3 @@ 'use strict'; | ||
| var createStyler = function (_a) { | ||
| var onRead = _a.onRead, onRender = _a.onRender, _b = _a.aliasMap, aliasMap = _b === void 0 ? {} : _b, _c = _a.uncachedValues, uncachedValues = _c === void 0 ? new Set() : _c, _d = _a.useCache, useCache = _d === void 0 ? true : _d; | ||
| var onRead = _a.onRead, onRender = _a.onRender, _b = _a.uncachedValues, uncachedValues = _b === void 0 ? new Set() : _b, _c = _a.useCache, useCache = _c === void 0 ? true : _c; | ||
| return function (props) { | ||
@@ -44,4 +44,3 @@ var state = {}; | ||
| var hasChanged = false; | ||
| var setValue = function (unmappedKey, value) { | ||
| var key = aliasMap[unmappedKey] || unmappedKey; | ||
| var setValue = function (key, value) { | ||
| var currentValue = state[key]; | ||
@@ -69,4 +68,3 @@ state[key] = value; | ||
| return { | ||
| get: function (unmappedKey) { | ||
| var key = aliasMap[unmappedKey] || unmappedKey; | ||
| get: function (key) { | ||
| return key | ||
@@ -145,5 +143,3 @@ ? useCache && !uncachedValues.has(key) && state[key] !== undefined | ||
| var axes = ['', 'X', 'Y', 'Z']; | ||
| var order = ['translate', 'scale', 'rotate', 'skew', 'transformPerspective']; | ||
| var TRANSFORM_ORIGIN_X = 'transformOriginX'; | ||
| var TRANSFORM_ORIGIN_Y = 'transformOriginY'; | ||
| var order = ['scale', 'rotate', 'skew', 'transformPerspective']; | ||
| var transformProps = order.reduce(function (acc, key) { | ||
@@ -159,5 +155,11 @@ return axes.reduce(function (axesAcc, axesKey) { | ||
| }, {}); | ||
| var isTransformProp = function (key) { return transformPropDictionary[key] === true; }; | ||
| var sortTransformProps = function (a, b) { return transformProps.indexOf(a) - transformProps.indexOf(b); }; | ||
| var isTransformOriginProp = function (key) { return key === TRANSFORM_ORIGIN_X || key === TRANSFORM_ORIGIN_Y; }; | ||
| var isTransformProp = function (key) { | ||
| return transformPropDictionary[key] === true; | ||
| }; | ||
| var sortTransformProps = function (a, b) { | ||
| return transformProps.indexOf(a) - transformProps.indexOf(b); | ||
| }; | ||
| var isTransformOriginProp = function (key) { | ||
| return key === 'originX' || key === 'originY'; | ||
| }; | ||
@@ -215,10 +217,10 @@ var valueTypes = { | ||
| distance: styleValueTypes.px, | ||
| translateX: styleValueTypes.px, | ||
| translateY: styleValueTypes.px, | ||
| translateZ: styleValueTypes.px, | ||
| x: styleValueTypes.px, | ||
| y: styleValueTypes.px, | ||
| z: styleValueTypes.px, | ||
| perspective: styleValueTypes.px, | ||
| opacity: styleValueTypes.alpha, | ||
| transformOriginX: styleValueTypes.percent, | ||
| transformOriginY: styleValueTypes.percent, | ||
| transformOriginZ: styleValueTypes.px | ||
| originX: styleValueTypes.percent, | ||
| originY: styleValueTypes.percent, | ||
| originZ: styleValueTypes.px | ||
| }; | ||
@@ -231,14 +233,10 @@ var getValueType = (function (key) { return valueTypes[key]; }); | ||
| var blacklist = new Set([SCROLL_LEFT, SCROLL_TOP, 'transform']); | ||
| var aliasMap = { | ||
| x: 'translateX', | ||
| y: 'translateY', | ||
| z: 'translateZ', | ||
| originX: 'transformOriginX', | ||
| originY: 'transformOriginY', | ||
| originZ: 'transformOriginZ', | ||
| scrollX: SCROLL_LEFT, | ||
| scrollY: SCROLL_TOP | ||
| z: 'translateZ' | ||
| }; | ||
| var styleRule = function (key, value) { | ||
| return ";" + prefixer(key, true) + ":" + value; | ||
| var isCustomTemplate = function (v) { | ||
| return typeof v === 'function'; | ||
| }; | ||
@@ -252,6 +250,6 @@ var buildStyleProperty = function (state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys) { | ||
| var transformIsDefault = true; | ||
| var hasTransform = false; | ||
| var hasTransformOrigin = false; | ||
| for (var k in state) { | ||
| var key = aliasMap[k] ? aliasMap[k] : k; | ||
| var value = state[k]; | ||
| for (var key in state) { | ||
| var value = state[key]; | ||
| var valueType = getValueType(key); | ||
@@ -262,2 +260,3 @@ var valueAsType = typeof value === 'number' && valueType | ||
| if (isTransformProp(key)) { | ||
| hasTransform = true; | ||
| transform[key] = valueAsType; | ||
@@ -276,4 +275,4 @@ transformKeys.push(key); | ||
| } | ||
| else if (!scrollKeys.has(key)) { | ||
| styles[key] = valueAsType; | ||
| else if (!blacklist.has(key) || !isCustomTemplate(valueAsType)) { | ||
| styles[prefixer(key, true)] = valueAsType; | ||
| } | ||
@@ -283,29 +282,32 @@ } | ||
| var transformString = ''; | ||
| var transformHasZ = false; | ||
| transformKeys.sort(sortTransformProps); | ||
| var numTransformKeys = transformKeys.length; | ||
| for (var i = 0; i < numTransformKeys; i++) { | ||
| var key = transformKeys[i]; | ||
| transformString += key + "(" + transform[key] + ") "; | ||
| transformHasZ = key === 'z' ? true : transformHasZ; | ||
| if (isCustomTemplate(state.transform)) { | ||
| transformString = state.transform(transform); | ||
| } | ||
| if (!transformHasZ && enableHardwareAcceleration) { | ||
| transformString += 'translateZ(0)'; | ||
| 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)'; | ||
| } | ||
| } | ||
| styles.transform = transformString; | ||
| } | ||
| else { | ||
| else if (hasTransform) { | ||
| styles.transform = 'none'; | ||
| } | ||
| if (hasTransformOrigin) { | ||
| styles.transformOrigin = (transformOrigin.transformOriginX || | ||
| 0) + " " + (transformOrigin.transformOriginY || | ||
| 0) + " " + (transformOrigin.transformOriginZ || 0); | ||
| styles.transformOrigin = (transformOrigin.originX || | ||
| 0) + " " + (transformOrigin.originY || 0) + " " + (transformOrigin.originZ || 0); | ||
| } | ||
| return styles; | ||
| }; | ||
| var buildStyleString = function (enableHardwareAcceleration) { | ||
| var createStyleBuilder = function (enableHardwareAcceleration) { | ||
| if (enableHardwareAcceleration === void 0) { enableHardwareAcceleration = true; } | ||
| var next = {}; | ||
| var prev = {}; | ||
| var styles = {}; | ||
| var transform = {}; | ||
@@ -315,14 +317,5 @@ var transformOrigin = {}; | ||
| return function (state) { | ||
| var _a; | ||
| var style = ''; | ||
| transformKeys.length = 0; | ||
| next = buildStyleProperty(state, enableHardwareAcceleration, next, transform, transformOrigin, transformKeys); | ||
| for (var key in next) { | ||
| var value = next[key]; | ||
| if (value !== prev[key]) { | ||
| style += styleRule(key, value); | ||
| } | ||
| } | ||
| _a = [prev, next], next = _a[0], prev = _a[1]; | ||
| return style; | ||
| buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys); | ||
| return styles; | ||
| }; | ||
@@ -352,3 +345,3 @@ }; | ||
| var element = _a.element, buildStyles = _a.buildStyles; | ||
| element.style.cssText += buildStyles(state); | ||
| Object.assign(element.style, buildStyles(state)); | ||
| if (changedValues.indexOf(SCROLL_LEFT) !== -1) | ||
@@ -359,7 +352,6 @@ element.scrollLeft = state.scrollLeft; | ||
| }, | ||
| aliasMap: aliasMap, | ||
| uncachedValues: scrollKeys | ||
| }); | ||
| var css = (function (element, props) { | ||
| return cssStyler(__assign({ element: element, buildStyles: buildStyleString(), preparseOutput: true }, props)); | ||
| return cssStyler(__assign({ element: element, buildStyles: createStyleBuilder(), preparseOutput: true }, props)); | ||
| }); | ||
@@ -392,3 +384,3 @@ | ||
| var transform = { | ||
| translate: "translate(" + state.translateX + ", " + state.translateY + ") ", | ||
| translate: "translate(" + state.x + ", " + state.y + ") ", | ||
| scale: "translate(" + scaleTransformX + ", " + scaleTransformY + ") scale(" + scale + ", " + scaleY + ") translate(" + scaleReplaceX + ", " + scaleReplaceY + ") ", | ||
@@ -458,14 +450,11 @@ rotate: "rotate(" + state.rotate + ", " + transformOriginX + ", " + transformOriginY + ") ", | ||
| }, | ||
| onRender: function (state, _a, changedValues) { | ||
| onRender: function (state, _a) { | ||
| var dimensions = _a.dimensions, element = _a.element, isPath = _a.isPath, pathLength = _a.pathLength; | ||
| setDomAttrs(element, build(state, dimensions, isPath, pathLength)); | ||
| }, | ||
| aliasMap: { | ||
| x: 'translateX', | ||
| y: 'translateY', | ||
| background: 'fill' | ||
| } | ||
| }); | ||
| var svg = (function (element) { | ||
| var _a = element.getBBox(), x = _a.x, y = _a.y, width = _a.width, height = _a.height; | ||
| var _a = typeof element.getBBox === 'function' | ||
| ? element.getBBox() | ||
| : element.getBoundingClientRect(), x = _a.x, y = _a.y, width = _a.width, height = _a.height; | ||
| var props = { | ||
@@ -472,0 +461,0 @@ element: element, |
| import { Config, Props, Styler } from './types'; | ||
| declare const createStyler: ({ onRead, onRender, aliasMap, uncachedValues, useCache }: Config) => (props?: Props) => Styler; | ||
| declare const createStyler: ({ onRead, onRender, uncachedValues, useCache }: Config) => (props?: Props) => Styler; | ||
| export default createStyler; |
| export declare type State = { | ||
| [key: string]: string | number | CustomTemplate; | ||
| }; | ||
| export declare type ResolvedState = { | ||
| [key: string]: string | number; | ||
@@ -8,2 +11,3 @@ }; | ||
| export declare type ChangedValues = string[]; | ||
| export declare type CustomTemplate = (state: State) => string; | ||
| export declare type Config = { | ||
@@ -10,0 +14,0 @@ onRead: (key: string, props: Props) => any; |
| { | ||
| "name": "stylefire", | ||
| "version": "2.3.2", | ||
| "version": "2.3.3", | ||
| "description": "Performant, simplified stylers for CSS, SVG, path and DOM scroll.", | ||
@@ -48,2 +48,3 @@ "main": "lib/index.js", | ||
| "jest-cli": "^23.1.0", | ||
| "jest-dom": "^3.0.0", | ||
| "rollup": "^0.59.1", | ||
@@ -50,0 +51,0 @@ "rollup-plugin-node-resolve": "^3.3.0", |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-1.83%
89608
- Dev dependency count
- increased by7.14%
15
- Lines of code
- decreased by-2.25%
1867
No dependency changes