stylefire - npm Package Compare versions

Comparing version 2.2.1 to 2.3.0

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog
 
+## [2.3.0] 2018-11-19
+
+### Added
+
+- New `buildStyleProperty` pure function to transform Stylefire props into React-style `style` objects to aid with SSR.
+
 ## [2.2.0] 2018-11-16
@@ -7,0 +13,0 @@

dist/stylefire.es.js

 import sync from 'framesync';
 import { alpha, color, degrees, scale, px, percent } from 'style-value-types';
-import { __assign } from 'tslib';
 import { invariant } from 'hey-listen';
 
+/*! *****************************************************************************
+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
+
+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.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
+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 createStyler = function (_a) {
@@ -87,5 +112,8 @@ var onRead = _a.onRead,
 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) {
-    if (typeof document === 'undefined') return;
     testElement = testElement || document.createElement('div');
@@ -96,8 +124,11 @@ for (var i = 0; i < numPrefixes; i++) {
         var prefixedPropertyName = noPrefix ? key : prefix + key.charAt(0).toUpperCase() + key.slice(1);
-        if (prefixedPropertyName in testElement.style) {
+        if (prefixedPropertyName in testElement.style || noPrefix) {
             camelCache.set(key, prefixedPropertyName);
-            dashCache.set(key, "" + (noPrefix ? '' : '-') + camelToDash(prefixedPropertyName));
+            setDashPrefix(key, "" + (noPrefix ? '' : '-') + camelToDash(prefixedPropertyName));
         }
     }
 };
+var setServerProperty = function (key) {
+    return setDashPrefix(key, key);
+};
 var prefixer = function (key, asDashCase) {
@@ -108,3 +139,3 @@ if (asDashCase === void 0) {
     var cache = asDashCase ? dashCache : camelCache;
-    if (!cache.has(key)) testPrefix(key);
+    if (!cache.has(key)) isBrowser ? testPrefix(key) : setServerProperty(key);
     return cache.get(key) || key;
@@ -209,77 +240,90 @@ };
 };
-var NUMBER = 'number';
-var OBJECT = 'object';
-var COLON = ':';
-var SEMI_COLON = ';';
-var TRANSFORM_ORIGIN = 'transform-origin';
-var TRANSFORM = 'transform';
-var TRANSLATE_Z = 'translateZ';
-var TRANSFORM_NONE = ';transform: none';
+var blacklist = /*#__PURE__*/new Set(['scrollLeft', 'scrollTop']);
 var styleRule = function (key, value) {
-    return "" + SEMI_COLON + key + COLON + value;
+    return ";" + prefixer(key, true) + ":" + value;
 };
-function buildStylePropertyString(state, changedValues, enableHardwareAcceleration, blacklist) {
-    if (changedValues === void 0) {
-        changedValues = true;
-    }
+var buildStyleProperty = function (state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys) {
     if (enableHardwareAcceleration === void 0) {
         enableHardwareAcceleration = true;
     }
-    var valuesToChange = changedValues === true ? Object.keys(state) : changedValues;
-    var propertyString = '';
-    var transformString = '';
+    if (styles === void 0) {
+        styles = {};
+    }
+    if (transform === void 0) {
+        transform = {};
+    }
+    if (transformOrigin === void 0) {
+        transformOrigin = {};
+    }
+    if (transformKeys === void 0) {
+        transformKeys = [];
+    }
+    var transformIsDefault = true;
     var hasTransformOrigin = false;
-    var transformIsDefault = true;
-    var hasTransform = false;
-    var transformHasZ = false;
-    var numChangedValues = valuesToChange.length;
-    for (var i = 0; i < numChangedValues; i++) {
-        var key = valuesToChange[i];
+    for (var k in state) {
+        var key = aliasMap[k] ? aliasMap[k] : k;
+        var value = state[k];
+        var valueType = getValueType(key);
+        var valueAsType = typeof value === 'number' && valueType ? valueType.transform(value) : value;
         if (isTransformProp(key)) {
-            hasTransform = true;
-            for (var stateKey in state) {
-                if (isTransformProp(stateKey) && valuesToChange.indexOf(stateKey) === -1) {
-                    valuesToChange.push(stateKey);
+            transform[key] = valueAsType;
+            transformKeys.push(key);
+            if (transformIsDefault) {
+                if (valueType.default && value !== valueType.default || !valueType.default && value !== 0) {
+                    transformIsDefault = false;
                 }
             }
-            break;
+        } else if (isTransformOriginProp(key)) {
+            transformOrigin[key] = valueAsType;
+            hasTransformOrigin = true;
+        } else if (!blacklist.has(key)) {
+            styles[key] = valueAsType;
         }
     }
-    valuesToChange.sort(sortTransformProps);
-    var totalNumChangedValues = valuesToChange.length;
-    for (var i = 0; i < totalNumChangedValues; i++) {
-        var key = valuesToChange[i];
-        if (blacklist.has(key)) continue;
-        var isTransformKey = isTransformProp(key);
-        var value = state[key];
-        var valueType = getValueType(key);
-        if (isTransformKey) {
-            if (valueType.default && value !== valueType.default || !valueType.default && value !== 0) {
-                transformIsDefault = false;
-            }
+    if (!transformIsDefault) {
+        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 (valueType && (typeof value === NUMBER || typeof value === OBJECT) && valueType.transform) {
-            value = valueType.transform(value);
+        if (!transformHasZ && enableHardwareAcceleration) {
+            transformString += 'translateZ(0)';
         }
-        if (isTransformKey) {
-            transformString += key + '(' + value + ') ';
-            transformHasZ = key === TRANSLATE_Z ? true : transformHasZ;
-        } else if (isTransformOriginProp(key)) {
-            state[key] = value;
-            hasTransformOrigin = true;
-        } else {
-            propertyString += styleRule(prefixer(key, true), value);
-        }
+        styles.transform = transformString;
+    } else {
+        styles.transform = 'none';
     }
     if (hasTransformOrigin) {
-        propertyString += styleRule(prefixer(TRANSFORM_ORIGIN, true), (state.transformOriginX || 0) + " " + (state.transformOriginY || 0) + " " + (state.transformOriginZ || 0));
+        styles.transformOrigin = (transformOrigin.transformOriginX || 0) + " " + (transformOrigin.transformOriginY || 0) + " " + (transformOrigin.transformOriginZ || 0);
     }
-    if (hasTransform) {
-        if (!transformHasZ && enableHardwareAcceleration) {
-            transformString += TRANSLATE_Z + "(0)";
+    return styles;
+};
+var buildStyleString = function (enableHardwareAcceleration) {
+    if (enableHardwareAcceleration === void 0) {
+        enableHardwareAcceleration = true;
+    }
+    var next = {};
+    var prev = {};
+    var transform = {};
+    var transformOrigin = {};
+    var transformKeys = [];
+    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);
+            }
         }
-        propertyString += transformIsDefault ? TRANSFORM_NONE : styleRule(prefixer(TRANSFORM, true), transformString);
-    }
-    return propertyString;
-}
+        _a = [prev, next], next = _a[0], prev = _a[1];
+        return style;
+    };
+};
 
@@ -305,4 +349,4 @@ var SCROLL_LEFT = 'scrollLeft';
         var element = _a.element,
-            enableHardwareAcceleration = _a.enableHardwareAcceleration;
-        element.style.cssText += buildStylePropertyString(state, changedValues, enableHardwareAcceleration, scrollValues);
+            buildStyles = _a.buildStyles;
+        element.style.cssText += buildStyles(state);
         if (changedValues.indexOf(SCROLL_LEFT) !== -1) element.scrollLeft = state.scrollLeft;
@@ -315,3 +359,3 @@ if (changedValues.indexOf(SCROLL_TOP) !== -1) element.scrollTop = state.scrollTop;
 var css = function (element, props) {
-    return cssStyler(__assign({ element: element, enableHardwareAcceleration: true, preparseOutput: true }, props));
+    return cssStyler(__assign({ element: element, buildStyles: buildStyleString(), preparseOutput: true }, props));
 };
@@ -468,2 +512,2 @@
 export default index;
-export { createStyler as createStylerFactory, buildStylePropertyString as buildStyles };
+export { createStyler as createStylerFactory, buildStyleProperty };

dist/stylefire.js

@@ -250,24 +250,29 @@ (function (global, factory) {
     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) {
-        if (typeof document === 'undefined')
-            return;
         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) {
+            var noPrefix = prefix === '';
+            var prefixedPropertyName = noPrefix
+                ? key
+                : prefix + key.charAt(0).toUpperCase() + key.slice(1);
+            if (prefixedPropertyName in testElement.style || noPrefix) {
                 camelCache.set(key, prefixedPropertyName);
-                dashCache.set(key, "" + (noPrefix ? '' : '-') + camelToDash(prefixedPropertyName));
+                setDashPrefix(key, "" + (noPrefix ? '' : '-') + camelToDash(prefixedPropertyName));
             }
         }
     };
-    var prefixer = (function (key, asDashCase) {
+    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))
-            testPrefix(key);
+            isBrowser ? testPrefix(key) : setServerProperty(key);
         return cache.get(key) || key;
-    });
+    };
 
@@ -530,83 +535,86 @@ var axes = ['', 'X', 'Y', 'Z'];
     };
-    var NUMBER = 'number';
-    var OBJECT = 'object';
-    var COLON = ':';
-    var SEMI_COLON = ';';
-    var TRANSFORM_ORIGIN = 'transform-origin';
-    var TRANSFORM = 'transform';
-    var TRANSLATE_Z = 'translateZ';
-    var TRANSFORM_NONE = ';transform: none';
+    var blacklist = new Set(['scrollLeft', 'scrollTop']);
     var styleRule = function (key, value) {
-        return "" + SEMI_COLON + key + COLON + value;
+        return ";" + prefixer(key, true) + ":" + value;
     };
-    function buildStylePropertyString(state, changedValues, enableHardwareAcceleration, blacklist) {
-        if (changedValues === void 0) { changedValues = true; }
+    var buildStyleProperty = function (state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys) {
         if (enableHardwareAcceleration === void 0) { enableHardwareAcceleration = true; }
-        var valuesToChange = changedValues === true ? Object.keys(state) : changedValues;
-        var propertyString = '';
-        var transformString = '';
+        if (styles === void 0) { styles = {}; }
+        if (transform === void 0) { transform = {}; }
+        if (transformOrigin === void 0) { transformOrigin = {}; }
+        if (transformKeys === void 0) { transformKeys = []; }
+        var transformIsDefault = true;
         var hasTransformOrigin = false;
-        var transformIsDefault = true;
-        var hasTransform = false;
-        var transformHasZ = false;
-        var numChangedValues = valuesToChange.length;
-        for (var i = 0; i < numChangedValues; i++) {
-            var key = valuesToChange[i];
+        for (var k in state) {
+            var key = aliasMap[k] ? aliasMap[k] : k;
+            var value = state[k];
+            var valueType = getValueType(key);
+            var valueAsType = typeof value === 'number' && valueType
+                ? valueType.transform(value)
+                : value;
             if (isTransformProp(key)) {
-                hasTransform = true;
-                for (var stateKey in state) {
-                    if (isTransformProp(stateKey) &&
-                        valuesToChange.indexOf(stateKey) === -1) {
-                        valuesToChange.push(stateKey);
+                transform[key] = valueAsType;
+                transformKeys.push(key);
+                if (transformIsDefault) {
+                    if ((valueType.default && value !== valueType.default) ||
+                        (!valueType.default && value !== 0)) {
+                        transformIsDefault = false;
                     }
                 }
-                break;
             }
-        }
-        valuesToChange.sort(sortTransformProps);
-        var totalNumChangedValues = valuesToChange.length;
-        for (var i = 0; i < totalNumChangedValues; i++) {
-            var key = valuesToChange[i];
-            if (blacklist.has(key))
-                continue;
-            var isTransformKey = isTransformProp(key);
-            var value = state[key];
-            var valueType = getValueType(key);
-            if (isTransformKey) {
-                if ((valueType.default && value !== valueType.default) ||
-                    (!valueType.default && value !== 0)) {
-                    transformIsDefault = false;
-                }
-            }
-            if (valueType &&
-                (typeof value === NUMBER || typeof value === OBJECT) &&
-                valueType.transform) {
-                value = valueType.transform(value);
-            }
-            if (isTransformKey) {
-                transformString += key + '(' + value + ') ';
-                transformHasZ = key === TRANSLATE_Z ? true : transformHasZ;
-            }
             else if (isTransformOriginProp(key)) {
-                state[key] = value;
+                transformOrigin[key] = valueAsType;
                 hasTransformOrigin = true;
             }
-            else {
-                propertyString += styleRule(prefixer(key, true), value);
+            else if (!blacklist.has(key)) {
+                styles[key] = valueAsType;
             }
         }
+        if (!transformIsDefault) {
+            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 (!transformHasZ && enableHardwareAcceleration) {
+                transformString += 'translateZ(0)';
+            }
+            styles.transform = transformString;
+        }
+        else {
+            styles.transform = 'none';
+        }
         if (hasTransformOrigin) {
-            propertyString += styleRule(prefixer(TRANSFORM_ORIGIN, true), (state.transformOriginX || 0) + " " + (state.transformOriginY ||
-                0) + " " + (state.transformOriginZ || 0));
+            styles.transformOrigin = (transformOrigin.transformOriginX ||
+                0) + " " + (transformOrigin.transformOriginY ||
+                0) + " " + (transformOrigin.transformOriginZ || 0);
         }
-        if (hasTransform) {
-            if (!transformHasZ && enableHardwareAcceleration) {
-                transformString += TRANSLATE_Z + "(0)";
+        return styles;
+    };
+    var buildStyleString = function (enableHardwareAcceleration) {
+        if (enableHardwareAcceleration === void 0) { enableHardwareAcceleration = true; }
+        var next = {};
+        var prev = {};
+        var transform = {};
+        var transformOrigin = {};
+        var transformKeys = [];
+        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);
+                }
             }
-            propertyString += transformIsDefault
-                ? TRANSFORM_NONE
-                : styleRule(prefixer(TRANSFORM, true), transformString);
-        }
-        return propertyString;
-    }
+            _a = [prev, next], next = _a[0], prev = _a[1];
+            return style;
+        };
+    };
 
@@ -636,4 +644,4 @@ var SCROLL_LEFT = 'scrollLeft';
         onRender: function (state, _a, changedValues) {
-            var element = _a.element, enableHardwareAcceleration = _a.enableHardwareAcceleration;
-            element.style.cssText += buildStylePropertyString(state, changedValues, enableHardwareAcceleration, scrollValues);
+            var element = _a.element, buildStyles = _a.buildStyles;
+            element.style.cssText += buildStyles(state);
             if (changedValues.indexOf(SCROLL_LEFT) !== -1)
@@ -648,3 +656,3 @@ element.scrollLeft = state.scrollLeft;
     var css = (function (element, props) {
-        return cssStyler(__assign({ element: element, enableHardwareAcceleration: true, preparseOutput: true }, props));
+        return cssStyler(__assign({ element: element, buildStyles: buildStyleString(), preparseOutput: true }, props));
     });
@@ -805,3 +813,3 @@
     exports.createStylerFactory = createStyler;
-    exports.buildStyles = buildStylePropertyString;
+    exports.buildStyleProperty = buildStyleProperty;
 
@@ -808,0 +816,0 @@ 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)},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,d={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 n,o,a,i,s,u,c,d,l,h=(n=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,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!==d.has(r)||c.has(r)||(l.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&&d.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(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,r=t.onRender,n=t.aliasMap,o=void 0===n?{}:n,a=t.useCache,i=void 0===a||a;return function(t){var n={},a=[],s=!1,u=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(f)))};function f(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?i&&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 u(t,e)};u(t,e)}else for(var r in t)t.hasOwnProperty(r)&&u(r,t[r]);return this},render:f}}},O=/([a-z])([A-Z])/g,x=function(t){return t.replace(O,"$1-$2").toLowerCase()},R=new Map,k=new Map,Y=["Webkit","Moz","O","ms",""],L=Y.length,X=function(t,e){void 0===e&&(e=!1);var r=e?k:R;return r.has(t)||function(t){if("undefined"!=typeof document){i=i||document.createElement("div");for(var e=0;e<L;e++){var r=Y[e],n=""===r,o=n?t:r+t.charAt(0).toUpperCase()+t.slice(1);o in i.style&&(R.set(t,o),k.set(t,(n?"":"-")+x(o)))}}}(t),r.get(t)||t},T=["","X","Y","Z"],M=["translate","scale","rotate","skew","transformPerspective"].reduce(function(t,e){return T.reduce(function(t,r){return t.push(e+r),t},t)},["x","y","z"]),S=M.reduce(function(t,e){return t[e]=!0,t},{}),P=function(t){return!0===S[t]},C=function(t,e){return M.indexOf(t)-M.indexOf(e)},W=function(t){return"transformOriginX"===t||"transformOriginY"===t},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)},A=function(t,e){return function(r){return Math.max(Math.min(r,e),t)}},E=function(t){return function(e){return"string"==typeof e&&0===e.indexOf(t)}},j=function(t){return t%1?Number(t.toFixed(5)):t},B={test:function(t){return"number"==typeof t},parse:parseFloat,transform:function(t){return t}},F=Z({},B,{transform:A(0,1)}),H=Z({},B,{default:1}),N=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}}},U=N("deg"),V=N("%"),z=N("px"),I=A(0,255),q=/^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))$/i,$=function(t){return void 0!==t.red},_=function(t){return void 0!==t.hue},D=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}},G=Z({},B,{transform:function(t){return Math.round(I(t))}}),J=E("rgb"),K={test:function(t){return"string"==typeof t?J(t):$(t)},parse:D(["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:G.transform(e),green:G.transform(r),blue:G.transform(n),alpha:j(o)})}},Q=E("hsl"),tt={test:function(t){return"string"==typeof t?Q(t):_(t)},parse:D(["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:V.transform(j(r)),lightness:V.transform(j(n)),alpha:j(o)})}},et=Z({},K,{test:E("#"),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}}}),rt={test:function(t){return"string"==typeof t&&q.test(t)||K.test(t)||tt.test(t)||et.test(t)},parse:function(t){return K.test(t)?K.parse(t):tt.test(t)?tt.parse(t):et.test(t)?et.parse(t):t},transform:function(t){return $(t)?K.transform(t):_(t)?tt.transform(t):t}},nt={color:rt,backgroundColor:rt,outlineColor:rt,fill:rt,stroke:rt,borderColor:rt,borderTopColor:rt,borderRightColor:rt,borderBottomColor:rt,borderLeftColor:rt,borderWidth:z,borderTopWidth:z,borderRightWidth:z,borderBottomWidth:z,borderLeftWidth:z,borderRadius:z,borderTopLeftRadius:z,borderTopRightRadius:z,borderBottomRightRadius:z,borderBottomLeftRadius:z,width:z,maxWidth:z,height:z,maxHeight:z,top:z,right:z,bottom:z,left:z,padding:z,paddingTop:z,paddingRight:z,paddingBottom:z,paddingLeft:z,margin:z,marginTop:z,marginRight:z,marginBottom:z,marginLeft:z,rotate:U,rotateX:U,rotateY:U,rotateZ:U,scale:H,scaleX:H,scaleY:H,scaleZ:H,skew:U,skewX:U,skewY:U,distance:z,translateX:z,translateY:z,translateZ:z,perspective:z,opacity:F,transformOriginX:V,transformOriginY:V,transformOriginZ:z},ot=function(t){return nt[t]},at="number",it="object",st="transform-origin",ut="transform",ft="translateZ",ct=";transform: none",dt=function(t,e){return";"+t+":"+e};function lt(t,e,r,n){void 0===e&&(e=!0),void 0===r&&(r=!0);for(var o=!0===e?Object.keys(t):e,a="",i="",s=!1,u=!0,f=!1,c=!1,d=o.length,l=0;l<d;l++){var p=o[l];if(P(p)){for(var h in f=!0,t)P(h)&&-1===o.indexOf(h)&&o.push(h);break}}o.sort(C);var g=o.length;for(l=0;l<g;l++){p=o[l];if(!n.has(p)){var m=P(p),v=t[p],y=ot(p);m&&(y.default&&v!==y.default||!y.default&&0!==v)&&(u=!1),y&&(typeof v===at||typeof v===it)&&y.transform&&(v=y.transform(v)),m?(i+=p+"("+v+") ",c=p===ft||c):W(p)?(t[p]=v,s=!0):a+=dt(X(p,!0),v)}}return s&&(a+=dt(X(st,!0),(t.transformOriginX||0)+" "+(t.transformOriginY||0)+" "+(t.transformOriginZ||0))),f&&(!c&&r&&(i+=ft+"(0)"),a+=u?ct:dt(X(ut,!0),i)),a}var pt=new Set(["scrollLeft","scrollTop"]),ht=w({onRead:function(t,e){var r=e.element,n=e.preparseOutput,o=ot(t);if(P(t))return o&&o.default||0;if(pt.has(t))return r[t];var a=window.getComputedStyle(r,null).getPropertyValue(X(t,!0))||0;return n&&o&&o.parse?o.parse(a):a},onRender:function(t,e,r){var n=e.element,o=e.enableHardwareAcceleration;n.style.cssText+=lt(t,r,o,pt),-1!==r.indexOf("scrollLeft")&&(n.scrollLeft=t.scrollLeft),-1!==r.indexOf("scrollTop")&&(n.scrollTop=t.scrollTop)},aliasMap:{x:"translateX",y:"translateY",z:"translateZ",originX:"transformOriginX",originY:"transformOriginY",originZ:"transformOriginZ"},uncachedValues:pt}),gt=function(t,e){return t/100*e+"px"},mt={fill:rt,stroke:rt,scale:H,scaleX:H,scaleY:H,opacity:F,fillOpacity:F,strokeOpacity:F},vt=w({onRead:function(t,e){var r=e.element;if(P(t)){var n=function(t){return mt[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,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.translateX+", "+t.translateY+") ",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];P(v)?o=!0:!r||"pathLength"!==v&&"pathSpacing"!==v||"number"!=typeof y?r&&"pathOffset"===v?i["stroke-dashoffset"]=gt(-y,n):i[x(v)]=y:(a=!0,s[v]=gt(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"}}),yt=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)}}),bt=new WeakMap,wt=function(t,n){var o;return t instanceof HTMLElement?o=function(t,r){return ht(e({element:t,enableHardwareAcceleration:!0,preparseOutput:!0},r))}(t,n):t instanceof SVGElement?o=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()),vt(r)}(t):t===window&&(o=yt(t)),r(void 0!==o,"No valid node provided. Node must be HTMLElement, SVGElement or window."),bt.set(t,o),o},Ot=function(t,e){return bt.has(t)?bt.get(t):wt(t,e)};t.default=function(t,e){var r="string"==typeof t?document.querySelector(t):t;return Ot(r,e)},t.createStylerFactory=w,t.buildStyles=lt,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,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.useCache,i=void 0===a||a;return function(t){var n={},a=[],s=!1,u=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(f)))};function f(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?i&&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 u(t,e)};u(t,e)}else for(var r in t)t.hasOwnProperty(r)&&u(r,t[r]);return this},render:f}}},O=/([a-z])([A-Z])/g,x=function(t){return t.replace(O,"$1-$2").toLowerCase()},R=new Map,k=new Map,L=["Webkit","Moz","O","ms",""],Y=L.length,X="undefined"!=typeof document,T=function(t,e){return k.set(t,x(e))},S=function(t,e){void 0===e&&(e=!1);var r=e?k:R;return r.has(t)||(X?function(t){i=i||document.createElement("div");for(var e=0;e<Y;e++){var r=L[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)}),z=B({},N,{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"),$=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:z,scaleX:z,scaleY:z,scaleZ:z,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={x:"translateX",y:"translateY",z:"translateZ",originX:"transformOriginX",originY:"transformOriginY",originZ:"transformOriginZ"},ut=new Set(["scrollLeft","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=st[u]?st[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):ut.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=new Set(["scrollLeft","scrollTop"]),dt=w({onRead:function(t,e){var r=e.element,n=e.preparseOutput,o=it(t);if(W(t))return o&&o.default||0;if(lt.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:st,uncachedValues:lt}),pt=function(t,r){return dt(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))},ht=function(t,e){return t/100*e+"px"},gt={fill:ot,stroke:ot,scale:z,scaleX:z,scaleY:z,opacity:U,fillOpacity:U,strokeOpacity:U},mt=w({onRead:function(t,e){var r=e.element;if(W(t)){var n=function(t){return gt[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"]=ht(-y,n):i[x(v)]=y:(a=!0,s[v]=ht(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"}}),vt=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)}}),yt=new WeakMap,bt=function(t,e){var n;return t instanceof HTMLElement?n=pt(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()),mt(r)}(t):t===window&&(n=vt(t)),r(void 0!==n,"No valid node provided. Node must be HTMLElement, SVGElement or window."),yt.set(t,n),n},wt=function(t,e){return yt.has(t)?yt.get(t):bt(t,e)};t.default=function(t,e){var r="string"==typeof t?document.querySelector(t):t;return wt(r,e)},t.createStylerFactory=w,t.buildStyleProperty=ct,Object.defineProperty(t,"__esModule",{value:!0})});

lib/css/prefixer.d.ts

@@ -1,2 +0,2 @@
-declare const _default: (key: string, asDashCase?: boolean) => any;
-export default _default;
+declare const prefixer: (key: string, asDashCase?: boolean) => any;
+export default prefixer;

lib/index.d.ts

@@ -1,5 +0,5 @@
-import buildStyles from './css/render';
 import createStylerFactory from './styler';
+import { buildStyleProperty } from './css/build-styles';
 import { Styler, Props } from './styler/types';
 export default function (nodeOrSelector: Element | string | Window, props: Props): Styler;
-export { createStylerFactory, Styler, buildStyles };
+export { createStylerFactory, Styler, buildStyleProperty };

lib/index.js

@@ -9,5 +9,30 @@ 'use strict';
 var styleValueTypes = require('style-value-types');
-var tslib_1 = require('tslib');
 var heyListen = require('hey-listen');
 
+/*! *****************************************************************************
+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
+
+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.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
+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 createStyler = function (_a) {
@@ -89,24 +114,29 @@ var onRead = _a.onRead, onRender = _a.onRender, _b = _a.aliasMap, aliasMap = _b === void 0 ? {} : _b, _c = _a.useCache, useCache = _c === void 0 ? true : _c;
 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) {
-    if (typeof document === 'undefined')
-        return;
     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) {
+        var noPrefix = prefix === '';
+        var prefixedPropertyName = noPrefix
+            ? key
+            : prefix + key.charAt(0).toUpperCase() + key.slice(1);
+        if (prefixedPropertyName in testElement.style || noPrefix) {
             camelCache.set(key, prefixedPropertyName);
-            dashCache.set(key, "" + (noPrefix ? '' : '-') + camelToDash(prefixedPropertyName));
+            setDashPrefix(key, "" + (noPrefix ? '' : '-') + camelToDash(prefixedPropertyName));
         }
     }
 };
-var prefixer = (function (key, asDashCase) {
+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))
-        testPrefix(key);
+        isBrowser ? testPrefix(key) : setServerProperty(key);
     return cache.get(key) || key;
-});
+};
 
@@ -201,83 +231,86 @@ var axes = ['', 'X', 'Y', 'Z'];
 };
-var NUMBER = 'number';
-var OBJECT = 'object';
-var COLON = ':';
-var SEMI_COLON = ';';
-var TRANSFORM_ORIGIN = 'transform-origin';
-var TRANSFORM = 'transform';
-var TRANSLATE_Z = 'translateZ';
-var TRANSFORM_NONE = ';transform: none';
+var blacklist = new Set(['scrollLeft', 'scrollTop']);
 var styleRule = function (key, value) {
-    return "" + SEMI_COLON + key + COLON + value;
+    return ";" + prefixer(key, true) + ":" + value;
 };
-function buildStylePropertyString(state, changedValues, enableHardwareAcceleration, blacklist) {
-    if (changedValues === void 0) { changedValues = true; }
+var buildStyleProperty = function (state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys) {
     if (enableHardwareAcceleration === void 0) { enableHardwareAcceleration = true; }
-    var valuesToChange = changedValues === true ? Object.keys(state) : changedValues;
-    var propertyString = '';
-    var transformString = '';
+    if (styles === void 0) { styles = {}; }
+    if (transform === void 0) { transform = {}; }
+    if (transformOrigin === void 0) { transformOrigin = {}; }
+    if (transformKeys === void 0) { transformKeys = []; }
+    var transformIsDefault = true;
     var hasTransformOrigin = false;
-    var transformIsDefault = true;
-    var hasTransform = false;
-    var transformHasZ = false;
-    var numChangedValues = valuesToChange.length;
-    for (var i = 0; i < numChangedValues; i++) {
-        var key = valuesToChange[i];
+    for (var k in state) {
+        var key = aliasMap[k] ? aliasMap[k] : k;
+        var value = state[k];
+        var valueType = getValueType(key);
+        var valueAsType = typeof value === 'number' && valueType
+            ? valueType.transform(value)
+            : value;
         if (isTransformProp(key)) {
-            hasTransform = true;
-            for (var stateKey in state) {
-                if (isTransformProp(stateKey) &&
-                    valuesToChange.indexOf(stateKey) === -1) {
-                    valuesToChange.push(stateKey);
+            transform[key] = valueAsType;
+            transformKeys.push(key);
+            if (transformIsDefault) {
+                if ((valueType.default && value !== valueType.default) ||
+                    (!valueType.default && value !== 0)) {
+                    transformIsDefault = false;
                 }
             }
-            break;
         }
-    }
-    valuesToChange.sort(sortTransformProps);
-    var totalNumChangedValues = valuesToChange.length;
-    for (var i = 0; i < totalNumChangedValues; i++) {
-        var key = valuesToChange[i];
-        if (blacklist.has(key))
-            continue;
-        var isTransformKey = isTransformProp(key);
-        var value = state[key];
-        var valueType = getValueType(key);
-        if (isTransformKey) {
-            if ((valueType.default && value !== valueType.default) ||
-                (!valueType.default && value !== 0)) {
-                transformIsDefault = false;
-            }
-        }
-        if (valueType &&
-            (typeof value === NUMBER || typeof value === OBJECT) &&
-            valueType.transform) {
-            value = valueType.transform(value);
-        }
-        if (isTransformKey) {
-            transformString += key + '(' + value + ') ';
-            transformHasZ = key === TRANSLATE_Z ? true : transformHasZ;
-        }
         else if (isTransformOriginProp(key)) {
-            state[key] = value;
+            transformOrigin[key] = valueAsType;
             hasTransformOrigin = true;
         }
-        else {
-            propertyString += styleRule(prefixer(key, true), value);
+        else if (!blacklist.has(key)) {
+            styles[key] = valueAsType;
         }
     }
+    if (!transformIsDefault) {
+        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 (!transformHasZ && enableHardwareAcceleration) {
+            transformString += 'translateZ(0)';
+        }
+        styles.transform = transformString;
+    }
+    else {
+        styles.transform = 'none';
+    }
     if (hasTransformOrigin) {
-        propertyString += styleRule(prefixer(TRANSFORM_ORIGIN, true), (state.transformOriginX || 0) + " " + (state.transformOriginY ||
-            0) + " " + (state.transformOriginZ || 0));
+        styles.transformOrigin = (transformOrigin.transformOriginX ||
+            0) + " " + (transformOrigin.transformOriginY ||
+            0) + " " + (transformOrigin.transformOriginZ || 0);
     }
-    if (hasTransform) {
-        if (!transformHasZ && enableHardwareAcceleration) {
-            transformString += TRANSLATE_Z + "(0)";
+    return styles;
+};
+var buildStyleString = function (enableHardwareAcceleration) {
+    if (enableHardwareAcceleration === void 0) { enableHardwareAcceleration = true; }
+    var next = {};
+    var prev = {};
+    var transform = {};
+    var transformOrigin = {};
+    var transformKeys = [];
+    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);
+            }
         }
-        propertyString += transformIsDefault
-            ? TRANSFORM_NONE
-            : styleRule(prefixer(TRANSFORM, true), transformString);
-    }
-    return propertyString;
-}
+        _a = [prev, next], next = _a[0], prev = _a[1];
+        return style;
+    };
+};
 
@@ -307,4 +340,4 @@ var SCROLL_LEFT = 'scrollLeft';
     onRender: function (state, _a, changedValues) {
-        var element = _a.element, enableHardwareAcceleration = _a.enableHardwareAcceleration;
-        element.style.cssText += buildStylePropertyString(state, changedValues, enableHardwareAcceleration, scrollValues);
+        var element = _a.element, buildStyles = _a.buildStyles;
+        element.style.cssText += buildStyles(state);
         if (changedValues.indexOf(SCROLL_LEFT) !== -1)
@@ -319,3 +352,3 @@ element.scrollLeft = state.scrollLeft;
 var css = (function (element, props) {
-    return cssStyler(tslib_1.__assign({ element: element, enableHardwareAcceleration: true, preparseOutput: true }, props));
+    return cssStyler(__assign({ element: element, buildStyles: buildStyleString(), preparseOutput: true }, props));
 });
@@ -476,2 +509,2 @@
 exports.createStylerFactory = createStyler;
-exports.buildStyles = buildStylePropertyString;
+exports.buildStyleProperty = buildStyleProperty;

package.json

 {
   "name": "stylefire",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "Performant, simplified stylers for CSS, SVG, path and DOM scroll.",
@@ -19,3 +19,5 @@ "main": "lib/index.js",
     "measure": "gzip -c dist/stylefire.min.js | wc -c",
-    "prepublishOnly": "yarn lint && yarn build"
+    "prettier": "prettier ./src/* --write",
+    "test": "jest",
+    "prepublishOnly": "yarn prettier && yarn lint && yarn build"
   },
@@ -41,6 +43,8 @@ "repository": {
   "devDependencies": {
+    "@types/jest": "^23.1.1",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
     "babel-plugin-annotate-pure-calls": "^0.2.2",
-    "jest": "^20.0.4",
+    "jest": "^23.1.0",
+    "jest-cli": "^23.1.0",
     "rollup": "^0.59.1",
@@ -50,3 +54,3 @@ "rollup-plugin-node-resolve": "^3.3.0",
     "rollup-plugin-uglify": "^3.0.0",
-    "ts-jest": "^20.0.10",
+    "ts-jest": "^21.2.4",
     "typescript": "^2.9.2",
@@ -59,10 +63,20 @@ "uglify-js": "^3.3.25",
     "hey-listen": "^1.0.4",
-    "style-value-types": "^3.0.6",
-    "tslib": "^1.9.1"
+    "style-value-types": "^3.0.6"
   },
   "unpkg": "./dist/stylefire.min.js",
-  "prettier": {
-    "parser": "typescript",
-    "singleQuote": true
+  "jest": {
+    "moduleFileExtensions": [
+      "ts",
+      "js"
+    ],
+    "moduleNameMapper": {
+      "style-value-types": "<rootDir>/../../style-value-types/src",
+      "framesync": "<rootDir>/../../framesync/src"
+    },
+    "transform": {
+      "\\.(ts)$": "../../../node_modules/ts-jest/preprocessor.js"
+    },
+    "testRegex": "/_tests/.*\\.(ts|js)$",
+    "rootDir": "src"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

90567

increased by5.26%

Dependency count

3

decreased by-25%

Number of package files

24

increased by9.09%

Lines of code

1902

increased by4.74%

Worsened metrics

Dev dependency count

14

increased by16.67%

Dependency changes

• - Removedtslib@^1.9.1