stylefire - npm Package Compare versions

Comparing version 7.0.1 to 7.0.2

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog
 
+## [7.0.2] 2020-01-24
+
+### Fixed
+
+- Stylefire now passes an empty string to `transform` if it's set to a template and all transform values are default. This removes `translateZ(0)` but allows for appending.
+
 ## [7.0.1] 2019-11-14
@@ -7,0 +13,0 @@

dist/stylefire.es.js

 import { __rest, __assign } from 'tslib';
 import sync from 'framesync';
-import { alpha, color, degrees, scale, px, progressPercentage, number } from 'style-value-types';
+import { number, color, px, degrees, scale, alpha, progressPercentage } from 'style-value-types';
 import { invariant } from 'hey-listen';
@@ -243,3 +243,3 @@
     if (isCustomTemplate(state.transform)) {
-        transformString = state.transform(transform, transformString);
+        transformString = state.transform(transform, transformIsDefault ? '' : transformString);
     } else if (transformIsDefault) {
@@ -500,10 +500,16 @@ transformString = 'none';
 var cache = /*#__PURE__*/new WeakMap();
+var isHTMLElement = function (node) {
+    return node instanceof HTMLElement || typeof node.click === 'function';
+};
+var isSVGElement = function (node) {
+    return node instanceof SVGElement || 'ownerSVGElement' in node;
+};
 var createDOMStyler = function (node, props) {
     var styler;
-    if (node instanceof HTMLElement) {
+    if (node === window) {
+        styler = viewport(node);
+    } else if (isHTMLElement(node)) {
         styler = createCssStyler(node, props);
-    } else if (node instanceof SVGElement) {
+    } else if (isSVGElement(node)) {
         styler = svg(node);
-    } else if (node === window) {
-        styler = viewport(node);
     }
@@ -523,2 +529,2 @@ invariant(styler !== undefined, 'No valid node provided. Node must be HTMLElement, SVGElement or window.');
 export default index;
-export { createStyler as createStylerFactory, buildStyleProperty, buildSVGAttrs, transformProps, isTransformProp };
+export { buildSVGAttrs, buildStyleProperty, createStyler as createStylerFactory, isTransformProp, transformProps };

dist/stylefire.js

 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-    typeof define === 'function' && define.amd ? define(['exports'], factory) :
-    (factory((global.stylefire = {})));
-}(this, (function (exports) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('tslib'), require('framesync'), require('style-value-types'), require('hey-listen')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'tslib', 'framesync', 'style-value-types', 'hey-listen'], factory) :
+  (global = global || self, factory(global.stylefire = {}, global.tslib, global.framesync, global.valueTypes, global.heyListen));
+}(this, (function (exports, tslib, sync, styleValueTypes, heyListen) { 'use strict';
 
-    /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation. All rights reserved.
-    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-    this file except in compliance with the License. You may obtain a copy of the
-    License at http://www.apache.org/licenses/LICENSE-2.0
+  sync = sync && sync.hasOwnProperty('default') ? sync['default'] : sync;
 
-    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-    MERCHANTABLITY OR NON-INFRINGEMENT.
+  var createStyler = function (_a) {
+      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 (_a) {
+          if (_a === void 0) { _a = {}; }
+          var props = tslib.__rest(_a, []);
+          var state = {};
+          var changedValues = [];
+          var hasChanged = false;
+          function setValue(key, value) {
+              if (key.startsWith('--')) {
+                  props.hasCSSVariable = true;
+              }
+              var currentValue = state[key];
+              state[key] = value;
+              if (state[key] === currentValue)
+                  return;
+              if (changedValues.indexOf(key) === -1) {
+                  changedValues.push(key);
+              }
+              if (!hasChanged) {
+                  hasChanged = true;
+                  sync.render(styler.render);
+              }
+          }
+          var styler = {
+              get: function (key, forceRead) {
+                  if (forceRead === void 0) { forceRead = false; }
+                  var useCached = !forceRead &&
+                      useCache &&
+                      !uncachedValues.has(key) &&
+                      state[key] !== undefined;
+                  return useCached ? state[key] : onRead(key, props);
+              },
+              set: function (values, value) {
+                  if (typeof values === 'string') {
+                      setValue(values, value);
+                  }
+                  else {
+                      for (var key in values) {
+                          setValue(key, values[key]);
+                      }
+                  }
+                  return this;
+              },
+              render: function (forceRender) {
+                  if (forceRender === void 0) { forceRender = false; }
+                  if (hasChanged || forceRender === true) {
+                      onRender(state, props, changedValues);
+                      hasChanged = false;
+                      changedValues.length = 0;
+                  }
+                  return this;
+              }
+          };
+          return styler;
+      };
+  };
 
-    See the Apache Version 2.0 License for specific language governing permissions
-    and limitations under the License.
-    ***************************************************************************** */
+  var CAMEL_CASE_PATTERN = /([a-z])([A-Z])/g;
+  var REPLACE_TEMPLATE = '$1-$2';
+  var camelToDash = function (str) {
+      return str.replace(CAMEL_CASE_PATTERN, REPLACE_TEMPLATE).toLowerCase();
+  };
 
-    var __assign = function() {
-        __assign = Object.assign || function __assign(t) {
-            for (var s, i = 1, n = arguments.length; i < n; i++) {
-                s = arguments[i];
-                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-            }
-            return t;
-        };
-        return __assign.apply(this, arguments);
-    };
+  var camelCache = new Map();
+  var dashCache = new Map();
+  var prefixes = ['Webkit', 'Moz', 'O', 'ms', ''];
+  var numPrefixes = prefixes.length;
+  var isBrowser = typeof document !== 'undefined';
+  var testElement;
+  var setDashPrefix = function (key, prefixed) {
+      return dashCache.set(key, camelToDash(prefixed));
+  };
+  var testPrefix = function (key) {
+      testElement = testElement || document.createElement('div');
+      for (var i = 0; i < numPrefixes; i++) {
+          var prefix = prefixes[i];
+          var noPrefix = prefix === '';
+          var prefixedPropertyName = noPrefix
+              ? key
+              : prefix + key.charAt(0).toUpperCase() + key.slice(1);
+          if (prefixedPropertyName in testElement.style || noPrefix) {
+              if (noPrefix && key === 'clipPath' && dashCache.has(key)) {
+                  return;
+              }
+              camelCache.set(key, prefixedPropertyName);
+              setDashPrefix(key, "" + (noPrefix ? '' : '-') + camelToDash(prefixedPropertyName));
+          }
+      }
+  };
+  var setServerProperty = function (key) { return setDashPrefix(key, key); };
+  var prefixer = function (key, asDashCase) {
+      if (asDashCase === void 0) { asDashCase = false; }
+      var cache = asDashCase ? dashCache : camelCache;
+      if (!cache.has(key)) {
+          isBrowser ? testPrefix(key) : setServerProperty(key);
+      }
+      return cache.get(key) || key;
+  };
 
-    function __rest(s, e) {
-        var t = {};
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-            t[p] = s[p];
-        if (s != null && typeof Object.getOwnPropertySymbols === "function")
-            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-                t[p[i]] = s[p[i]];
-        return t;
-    }
+  var axes = ['', 'X', 'Y', 'Z'];
+  var order = ['translate', 'scale', 'rotate', 'skew', 'transformPerspective'];
+  var transformProps = order.reduce(function (acc, key) {
+      return axes.reduce(function (axesAcc, axesKey) {
+          axesAcc.push(key + axesKey);
+          return axesAcc;
+      }, acc);
+  }, ['x', 'y', 'z']);
+  var transformPropDictionary = transformProps.reduce(function (dict, key) {
+      dict[key] = true;
+      return dict;
+  }, {});
+  function isTransformProp(key) {
+      return transformPropDictionary[key] === true;
+  }
+  function sortTransformProps(a, b) {
+      return transformProps.indexOf(a) - transformProps.indexOf(b);
+  }
+  var transformOriginProps = new Set(['originX', 'originY', 'originZ']);
+  function isTransformOriginProp(key) {
+      return transformOriginProps.has(key);
+  }
 
-    var HEY_LISTEN = 'Hey, listen! ';
-    var invariant = function () { };
-    {
-        invariant = function (check, message) {
-            if (!check) {
-                throw new Error(HEY_LISTEN.toUpperCase() + message);
-            }
-        };
-    }
+  var int = tslib.__assign(tslib.__assign({}, styleValueTypes.number), { transform: Math.round });
+  var valueTypes = {
+      color: styleValueTypes.color,
+      backgroundColor: styleValueTypes.color,
+      outlineColor: styleValueTypes.color,
+      fill: styleValueTypes.color,
+      stroke: styleValueTypes.color,
+      borderColor: styleValueTypes.color,
+      borderTopColor: styleValueTypes.color,
+      borderRightColor: styleValueTypes.color,
+      borderBottomColor: styleValueTypes.color,
+      borderLeftColor: styleValueTypes.color,
+      borderWidth: styleValueTypes.px,
+      borderTopWidth: styleValueTypes.px,
+      borderRightWidth: styleValueTypes.px,
+      borderBottomWidth: styleValueTypes.px,
+      borderLeftWidth: styleValueTypes.px,
+      borderRadius: styleValueTypes.px,
+      radius: styleValueTypes.px,
+      borderTopLeftRadius: styleValueTypes.px,
+      borderTopRightRadius: styleValueTypes.px,
+      borderBottomRightRadius: styleValueTypes.px,
+      borderBottomLeftRadius: styleValueTypes.px,
+      width: styleValueTypes.px,
+      maxWidth: styleValueTypes.px,
+      height: styleValueTypes.px,
+      maxHeight: styleValueTypes.px,
+      size: styleValueTypes.px,
+      top: styleValueTypes.px,
+      right: styleValueTypes.px,
+      bottom: styleValueTypes.px,
+      left: styleValueTypes.px,
+      padding: styleValueTypes.px,
+      paddingTop: styleValueTypes.px,
+      paddingRight: styleValueTypes.px,
+      paddingBottom: styleValueTypes.px,
+      paddingLeft: styleValueTypes.px,
+      margin: styleValueTypes.px,
+      marginTop: styleValueTypes.px,
+      marginRight: styleValueTypes.px,
+      marginBottom: styleValueTypes.px,
+      marginLeft: styleValueTypes.px,
+      rotate: styleValueTypes.degrees,
+      rotateX: styleValueTypes.degrees,
+      rotateY: styleValueTypes.degrees,
+      rotateZ: styleValueTypes.degrees,
+      scale: styleValueTypes.scale,
+      scaleX: styleValueTypes.scale,
+      scaleY: styleValueTypes.scale,
+      scaleZ: styleValueTypes.scale,
+      skew: styleValueTypes.degrees,
+      skewX: styleValueTypes.degrees,
+      skewY: styleValueTypes.degrees,
+      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,
+      originX: styleValueTypes.progressPercentage,
+      originY: styleValueTypes.progressPercentage,
+      originZ: styleValueTypes.px,
+      zIndex: int,
+      fillOpacity: styleValueTypes.alpha,
+      strokeOpacity: styleValueTypes.alpha,
+      numOctaves: int
+  };
+  var getValueType = function (key) { return valueTypes[key]; };
+  var getValueAsType = function (value, type) {
+      return type && typeof value === 'number' ? type.transform(value) : value;
+  };
 
-    var prevTime = 0;
-    var onNextFrame = typeof window !== 'undefined' && window.requestAnimationFrame !== undefined
-        ? function (callback) { return window.requestAnimationFrame(callback); }
-        : function (callback) {
-            var timestamp = Date.now();
-            var timeToCall = Math.max(0, 16.7 - (timestamp - prevTime));
-            prevTime = timestamp + timeToCall;
-            setTimeout(function () { return callback(prevTime); }, timeToCall);
-        };
+  var SCROLL_LEFT = 'scrollLeft';
+  var SCROLL_TOP = 'scrollTop';
+  var scrollKeys = new Set([SCROLL_LEFT, SCROLL_TOP]);
 
-    var createStep = (function (setRunNextFrame) {
-        var processToRun = [];
-        var processToRunNextFrame = [];
-        var numThisFrame = 0;
-        var isProcessing = false;
-        var i = 0;
-        var cancelled = new WeakSet();
-        var toKeepAlive = new WeakSet();
-        var renderStep = {
-            cancel: function (process) {
-                var indexOfCallback = processToRunNextFrame.indexOf(process);
-                cancelled.add(process);
-                if (indexOfCallback !== -1) {
-                    processToRunNextFrame.splice(indexOfCallback, 1);
-                }
-            },
-            process: function (frame) {
-                var _a;
-                isProcessing = true;
-                _a = [
-                    processToRunNextFrame,
-                    processToRun
-                ], processToRun = _a[0], processToRunNextFrame = _a[1];
-                processToRunNextFrame.length = 0;
-                numThisFrame = processToRun.length;
-                if (numThisFrame) {
-                    var process_1;
-                    for (i = 0; i < numThisFrame; i++) {
-                        process_1 = processToRun[i];
-                        process_1(frame);
-                        if (toKeepAlive.has(process_1) === true && !cancelled.has(process_1)) {
-                            renderStep.schedule(process_1);
-                            setRunNextFrame(true);
-                        }
-                    }
-                }
-                isProcessing = false;
-            },
-            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)
-                    toKeepAlive.add(process);
-                if (buffer.indexOf(process) === -1) {
-                    buffer.push(process);
-                    if (addToCurrentBuffer)
-                        numThisFrame = processToRun.length;
-                }
-            }
-        };
-        return renderStep;
-    });
+  var blacklist = new Set([SCROLL_LEFT, SCROLL_TOP, 'transform']);
+  var translateAlias = {
+      x: 'translateX',
+      y: 'translateY',
+      z: 'translateZ'
+  };
+  function isCustomTemplate(v) {
+      return typeof v === 'function';
+  }
+  function buildTransform(state, transform, transformKeys, transformIsDefault, 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 += (translateAlias[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, transformIsDefault ? '' : transformString);
+      }
+      else if (transformIsDefault) {
+          transformString = 'none';
+      }
+      return transformString;
+  }
+  function buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, isDashCase) {
+      if (enableHardwareAcceleration === void 0) { enableHardwareAcceleration = true; }
+      if (styles === void 0) { styles = {}; }
+      if (transform === void 0) { transform = {}; }
+      if (transformOrigin === void 0) { transformOrigin = {}; }
+      if (transformKeys === void 0) { transformKeys = []; }
+      if (isDashCase === void 0) { isDashCase = false; }
+      var transformIsDefault = true;
+      var hasTransform = false;
+      var hasTransformOrigin = false;
+      for (var key in state) {
+          var value = state[key];
+          var valueType = getValueType(key);
+          var valueAsType = getValueAsType(value, valueType);
+          if (isTransformProp(key)) {
+              hasTransform = true;
+              transform[key] = valueAsType;
+              transformKeys.push(key);
+              if (transformIsDefault) {
+                  if ((valueType.default && value !== valueType.default) ||
+                      (!valueType.default && value !== 0)) {
+                      transformIsDefault = false;
+                  }
+              }
+          }
+          else if (isTransformOriginProp(key)) {
+              transformOrigin[key] = valueAsType;
+              hasTransformOrigin = true;
+          }
+          else if (!blacklist.has(key) || !isCustomTemplate(valueAsType)) {
+              styles[prefixer(key, isDashCase)] = valueAsType;
+          }
+      }
+      if (hasTransform || typeof state.transform === 'function') {
+          styles.transform = buildTransform(state, transform, transformKeys, transformIsDefault, enableHardwareAcceleration);
+      }
+      if (hasTransformOrigin) {
+          styles.transformOrigin = (transformOrigin.originX ||
+              '50%') + " " + (transformOrigin.originY || '50%') + " " + (transformOrigin.originZ ||
+              0);
+      }
+      return styles;
+  }
+  function createStyleBuilder(enableHardwareAcceleration, isDashCase) {
+      if (enableHardwareAcceleration === void 0) { enableHardwareAcceleration = true; }
+      if (isDashCase === void 0) { isDashCase = true; }
+      var styles = {};
+      var transform = {};
+      var transformOrigin = {};
+      var transformKeys = [];
+      return function (state) {
+          transformKeys.length = 0;
+          buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, isDashCase);
+          return styles;
+      };
+  }
 
-    var StepId;
-    (function (StepId) {
-        StepId["Read"] = "read";
-        StepId["Update"] = "update";
-        StepId["Render"] = "render";
-        StepId["PostRender"] = "postRender";
-        StepId["FixedUpdate"] = "fixedUpdate";
-    })(StepId || (StepId = {}));
+  function onRead(key, options) {
+      var element = options.element, preparseOutput = options.preparseOutput;
+      var defaultValueType = getValueType(key);
+      if (isTransformProp(key)) {
+          return defaultValueType ? defaultValueType.default || 0 : 0;
+      }
+      else if (scrollKeys.has(key)) {
+          return element[key];
+      }
+      else {
+          var domValue = window
+              .getComputedStyle(element, null)
+              .getPropertyValue(prefixer(key, true)) || 0;
+          return preparseOutput &&
+              defaultValueType &&
+              defaultValueType.test(domValue) &&
+              defaultValueType.parse
+              ? defaultValueType.parse(domValue)
+              : domValue;
+      }
+  }
+  function onRender(state, _a, changedValues) {
+      var element = _a.element, buildStyles = _a.buildStyles, hasCSSVariable = _a.hasCSSVariable;
+      Object.assign(element.style, buildStyles(state));
+      if (hasCSSVariable) {
+          var numChangedValues = changedValues.length;
+          for (var i = 0; i < numChangedValues; i++) {
+              var key = changedValues[i];
+              if (key.startsWith('--')) {
+                  element.style.setProperty(key, state[key]);
+              }
+          }
+      }
+      if (changedValues.indexOf(SCROLL_LEFT) !== -1) {
+          element[SCROLL_LEFT] = state[SCROLL_LEFT];
+      }
+      if (changedValues.indexOf(SCROLL_TOP) !== -1) {
+          element[SCROLL_TOP] = state[SCROLL_TOP];
+      }
+  }
+  var cssStyler = createStyler({
+      onRead: onRead,
+      onRender: onRender,
+      uncachedValues: scrollKeys
+  });
+  function createCssStyler(element, _a) {
+      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 maxElapsed = 40;
-    var defaultElapsed = (1 / 60) * 1000;
-    var useDefaultElapsed = true;
-    var willRunNextFrame = false;
-    var isProcessing = false;
-    var frame = {
-        delta: 0,
-        timestamp: 0
-    };
-    var stepsOrder = [
-        StepId.Read,
-        StepId.Update,
-        StepId.Render,
-        StepId.PostRender
-    ];
-    var setWillRunNextFrame = function (willRun) { return (willRunNextFrame = willRun); };
-    var _a = stepsOrder.reduce(function (acc, key) {
-        var step = createStep(setWillRunNextFrame);
-        acc.sync[key] = function (process, keepAlive, immediate) {
-            if (keepAlive === void 0) { keepAlive = false; }
-            if (immediate === void 0) { immediate = false; }
-            if (!willRunNextFrame)
-                startLoop();
-            step.schedule(process, keepAlive, immediate);
-            return process;
-        };
-        acc.cancelSync[key] = function (process) { return step.cancel(process); };
-        acc.steps[key] = step;
-        return acc;
-    }, {
-        steps: {},
-        sync: {},
-        cancelSync: {}
-    }), steps = _a.steps, sync = _a.sync, cancelSync = _a.cancelSync;
-    var processStep = function (stepId) { return steps[stepId].process(frame); };
-    var processFrame = function (timestamp) {
-        willRunNextFrame = false;
-        frame.delta = useDefaultElapsed
-            ? defaultElapsed
-            : Math.max(Math.min(timestamp - frame.timestamp, maxElapsed), 1);
-        if (!useDefaultElapsed)
-            defaultElapsed = frame.delta;
-        frame.timestamp = timestamp;
-        isProcessing = true;
-        stepsOrder.forEach(processStep);
-        isProcessing = false;
-        if (willRunNextFrame) {
-            useDefaultElapsed = false;
-            onNextFrame(processFrame);
-        }
-    };
-    var startLoop = function () {
-        willRunNextFrame = true;
-        useDefaultElapsed = true;
-        if (!isProcessing)
-            onNextFrame(processFrame);
-    };
+  var camelCaseAttributes = new Set([
+      'baseFrequency',
+      'diffuseConstant',
+      'kernelMatrix',
+      'kernelUnitLength',
+      'keySplines',
+      'keyTimes',
+      'limitingConeAngle',
+      'markerHeight',
+      'markerWidth',
+      'numOctaves',
+      'targetX',
+      'targetY',
+      'surfaceScale',
+      'specularConstant',
+      'specularExponent',
+      'stdDeviation',
+      'tableValues'
+  ]);
 
-    var createStyler = function (_a) {
-        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 (_a) {
-            if (_a === void 0) { _a = {}; }
-            var props = __rest(_a, []);
-            var state = {};
-            var changedValues = [];
-            var hasChanged = false;
-            function setValue(key, value) {
-                if (key.startsWith('--')) {
-                    props.hasCSSVariable = true;
-                }
-                var currentValue = state[key];
-                state[key] = value;
-                if (state[key] === currentValue)
-                    return;
-                if (changedValues.indexOf(key) === -1) {
-                    changedValues.push(key);
-                }
-                if (!hasChanged) {
-                    hasChanged = true;
-                    sync.render(styler.render);
-                }
-            }
-            var styler = {
-                get: function (key, forceRead) {
-                    if (forceRead === void 0) { forceRead = false; }
-                    var useCached = !forceRead &&
-                        useCache &&
-                        !uncachedValues.has(key) &&
-                        state[key] !== undefined;
-                    return useCached ? state[key] : onRead(key, props);
-                },
-                set: function (values, value) {
-                    if (typeof values === 'string') {
-                        setValue(values, value);
-                    }
-                    else {
-                        for (var key in values) {
-                            setValue(key, values[key]);
-                        }
-                    }
-                    return this;
-                },
-                render: function (forceRender) {
-                    if (forceRender === void 0) { forceRender = false; }
-                    if (hasChanged || forceRender === true) {
-                        onRender(state, props, changedValues);
-                        hasChanged = false;
-                        changedValues.length = 0;
-                    }
-                    return this;
-                }
-            };
-            return styler;
-        };
-    };
+  var defaultOrigin = 0.5;
+  var svgAttrsTemplate = function () { return ({
+      style: {}
+  }); };
+  var progressToPixels = function (progress, length) {
+      return styleValueTypes.px.transform(progress * length);
+  };
+  var unmeasured = { x: 0, y: 0, width: 0, height: 0 };
+  function calcOrigin(origin, offset, size) {
+      return typeof origin === 'string'
+          ? origin
+          : styleValueTypes.px.transform(offset + size * origin);
+  }
+  function calculateSVGTransformOrigin(dimensions, originX, originY) {
+      return calcOrigin(originX, dimensions.x, dimensions.width) + " " + calcOrigin(originY, dimensions.y, dimensions.height);
+  }
+  function buildSVGAttrs(_a, dimensions, totalPathLength, cssBuilder, attrs, isDashCase) {
+      if (dimensions === void 0) { dimensions = unmeasured; }
+      if (cssBuilder === void 0) { cssBuilder = createStyleBuilder(false, false); }
+      if (attrs === void 0) { attrs = svgAttrsTemplate(); }
+      if (isDashCase === void 0) { isDashCase = true; }
+      var attrX = _a.attrX, attrY = _a.attrY, originX = _a.originX, originY = _a.originY, pathLength = _a.pathLength, _b = _a.pathSpacing, pathSpacing = _b === void 0 ? 1 : _b, _c = _a.pathOffset, pathOffset = _c === void 0 ? 0 : _c, state = tslib.__rest(_a, ["attrX", "attrY", "originX", "originY", "pathLength", "pathSpacing", "pathOffset"]);
+      var style = cssBuilder(state);
+      for (var key in style) {
+          if (key === 'transform') {
+              attrs.style.transform = style[key];
+          }
+          else {
+              var attrKey = isDashCase && !camelCaseAttributes.has(key) ? camelToDash(key) : key;
+              attrs[attrKey] = style[key];
+          }
+      }
+      if (originX !== undefined || originY !== undefined || style.transform) {
+          attrs.style.transformOrigin = calculateSVGTransformOrigin(dimensions, originX !== undefined ? originX : defaultOrigin, originY !== undefined ? originY : defaultOrigin);
+      }
+      if (attrX !== undefined)
+          attrs.x = attrX;
+      if (attrY !== undefined)
+          attrs.y = attrY;
+      if (totalPathLength !== undefined && pathLength !== undefined) {
+          attrs[isDashCase ? 'stroke-dashoffset' : 'strokeDashoffset'] = progressToPixels(-pathOffset, totalPathLength);
+          attrs[isDashCase ? 'stroke-dasharray' : 'strokeDasharray'] = progressToPixels(pathLength, totalPathLength) + " " + progressToPixels(pathSpacing, totalPathLength);
+      }
+      return attrs;
+  }
+  function createAttrBuilder(dimensions, totalPathLength, isDashCase) {
+      if (isDashCase === void 0) { isDashCase = true; }
+      var attrs = svgAttrsTemplate();
+      var cssBuilder = createStyleBuilder(false, false);
+      return function (state) {
+          return buildSVGAttrs(state, dimensions, totalPathLength, cssBuilder, attrs, isDashCase);
+      };
+  }
 
-    var CAMEL_CASE_PATTERN = /([a-z])([A-Z])/g;
-    var REPLACE_TEMPLATE = '$1-$2';
-    var camelToDash = function (str) {
-        return str.replace(CAMEL_CASE_PATTERN, REPLACE_TEMPLATE).toLowerCase();
-    };
+  var getDimensions = function (element) {
+      return typeof element.getBBox === 'function'
+          ? element.getBBox()
+          : element.getBoundingClientRect();
+  };
+  var getSVGElementDimensions = function (element) {
+      try {
+          return getDimensions(element);
+      }
+      catch (e) {
+          return { x: 0, y: 0, width: 0, height: 0 };
+      }
+  };
 
-    var camelCache = new Map();
-    var dashCache = new Map();
-    var prefixes = ['Webkit', 'Moz', 'O', 'ms', ''];
-    var numPrefixes = prefixes.length;
-    var isBrowser = typeof document !== 'undefined';
-    var testElement;
-    var setDashPrefix = function (key, prefixed) {
-        return dashCache.set(key, camelToDash(prefixed));
-    };
-    var testPrefix = function (key) {
-        testElement = testElement || document.createElement('div');
-        for (var i = 0; i < numPrefixes; i++) {
-            var prefix = prefixes[i];
-            var noPrefix = prefix === '';
-            var prefixedPropertyName = noPrefix
-                ? key
-                : prefix + key.charAt(0).toUpperCase() + key.slice(1);
-            if (prefixedPropertyName in testElement.style || noPrefix) {
-                if (noPrefix && key === 'clipPath' && dashCache.has(key)) {
-                    return;
-                }
-                camelCache.set(key, prefixedPropertyName);
-                setDashPrefix(key, "" + (noPrefix ? '' : '-') + camelToDash(prefixedPropertyName));
-            }
-        }
-    };
-    var setServerProperty = function (key) { return setDashPrefix(key, key); };
-    var prefixer = function (key, asDashCase) {
-        if (asDashCase === void 0) { asDashCase = false; }
-        var cache = asDashCase ? dashCache : camelCache;
-        if (!cache.has(key)) {
-            isBrowser ? testPrefix(key) : setServerProperty(key);
-        }
-        return cache.get(key) || key;
-    };
+  var isPath = function (element) {
+      return element.tagName === 'path';
+  };
+  var svgStyler = createStyler({
+      onRead: function (key, _a) {
+          var element = _a.element;
+          key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;
+          if (!isTransformProp(key)) {
+              return element.getAttribute(key);
+          }
+          else {
+              var valueType = getValueType(key);
+              return valueType ? valueType.default || 0 : 0;
+          }
+      },
+      onRender: function (state, _a) {
+          var element = _a.element, buildAttrs = _a.buildAttrs;
+          var attrs = buildAttrs(state);
+          for (var key in attrs) {
+              if (key === 'style') {
+                  Object.assign(element.style, attrs.style);
+              }
+              else {
+                  element.setAttribute(key, attrs[key]);
+              }
+          }
+      }
+  });
+  var svg = (function (element) {
+      var dimensions = getSVGElementDimensions(element);
+      var pathLength = isPath(element) && element.getTotalLength
+          ? element.getTotalLength()
+          : undefined;
+      return svgStyler({
+          element: element,
+          buildAttrs: createAttrBuilder(dimensions, pathLength)
+      });
+  });
 
-    var axes = ['', 'X', 'Y', 'Z'];
-    var order = ['translate', 'scale', 'rotate', 'skew', 'transformPerspective'];
-    var transformProps = order.reduce(function (acc, key) {
-        return axes.reduce(function (axesAcc, axesKey) {
-            axesAcc.push(key + axesKey);
-            return axesAcc;
-        }, acc);
-    }, ['x', 'y', 'z']);
-    var transformPropDictionary = transformProps.reduce(function (dict, key) {
-        dict[key] = true;
-        return dict;
-    }, {});
-    function isTransformProp(key) {
-        return transformPropDictionary[key] === true;
-    }
-    function sortTransformProps(a, b) {
-        return transformProps.indexOf(a) - transformProps.indexOf(b);
-    }
-    var transformOriginProps = new Set(['originX', 'originY', 'originZ']);
-    function isTransformOriginProp(key) {
-        return transformOriginProps.has(key);
-    }
+  var viewport = createStyler({
+      useCache: false,
+      onRead: function (key) {
+          return key === 'scrollTop' ? window.pageYOffset : window.pageXOffset;
+      },
+      onRender: function (_a) {
+          var _b = _a.scrollTop, scrollTop = _b === void 0 ? 0 : _b, _c = _a.scrollLeft, scrollLeft = _c === void 0 ? 0 : _c;
+          return window.scrollTo(scrollLeft, scrollTop);
+      }
+  });
 
-    /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation. All rights reserved.
-    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-    this file except in compliance with the License. You may obtain a copy of the
-    License at http://www.apache.org/licenses/LICENSE-2.0
+  var cache = new WeakMap();
+  var isHTMLElement = function (node) {
+      return (node instanceof HTMLElement ||
+          typeof node.click === 'function');
+  };
+  var isSVGElement = function (node) {
+      return node instanceof SVGElement || 'ownerSVGElement' in node;
+  };
+  var createDOMStyler = function (node, props) {
+      var styler;
+      if (node === window) {
+          styler = viewport(node);
+      }
+      else if (isHTMLElement(node)) {
+          styler = createCssStyler(node, props);
+      }
+      else if (isSVGElement(node)) {
+          styler = svg(node);
+      }
+      heyListen.invariant(styler !== undefined, 'No valid node provided. Node must be HTMLElement, SVGElement or window.');
+      cache.set(node, styler);
+      return styler;
+  };
+  var getStyler = function (node, props) {
+      return cache.has(node) ? cache.get(node) : createDOMStyler(node, props);
+  };
+  function index (nodeOrSelector, props) {
+      var node = typeof nodeOrSelector === 'string'
+          ? document.querySelector(nodeOrSelector)
+          : nodeOrSelector;
+      return getStyler(node, props);
+  }
 
-    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-    MERCHANTABLITY OR NON-INFRINGEMENT.
+  exports.buildSVGAttrs = buildSVGAttrs;
+  exports.buildStyleProperty = buildStyleProperty;
+  exports.createStylerFactory = createStyler;
+  exports.default = index;
+  exports.isTransformProp = isTransformProp;
+  exports.transformProps = transformProps;
 
-    See the Apache Version 2.0 License for specific language governing permissions
-    and limitations under the License.
-    ***************************************************************************** */
+  Object.defineProperty(exports, '__esModule', { value: true });
 
-    var __assign$1 = function() {
-        __assign$1 = Object.assign || function __assign(t) {
-            for (var s, i = 1, n = arguments.length; i < n; i++) {
-                s = arguments[i];
-                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-            }
-            return t;
-        };
-        return __assign$1.apply(this, arguments);
-    };
-
-    var clamp = function (min, max) { return function (v) {
-        return Math.max(Math.min(v, max), min);
-    }; };
-    var sanitize = function (v) { return (v % 1 ? Number(v.toFixed(5)) : v); };
-    var singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))$/i;
-
-    var number = {
-        test: function (v) { return typeof v === 'number'; },
-        parse: parseFloat,
-        transform: function (v) { return v; }
-    };
-    var alpha = __assign$1(__assign$1({}, number), { transform: clamp(0, 1) });
-    var scale = __assign$1(__assign$1({}, number), { default: 1 });
-
-    var createUnitType = function (unit) { return ({
-        test: function (v) {
-            return typeof v === 'string' && v.endsWith(unit) && v.split(' ').length === 1;
-        },
-        parse: parseFloat,
-        transform: function (v) { return "" + v + unit; }
-    }); };
-    var degrees = createUnitType('deg');
-    var percent = createUnitType('%');
-    var px = createUnitType('px');
-    var progressPercentage = __assign$1(__assign$1({}, percent), { parse: function (v) { return percent.parse(v) / 100; }, transform: function (v) { return percent.transform(v * 100); } });
-
-    var getValueFromFunctionString = function (value) {
-        return value.substring(value.indexOf('(') + 1, value.lastIndexOf(')'));
-    };
-    var clampRgbUnit = clamp(0, 255);
-    var isRgba = function (v) { return v.red !== undefined; };
-    var isHsla = function (v) { return v.hue !== undefined; };
-    var splitColorValues = function (terms) {
-        return function (v) {
-            if (typeof v !== 'string')
-                return v;
-            var values = {};
-            var valuesArray = getValueFromFunctionString(v).split(/,\s*/);
-            for (var i = 0; i < 4; i++) {
-                values[terms[i]] =
-                    valuesArray[i] !== undefined ? parseFloat(valuesArray[i]) : 1;
-            }
-            return values;
-        };
-    };
-    var rgbaTemplate = function (_a) {
-        var red = _a.red, green = _a.green, blue = _a.blue, _b = _a.alpha, alpha$$1 = _b === void 0 ? 1 : _b;
-        return "rgba(" + red + ", " + green + ", " + blue + ", " + alpha$$1 + ")";
-    };
-    var hslaTemplate = function (_a) {
-        var hue = _a.hue, saturation = _a.saturation, lightness = _a.lightness, _b = _a.alpha, alpha$$1 = _b === void 0 ? 1 : _b;
-        return "hsla(" + hue + ", " + saturation + ", " + lightness + ", " + alpha$$1 + ")";
-    };
-    var rgbUnit = __assign$1(__assign$1({}, number), { transform: function (v) { return Math.round(clampRgbUnit(v)); } });
-    function isColorString(color, colorType) {
-        return color.startsWith(colorType) && singleColorRegex.test(color);
-    }
-    var rgba = {
-        test: function (v) { return (typeof v === 'string' ? isColorString(v, 'rgb') : isRgba(v)); },
-        parse: splitColorValues(['red', 'green', 'blue', 'alpha']),
-        transform: function (_a) {
-            var red = _a.red, green = _a.green, blue = _a.blue, _b = _a.alpha, alpha$$1 = _b === void 0 ? 1 : _b;
-            return rgbaTemplate({
-                red: rgbUnit.transform(red),
-                green: rgbUnit.transform(green),
-                blue: rgbUnit.transform(blue),
-                alpha: sanitize(alpha.transform(alpha$$1))
-            });
-        }
-    };
-    var hsla = {
-        test: function (v) { return (typeof v === 'string' ? isColorString(v, 'hsl') : isHsla(v)); },
-        parse: splitColorValues(['hue', 'saturation', 'lightness', 'alpha']),
-        transform: function (_a) {
-            var hue = _a.hue, saturation = _a.saturation, lightness = _a.lightness, _b = _a.alpha, alpha$$1 = _b === void 0 ? 1 : _b;
-            return hslaTemplate({
-                hue: Math.round(hue),
-                saturation: percent.transform(sanitize(saturation)),
-                lightness: percent.transform(sanitize(lightness)),
-                alpha: sanitize(alpha.transform(alpha$$1))
-            });
-        }
-    };
-    var hex = __assign$1(__assign$1({}, rgba), { test: function (v) { return typeof v === 'string' && isColorString(v, '#'); }, parse: function (v) {
-            var r = '';
-            var g = '';
-            var b = '';
-            if (v.length > 4) {
-                r = v.substr(1, 2);
-                g = v.substr(3, 2);
-                b = v.substr(5, 2);
-            }
-            else {
-                r = v.substr(1, 1);
-                g = v.substr(2, 1);
-                b = v.substr(3, 1);
-                r += r;
-                g += g;
-                b += b;
-            }
-            return {
-                red: parseInt(r, 16),
-                green: parseInt(g, 16),
-                blue: parseInt(b, 16),
-                alpha: 1
-            };
-        } });
-    var color = {
-        test: function (v) {
-            return (typeof v === 'string' && singleColorRegex.test(v)) ||
-                isRgba(v) ||
-                isHsla(v);
-        },
-        parse: function (v) {
-            if (rgba.test(v)) {
-                return rgba.parse(v);
-            }
-            else if (hsla.test(v)) {
-                return hsla.parse(v);
-            }
-            else if (hex.test(v)) {
-                return hex.parse(v);
-            }
-            return v;
-        },
-        transform: function (v) {
-            if (isRgba(v)) {
-                return rgba.transform(v);
-            }
-            else if (isHsla(v)) {
-                return hsla.transform(v);
-            }
-            return v;
-        }
-    };
-
-    var int = __assign(__assign({}, number), { transform: Math.round });
-    var valueTypes = {
-        color: color,
-        backgroundColor: color,
-        outlineColor: color,
-        fill: color,
-        stroke: color,
-        borderColor: color,
-        borderTopColor: color,
-        borderRightColor: color,
-        borderBottomColor: color,
-        borderLeftColor: color,
-        borderWidth: px,
-        borderTopWidth: px,
-        borderRightWidth: px,
-        borderBottomWidth: px,
-        borderLeftWidth: px,
-        borderRadius: px,
-        radius: px,
-        borderTopLeftRadius: px,
-        borderTopRightRadius: px,
-        borderBottomRightRadius: px,
-        borderBottomLeftRadius: px,
-        width: px,
-        maxWidth: px,
-        height: px,
-        maxHeight: px,
-        size: px,
-        top: px,
-        right: px,
-        bottom: px,
-        left: px,
-        padding: px,
-        paddingTop: px,
-        paddingRight: px,
-        paddingBottom: px,
-        paddingLeft: px,
-        margin: px,
-        marginTop: px,
-        marginRight: px,
-        marginBottom: px,
-        marginLeft: px,
-        rotate: degrees,
-        rotateX: degrees,
-        rotateY: degrees,
-        rotateZ: degrees,
-        scale: scale,
-        scaleX: scale,
-        scaleY: scale,
-        scaleZ: scale,
-        skew: degrees,
-        skewX: degrees,
-        skewY: degrees,
-        distance: px,
-        translateX: px,
-        translateY: px,
-        translateZ: px,
-        x: px,
-        y: px,
-        z: px,
-        perspective: px,
-        opacity: alpha,
-        originX: progressPercentage,
-        originY: progressPercentage,
-        originZ: px,
-        zIndex: int,
-        fillOpacity: alpha,
-        strokeOpacity: alpha,
-        numOctaves: int
-    };
-    var getValueType = function (key) { return valueTypes[key]; };
-    var getValueAsType = function (value, type) {
-        return type && typeof value === 'number' ? type.transform(value) : value;
-    };
-
-    var SCROLL_LEFT = 'scrollLeft';
-    var SCROLL_TOP = 'scrollTop';
-    var scrollKeys = new Set([SCROLL_LEFT, SCROLL_TOP]);
-
-    var blacklist = new Set([SCROLL_LEFT, SCROLL_TOP, 'transform']);
-    var translateAlias = {
-        x: 'translateX',
-        y: 'translateY',
-        z: 'translateZ'
-    };
-    function isCustomTemplate(v) {
-        return typeof v === 'function';
-    }
-    function buildTransform(state, transform, transformKeys, transformIsDefault, 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 += (translateAlias[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);
-        }
-        else if (transformIsDefault) {
-            transformString = 'none';
-        }
-        return transformString;
-    }
-    function buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, isDashCase) {
-        if (enableHardwareAcceleration === void 0) { enableHardwareAcceleration = true; }
-        if (styles === void 0) { styles = {}; }
-        if (transform === void 0) { transform = {}; }
-        if (transformOrigin === void 0) { transformOrigin = {}; }
-        if (transformKeys === void 0) { transformKeys = []; }
-        if (isDashCase === void 0) { isDashCase = false; }
-        var transformIsDefault = true;
-        var hasTransform = false;
-        var hasTransformOrigin = false;
-        for (var key in state) {
-            var value = state[key];
-            var valueType = getValueType(key);
-            var valueAsType = getValueAsType(value, valueType);
-            if (isTransformProp(key)) {
-                hasTransform = true;
-                transform[key] = valueAsType;
-                transformKeys.push(key);
-                if (transformIsDefault) {
-                    if ((valueType.default && value !== valueType.default) ||
-                        (!valueType.default && value !== 0)) {
-                        transformIsDefault = false;
-                    }
-                }
-            }
-            else if (isTransformOriginProp(key)) {
-                transformOrigin[key] = valueAsType;
-                hasTransformOrigin = true;
-            }
-            else if (!blacklist.has(key) || !isCustomTemplate(valueAsType)) {
-                styles[prefixer(key, isDashCase)] = valueAsType;
-            }
-        }
-        if (hasTransform || typeof state.transform === 'function') {
-            styles.transform = buildTransform(state, transform, transformKeys, transformIsDefault, enableHardwareAcceleration);
-        }
-        if (hasTransformOrigin) {
-            styles.transformOrigin = (transformOrigin.originX ||
-                '50%') + " " + (transformOrigin.originY || '50%') + " " + (transformOrigin.originZ ||
-                0);
-        }
-        return styles;
-    }
-    function createStyleBuilder(enableHardwareAcceleration, isDashCase) {
-        if (enableHardwareAcceleration === void 0) { enableHardwareAcceleration = true; }
-        if (isDashCase === void 0) { isDashCase = true; }
-        var styles = {};
-        var transform = {};
-        var transformOrigin = {};
-        var transformKeys = [];
-        return function (state) {
-            transformKeys.length = 0;
-            buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, isDashCase);
-            return styles;
-        };
-    }
-
-    function onRead(key, options) {
-        var element = options.element, preparseOutput = options.preparseOutput;
-        var defaultValueType = getValueType(key);
-        if (isTransformProp(key)) {
-            return defaultValueType ? defaultValueType.default || 0 : 0;
-        }
-        else if (scrollKeys.has(key)) {
-            return element[key];
-        }
-        else {
-            var domValue = window
-                .getComputedStyle(element, null)
-                .getPropertyValue(prefixer(key, true)) || 0;
-            return preparseOutput &&
-                defaultValueType &&
-                defaultValueType.test(domValue) &&
-                defaultValueType.parse
-                ? defaultValueType.parse(domValue)
-                : domValue;
-        }
-    }
-    function onRender(state, _a, changedValues) {
-        var element = _a.element, buildStyles = _a.buildStyles, hasCSSVariable = _a.hasCSSVariable;
-        Object.assign(element.style, buildStyles(state));
-        if (hasCSSVariable) {
-            var numChangedValues = changedValues.length;
-            for (var i = 0; i < numChangedValues; i++) {
-                var key = changedValues[i];
-                if (key.startsWith('--')) {
-                    element.style.setProperty(key, state[key]);
-                }
-            }
-        }
-        if (changedValues.indexOf(SCROLL_LEFT) !== -1) {
-            element[SCROLL_LEFT] = state[SCROLL_LEFT];
-        }
-        if (changedValues.indexOf(SCROLL_TOP) !== -1) {
-            element[SCROLL_TOP] = state[SCROLL_TOP];
-        }
-    }
-    var cssStyler = createStyler({
-        onRead: onRead,
-        onRender: onRender,
-        uncachedValues: scrollKeys
-    });
-    function createCssStyler(element, _a) {
-        if (_a === void 0) { _a = {}; }
-        var enableHardwareAcceleration = _a.enableHardwareAcceleration, props = __rest(_a, ["enableHardwareAcceleration"]);
-        return cssStyler(__assign({ element: element, buildStyles: createStyleBuilder(enableHardwareAcceleration), preparseOutput: true }, props));
-    }
-
-    var camelCaseAttributes = new Set([
-        'baseFrequency',
-        'diffuseConstant',
-        'kernelMatrix',
-        'kernelUnitLength',
-        'keySplines',
-        'keyTimes',
-        'limitingConeAngle',
-        'markerHeight',
-        'markerWidth',
-        'numOctaves',
-        'targetX',
-        'targetY',
-        'surfaceScale',
-        'specularConstant',
-        'specularExponent',
-        'stdDeviation',
-        'tableValues'
-    ]);
-
-    var defaultOrigin = 0.5;
-    var svgAttrsTemplate = function () { return ({
-        style: {}
-    }); };
-    var progressToPixels = function (progress, length) {
-        return px.transform(progress * length);
-    };
-    var unmeasured = { x: 0, y: 0, width: 0, height: 0 };
-    function calcOrigin(origin, offset, size) {
-        return typeof origin === 'string'
-            ? origin
-            : px.transform(offset + size * origin);
-    }
-    function calculateSVGTransformOrigin(dimensions, originX, originY) {
-        return calcOrigin(originX, dimensions.x, dimensions.width) + " " + calcOrigin(originY, dimensions.y, dimensions.height);
-    }
-    function buildSVGAttrs(_a, dimensions, totalPathLength, cssBuilder, attrs, isDashCase) {
-        if (dimensions === void 0) { dimensions = unmeasured; }
-        if (cssBuilder === void 0) { cssBuilder = createStyleBuilder(false, false); }
-        if (attrs === void 0) { attrs = svgAttrsTemplate(); }
-        if (isDashCase === void 0) { isDashCase = true; }
-        var attrX = _a.attrX, attrY = _a.attrY, originX = _a.originX, originY = _a.originY, pathLength = _a.pathLength, _b = _a.pathSpacing, pathSpacing = _b === void 0 ? 1 : _b, _c = _a.pathOffset, pathOffset = _c === void 0 ? 0 : _c, state = __rest(_a, ["attrX", "attrY", "originX", "originY", "pathLength", "pathSpacing", "pathOffset"]);
-        var style = cssBuilder(state);
-        for (var key in style) {
-            if (key === 'transform') {
-                attrs.style.transform = style[key];
-            }
-            else {
-                var attrKey = isDashCase && !camelCaseAttributes.has(key) ? camelToDash(key) : key;
-                attrs[attrKey] = style[key];
-            }
-        }
-        if (originX !== undefined || originY !== undefined || style.transform) {
-            attrs.style.transformOrigin = calculateSVGTransformOrigin(dimensions, originX !== undefined ? originX : defaultOrigin, originY !== undefined ? originY : defaultOrigin);
-        }
-        if (attrX !== undefined)
-            attrs.x = attrX;
-        if (attrY !== undefined)
-            attrs.y = attrY;
-        if (totalPathLength !== undefined && pathLength !== undefined) {
-            attrs[isDashCase ? 'stroke-dashoffset' : 'strokeDashoffset'] = progressToPixels(-pathOffset, totalPathLength);
-            attrs[isDashCase ? 'stroke-dasharray' : 'strokeDasharray'] = progressToPixels(pathLength, totalPathLength) + " " + progressToPixels(pathSpacing, totalPathLength);
-        }
-        return attrs;
-    }
-    function createAttrBuilder(dimensions, totalPathLength, isDashCase) {
-        if (isDashCase === void 0) { isDashCase = true; }
-        var attrs = svgAttrsTemplate();
-        var cssBuilder = createStyleBuilder(false, false);
-        return function (state) {
-            return buildSVGAttrs(state, dimensions, totalPathLength, cssBuilder, attrs, isDashCase);
-        };
-    }
-
-    var getDimensions = function (element) {
-        return typeof element.getBBox === 'function'
-            ? element.getBBox()
-            : element.getBoundingClientRect();
-    };
-    var getSVGElementDimensions = function (element) {
-        try {
-            return getDimensions(element);
-        }
-        catch (e) {
-            return { x: 0, y: 0, width: 0, height: 0 };
-        }
-    };
-
-    var isPath = function (element) {
-        return element.tagName === 'path';
-    };
-    var svgStyler = createStyler({
-        onRead: function (key, _a) {
-            var element = _a.element;
-            key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;
-            if (!isTransformProp(key)) {
-                return element.getAttribute(key);
-            }
-            else {
-                var valueType = getValueType(key);
-                return valueType ? valueType.default || 0 : 0;
-            }
-        },
-        onRender: function (state, _a) {
-            var element = _a.element, buildAttrs = _a.buildAttrs;
-            var attrs = buildAttrs(state);
-            for (var key in attrs) {
-                if (key === 'style') {
-                    Object.assign(element.style, attrs.style);
-                }
-                else {
-                    element.setAttribute(key, attrs[key]);
-                }
-            }
-        }
-    });
-    var svg = (function (element) {
-        var dimensions = getSVGElementDimensions(element);
-        var pathLength = isPath(element) && element.getTotalLength
-            ? element.getTotalLength()
-            : undefined;
-        return svgStyler({
-            element: element,
-            buildAttrs: createAttrBuilder(dimensions, pathLength)
-        });
-    });
-
-    var viewport = createStyler({
-        useCache: false,
-        onRead: function (key) {
-            return key === 'scrollTop' ? window.pageYOffset : window.pageXOffset;
-        },
-        onRender: function (_a) {
-            var _b = _a.scrollTop, scrollTop = _b === void 0 ? 0 : _b, _c = _a.scrollLeft, scrollLeft = _c === void 0 ? 0 : _c;
-            return window.scrollTo(scrollLeft, scrollTop);
-        }
-    });
-
-    var invariant$1 = function () { };
-    {
-        invariant$1 = function (check, message) {
-            if (!check) {
-                throw new Error(message);
-            }
-        };
-    }
-
-    var cache = new WeakMap();
-    var createDOMStyler = function (node, props) {
-        var styler;
-        if (node instanceof HTMLElement) {
-            styler = createCssStyler(node, props);
-        }
-        else if (node instanceof SVGElement) {
-            styler = svg(node);
-        }
-        else if (node === window) {
-            styler = viewport(node);
-        }
-        invariant$1(styler !== undefined, 'No valid node provided. Node must be HTMLElement, SVGElement or window.');
-        cache.set(node, styler);
-        return styler;
-    };
-    var getStyler = function (node, props) {
-        return cache.has(node) ? cache.get(node) : createDOMStyler(node, props);
-    };
-    function index (nodeOrSelector, props) {
-        var node = typeof nodeOrSelector === 'string'
-            ? document.querySelector(nodeOrSelector)
-            : nodeOrSelector;
-        return getStyler(node, props);
-    }
-
-    exports.default = index;
-    exports.createStylerFactory = createStyler;
-    exports.buildStyleProperty = buildStyleProperty;
-    exports.buildSVGAttrs = buildSVGAttrs;
-    exports.transformProps = transformProps;
-    exports.isTransformProp = isTransformProp;
-
-    Object.defineProperty(exports, '__esModule', { value: true });
-
 })));

dist/stylefire.min.js

@@ -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)};function r(t,e){var r={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&e.indexOf(n)<0&&(r[n]=t[n]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(t);o<n.length;o++)e.indexOf(n[o])<0&&(r[n[o]]=t[n[o]])}return r}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,d=!1,c={delta:0,timestamp:0},l=[n.Read,n.Update,n.Render,n.PostRender],p=function(t){return f=t},h=l.reduce(function(t,e){var r,n,o,a,i,s,u,d,c,l=(r=p,n=[],o=[],a=0,i=!1,s=0,u=new WeakSet,d=new WeakSet,c={cancel:function(t){var e=o.indexOf(t);u.add(t),-1!==e&&o.splice(e,1)},process:function(t){var e,f;if(i=!0,n=(e=[o,n])[0],(o=e[1]).length=0,a=n.length)for(s=0;s<a;s++)(f=n[s])(t),!0!==d.has(f)||u.has(f)||(c.schedule(f),r(!0));i=!1},schedule:function(t,e,r){void 0===e&&(e=!1),void 0===r&&(r=!1);var s=r&&i,f=s?n:o;u.delete(t),e&&d.add(t),-1===f.indexOf(t)&&(f.push(t),s&&(a=n.length))}});return t.sync[e]=function(t,e,r){return void 0===e&&(e=!1),void 0===r&&(r=!1),f||b(),l.schedule(t,e,r),t},t.cancelSync[e]=function(t){return l.cancel(t)},t.steps[e]=l,t},{steps:{},sync:{},cancelSync:{}}),v=h.steps,g=h.sync,m=(h.cancelSync,function(t){return v[t].process(c)}),y=function(t){f=!1,c.delta=u?s:Math.max(Math.min(t-c.timestamp,40),1),u||(s=c.delta),c.timestamp=t,d=!0,l.forEach(m),d=!1,f&&(u=!1,a(y))},b=function(){f=!0,u=!0,d||a(y)},w=function(t){var e=t.onRead,n=t.onRender,o=t.uncachedValues,a=void 0===o?new Set:o,i=t.useCache,s=void 0===i||i;return function(t){void 0===t&&(t={});var o=r(t,[]),i={},u=[],f=!1;function d(t,e){t.startsWith("--")&&(o.hasCSSVariable=!0);var r=i[t];i[t]=e,i[t]!==r&&(-1===u.indexOf(t)&&u.push(t),f||(f=!0,g.render(c.render)))}var c={get:function(t,r){return void 0===r&&(r=!1),!r&&s&&!a.has(t)&&void 0!==i[t]?i[t]:e(t,o)},set:function(t,e){if("string"==typeof t)d(t,e);else for(var r in t)d(r,t[r]);return this},render:function(t){return void 0===t&&(t=!1),(f||!0===t)&&(n(i,o,u),f=!1,u.length=0),this}};return c}},O=/([a-z])([A-Z])/g,x=function(t){return t.replace(O,"$1-$2").toLowerCase()},S=new Map,R=new Map,k=["Webkit","Moz","O","ms",""],C=k.length,T="undefined"!=typeof document,L=function(t,e){return R.set(t,x(e))},M=function(t,e){void 0===e&&(e=!1);var r=e?R:S;return r.has(t)||(T?function(t){i=i||document.createElement("div");for(var e=0;e<C;e++){var r=k[e],n=""===r,o=n?t:r+t.charAt(0).toUpperCase()+t.slice(1);if(o in i.style||n){if(n&&"clipPath"===t&&R.has(t))return;S.set(t,o),L(t,(n?"":"-")+x(o))}}}(t):function(t){L(t,t)}(t)),r.get(t)||t},P=["","X","Y","Z"],W=["translate","scale","rotate","skew","transformPerspective"].reduce(function(t,e){return P.reduce(function(t,r){return t.push(e+r),t},t)},["x","y","z"]),X=W.reduce(function(t,e){return t[e]=!0,t},{});function Y(t){return!0===X[t]}function A(t,e){return W.indexOf(t)-W.indexOf(e)}var j=new Set(["originX","originY","originZ"]);function B(t){return j.has(t)}var Z=function(){return(Z=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)}},z=function(t){return t%1?Number(t.toFixed(5)):t},V=/^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))$/i,U={test:function(t){return"number"==typeof t},parse:parseFloat,transform:function(t){return t}},E=Z(Z({},U),{transform:F(0,1)}),H=Z(Z({},U),{default:1}),I=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}}},q=I("deg"),D=I("%"),$=I("px"),G=Z(Z({},D),{parse:function(t){return D.parse(t)/100},transform:function(t){return D.transform(100*t)}}),N=F(0,255),_=function(t){return void 0!==t.red},J=function(t){return void 0!==t.hue},K=function(t){return function(e){if("string"!=typeof e)return e;for(var r,n={},o=(r=e,r.substring(r.indexOf("(")+1,r.lastIndexOf(")"))).split(/,\s*/),a=0;a<4;a++)n[t[a]]=void 0!==o[a]?parseFloat(o[a]):1;return n}},Q=Z(Z({},U),{transform:function(t){return Math.round(N(t))}});function tt(t,e){return t.startsWith(e)&&V.test(t)}var et={test:function(t){return"string"==typeof t?tt(t,"rgb"):_(t)},parse:K(["red","green","blue","alpha"]),transform:function(t){var e=t.red,r=t.green,n=t.blue,o=t.alpha,a=void 0===o?1:o;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:Q.transform(e),green:Q.transform(r),blue:Q.transform(n),alpha:z(E.transform(a))})}},rt={test:function(t){return"string"==typeof t?tt(t,"hsl"):J(t)},parse:K(["hue","saturation","lightness","alpha"]),transform:function(t){var e=t.hue,r=t.saturation,n=t.lightness,o=t.alpha,a=void 0===o?1:o;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:D.transform(z(r)),lightness:D.transform(z(n)),alpha:z(E.transform(a))})}},nt=Z(Z({},et),{test:function(t){return"string"==typeof t&&tt(t,"#")},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&&V.test(t)||_(t)||J(t)},parse:function(t){return et.test(t)?et.parse(t):rt.test(t)?rt.parse(t):nt.test(t)?nt.parse(t):t},transform:function(t){return _(t)?et.transform(t):J(t)?rt.transform(t):t}},at=e(e({},U),{transform:Math.round}),it={color:ot,backgroundColor:ot,outlineColor:ot,fill:ot,stroke:ot,borderColor:ot,borderTopColor:ot,borderRightColor:ot,borderBottomColor:ot,borderLeftColor:ot,borderWidth:$,borderTopWidth:$,borderRightWidth:$,borderBottomWidth:$,borderLeftWidth:$,borderRadius:$,radius:$,borderTopLeftRadius:$,borderTopRightRadius:$,borderBottomRightRadius:$,borderBottomLeftRadius:$,width:$,maxWidth:$,height:$,maxHeight:$,size:$,top:$,right:$,bottom:$,left:$,padding:$,paddingTop:$,paddingRight:$,paddingBottom:$,paddingLeft:$,margin:$,marginTop:$,marginRight:$,marginBottom:$,marginLeft:$,rotate:q,rotateX:q,rotateY:q,rotateZ:q,scale:H,scaleX:H,scaleY:H,scaleZ:H,skew:q,skewX:q,skewY:q,distance:$,translateX:$,translateY:$,translateZ:$,x:$,y:$,z:$,perspective:$,opacity:E,originX:G,originY:G,originZ:$,zIndex:at,fillOpacity:E,strokeOpacity:E,numOctaves:at},st=function(t){return it[t]},ut=function(t,e){return e&&"number"==typeof t?e.transform(t):t},ft="scrollLeft",dt="scrollTop",ct=new Set([ft,dt]),lt=new Set([ft,dt,"transform"]),pt={x:"translateX",y:"translateY",z:"translateZ"};function ht(t){return"function"==typeof t}function vt(t,e,r,n,o,a,i){void 0===e&&(e=!0),void 0===r&&(r={}),void 0===n&&(n={}),void 0===o&&(o={}),void 0===a&&(a=[]),void 0===i&&(i=!1);var s=!0,u=!1,f=!1;for(var d in t){var c=t[d],l=st(d),p=ut(c,l);Y(d)?(u=!0,n[d]=p,a.push(d),s&&(l.default&&c!==l.default||!l.default&&0!==c)&&(s=!1)):B(d)?(o[d]=p,f=!0):lt.has(d)&&ht(p)||(r[M(d,i)]=p)}return(u||"function"==typeof t.transform)&&(r.transform=function(t,e,r,n,o){var a="",i=!1;r.sort(A);for(var s=r.length,u=0;u<s;u++){var f=r[u];a+=(pt[f]||f)+"("+e[f]+") ",i="z"===f||i}return!i&&o?a+="translateZ(0)":a=a.trim(),ht(t.transform)?a=t.transform(e,a):n&&(a="none"),a}(t,n,a,s,e)),f&&(r.transformOrigin=(o.originX||"50%")+" "+(o.originY||"50%")+" "+(o.originZ||0)),r}function gt(t,e){void 0===t&&(t=!0),void 0===e&&(e=!0);var r={},n={},o={},a=[];return function(i){return a.length=0,vt(i,t,r,n,o,a,e),r}}var mt=w({onRead:function(t,e){var r=e.element,n=e.preparseOutput,o=st(t);if(Y(t))return o&&o.default||0;if(ct.has(t))return r[t];var a=window.getComputedStyle(r,null).getPropertyValue(M(t,!0))||0;return n&&o&&o.test(a)&&o.parse?o.parse(a):a},onRender:function(t,e,r){var n=e.element,o=e.buildStyles,a=e.hasCSSVariable;if(Object.assign(n.style,o(t)),a)for(var i=r.length,s=0;s<i;s++){var u=r[s];u.startsWith("--")&&n.style.setProperty(u,t[u])}-1!==r.indexOf(ft)&&(n[ft]=t[ft]),-1!==r.indexOf(dt)&&(n[dt]=t[dt])},uncachedValues:ct});var yt=new Set(["baseFrequency","diffuseConstant","kernelMatrix","kernelUnitLength","keySplines","keyTimes","limitingConeAngle","markerHeight","markerWidth","numOctaves","targetX","targetY","surfaceScale","specularConstant","specularExponent","stdDeviation","tableValues"]),bt=.5,wt=function(){return{style:{}}},Ot=function(t,e){return $.transform(t*e)},xt={x:0,y:0,width:0,height:0};function St(t,e,r){return"string"==typeof t?t:$.transform(e+r*t)}function Rt(t,e,n,o,a,i){void 0===e&&(e=xt),void 0===o&&(o=gt(!1,!1)),void 0===a&&(a=wt()),void 0===i&&(i=!0);var s=t.attrX,u=t.attrY,f=t.originX,d=t.originY,c=t.pathLength,l=t.pathSpacing,p=void 0===l?1:l,h=t.pathOffset,v=void 0===h?0:h,g=o(r(t,["attrX","attrY","originX","originY","pathLength","pathSpacing","pathOffset"]));for(var m in g){if("transform"===m)a.style.transform=g[m];else a[i&&!yt.has(m)?x(m):m]=g[m]}return(void 0!==f||void 0!==d||g.transform)&&(a.style.transformOrigin=function(t,e,r){return St(e,t.x,t.width)+" "+St(r,t.y,t.height)}(e,void 0!==f?f:bt,void 0!==d?d:bt)),void 0!==s&&(a.x=s),void 0!==u&&(a.y=u),void 0!==n&&void 0!==c&&(a[i?"stroke-dashoffset":"strokeDashoffset"]=Ot(-v,n),a[i?"stroke-dasharray":"strokeDasharray"]=Ot(c,n)+" "+Ot(p,n)),a}var kt=w({onRead:function(t,e){var r=e.element;if(Y(t=yt.has(t)?t:x(t))){var n=st(t);return n&&n.default||0}return r.getAttribute(t)},onRender:function(t,e){var r=e.element,n=(0,e.buildAttrs)(t);for(var o in n)"style"===o?Object.assign(r.style,n.style):r.setAttribute(o,n[o])}}),Ct=function(t){var e=function(t){try{return function(t){return"function"==typeof t.getBBox?t.getBBox():t.getBoundingClientRect()}(t)}catch(t){return{x:0,y:0,width:0,height:0}}}(t),r=function(t){return"path"===t.tagName}(t)&&t.getTotalLength?t.getTotalLength():void 0;return kt({element:t,buildAttrs:function(t,e,r){void 0===r&&(r=!0);var n=wt(),o=gt(!1,!1);return function(a){return Rt(a,t,e,o,n,r)}}(e,r)})},Tt=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)}}),Lt=new WeakMap,Mt=function(t,n){var o;return t instanceof HTMLElement?o=function(t,n){void 0===n&&(n={});var o=n.enableHardwareAcceleration,a=r(n,["enableHardwareAcceleration"]);return mt(e({element:t,buildStyles:gt(o),preparseOutput:!0},a))}(t,n):t instanceof SVGElement?o=Ct(t):t===window&&(o=Tt(t)),Lt.set(t,o),o},Pt=function(t,e){return Lt.has(t)?Lt.get(t):Mt(t,e)};t.default=function(t,e){var r="string"==typeof t?document.querySelector(t):t;return Pt(r,e)},t.createStylerFactory=w,t.buildStyleProperty=vt,t.buildSVGAttrs=Rt,t.transformProps=W,t.isTransformProp=Y,Object.defineProperty(t,"__esModule",{value:!0})});
+!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})});

lib/css/_tests/build-styles.d.ts

 export {};

lib/css/build-styles.d.ts

@@ -0,0 +0,0 @@ import { State, ResolvedState } from '../styler/types';

lib/css/index.d.ts

@@ -0,0 +0,0 @@ import { Styler, ResolvedState, State } from '../styler/types';

lib/css/prefixer.d.ts

 declare const prefixer: (key: string, asDashCase?: boolean) => any;
 export default prefixer;

lib/css/scroll-keys.d.ts

 export declare const SCROLL_LEFT = "scrollLeft";
 export declare const SCROLL_TOP = "scrollTop";
 export declare const scrollKeys: Set<string>;

lib/css/transform-props.d.ts

@@ -0,0 +0,0 @@ export declare const transformProps: string[];

lib/css/value-types.d.ts

 import { ValueType } from 'style-value-types';
 export declare const getValueType: (key: string) => ValueType;
 export declare const getValueAsType: (value: any, type?: ValueType) => any;

lib/index.d.ts

@@ -0,0 +0,0 @@ import createStylerFactory from './styler';

lib/index.js

@@ -240,3 +240,3 @@ 'use strict';
     if (isCustomTemplate(state.transform)) {
-        transformString = state.transform(transform, transformString);
+        transformString = state.transform(transform, transformIsDefault ? '' : transformString);
     }
@@ -495,13 +495,20 @@ else if (transformIsDefault) {
 var cache = new WeakMap();
+var isHTMLElement = function (node) {
+    return (node instanceof HTMLElement ||
+        typeof node.click === 'function');
+};
+var isSVGElement = function (node) {
+    return node instanceof SVGElement || 'ownerSVGElement' in node;
+};
 var createDOMStyler = function (node, props) {
     var styler;
-    if (node instanceof HTMLElement) {
+    if (node === window) {
+        styler = viewport(node);
+    }
+    else if (isHTMLElement(node)) {
         styler = createCssStyler(node, props);
     }
-    else if (node instanceof SVGElement) {
+    else if (isSVGElement(node)) {
         styler = svg(node);
     }
-    else if (node === window) {
-        styler = viewport(node);
-    }
     heyListen.invariant(styler !== undefined, 'No valid node provided. Node must be HTMLElement, SVGElement or window.');
@@ -521,7 +528,7 @@ cache.set(node, styler);
 
+exports.buildSVGAttrs = buildSVGAttrs;
+exports.buildStyleProperty = buildStyleProperty;
+exports.createStylerFactory = createStyler;
 exports.default = index;
-exports.createStylerFactory = createStyler;
-exports.buildStyleProperty = buildStyleProperty;
-exports.buildSVGAttrs = buildSVGAttrs;
+exports.isTransformProp = isTransformProp;
 exports.transformProps = transformProps;
-exports.isTransformProp = isTransformProp;

lib/styler/index.d.ts

 import { Config, Props, Styler } from './types';
 declare const createStyler: ({ onRead, onRender, uncachedValues, useCache }: Config) => ({ ...props }?: Props) => Styler;
 export default createStyler;

lib/styler/types.d.ts

@@ -0,0 +0,0 @@ export declare type State = {

lib/styler/utils.d.ts

 export declare const camelToDash: (str: string) => string;

lib/svg/attr-formatting.d.ts

 export declare const camelCaseAttributes: Set<string>;

lib/svg/build.d.ts

@@ -0,0 +0,0 @@ import { Dimensions, SVGState } from './types';

lib/svg/index.d.ts

 import { Styler } from '../styler/types';
 declare const _default: (element: SVGElement | SVGPathElement) => Styler;
 export default _default;

lib/svg/types.d.ts

@@ -0,0 +0,0 @@ export declare type Dimensions = {

lib/svg/utils.d.ts

 import { Dimensions } from './types';
 export declare const getDimensions: (element: SVGElement | SVGPathElement) => Dimensions;
 export declare const getSVGElementDimensions: (element: SVGElement | SVGPathElement) => Dimensions;

lib/viewport/index.d.ts

 import { Styler } from '../styler/types';
 export { Styler };
-declare const _default: ({ ...props }?: import("../styler/types").Props) => Styler;
+declare const _default: ({ ...props }?: import("stylefire/src/styler/types").Props) => Styler;
 export default _default;

package.json

 {
   "name": "stylefire",
-  "version": "7.0.1",
+  "version": "7.0.2",
   "description": "Performant, simplified stylers for CSS, SVG, path and DOM scroll.",
@@ -14,3 +14,3 @@ "main": "lib/index.js",
   "scripts": {
-    "build": "rollup -c",
+    "build": "rollup -c && tsc --emitDeclarationOnly",
     "postbuild": "babel $npm_package_module --out-file $npm_package_module --no-babelrc --plugins annotate-pure-calls",
@@ -50,7 +50,2 @@ "watch": "rollup -c -w",
     "jest-dom": "^3.0.0",
-    "rollup": "^0.59.1",
-    "rollup-plugin-node-resolve": "^3.3.0",
-    "rollup-plugin-replace": "^2.2.0",
-    "rollup-plugin-typescript2": "^0.14.0",
-    "rollup-plugin-uglify": "^3.0.0",
     "typescript": "^2.9.2",
@@ -57,0 +52,0 @@ "uglify-js": "^3.3.25",

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

Dev dependency count

10

decreased by-33.33%

Number of package files

45

increased by60.71%

Worsened metrics

Total package byte prevSize

88473

decreased by-12.15%

Lines of code

1802

decreased by-10.88%

Number of low quality alerts

1

increased byInfinity%

No dependency changes