3.0.2 release

.flowconfig

@@ -3,5 +3,9 @@
 # Disable module with broken flow types.
 # .*/node_modules/babylon/*.*
 
+.*/node_modules/npm/*.*
+.*/node_modules/config-chain/*.*
+.*/node_modules/lunr/*.*
+
 [version]
 ^0.38.0

Changelog.md

@@ -2,6 +2,9 @@
 
 ## 3.0
 
+### 3.0.2
+* performance improvements (up to 30% faster)
+
 ### 3.0.1
 * performance improvements (~10% faster) ( [#115](https://github.com/rofrischmann/inline-style-prefixer/pull/115) ) ( [#116](https://github.com/rofrischmann/inline-style-prefixer/pull/116) )
 * ordering prefixed properties correctly ( [#117](https://github.com/rofrischmann/inline-style-prefixer/pull/117) )

benchmark/dynamic/cases/300-dynamic.js

@@ -1,4 +1,4 @@
-import Prefixer from '../../packages/301/dynamic'
+import Prefixer from '../../packages/300/dynamic'
 
 const CHROME45 = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36'
 

benchmark/dynamic/cases/301-dynamic.js

@@ -1,4 +1,4 @@
-import Prefixer from '../../packages/300/dynamic'
+import Prefixer from '../../packages/301/dynamic'
 
 const CHROME45 = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36'
 

benchmark/dynamic/cases/302-dynamic.js

@@ -0,0 +1,25 @@
+import Prefixer from '../../packages/302/dynamic'
+
+const CHROME45 = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36'
+
+export const dynamic302 = () => {
+  const styles = {
+    color: 'red',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    userSelect: 'none',
+    fontSize: '12px',
+    appearance: 'none',
+    ':hover': {
+      alignSelf: 'flex-start',
+      transition: '300ms transform linear',
+      transform: 'rotateX(30deg)',
+      color: 'blue',
+      width: ['calc(100% - 50px)', '300px']
+    }
+  }
+
+  const prefixer = new Prefixer({ userAgent: CHROME45 })
+  return prefixer.prefix(styles)
+}

benchmark/dynamic/cases/index.js

@@ -1,3 +1,4 @@
 export * from './205-dynamic'
 export * from './300-dynamic'
 export * from './301-dynamic'
+export * from './302-dynamic'

benchmark/dynamic/index.js

@@ -1,6 +1,6 @@
 import { Suite } from 'benchmark'
 import beautifyBenchmark from 'beautify-benchmark'
-import { dynamic205, dynamic300, dynamic301 } from './cases'
+import { dynamic205, dynamic300, dynamic301, dynamic302 } from './cases'
 
 export const run = () => {
   console.log('Running dynamic test.')
@@ -10,18 +10,20 @@ export const run = () => {
   testSuite.add('2.0.5', () => dynamic205())
   testSuite.add('3.0.0', () => dynamic300())
   testSuite.add('3.0.1', () => dynamic301())
-
+  testSuite.add('3.0.2', () => dynamic301())
+
   testSuite.on('cycle', (e) => {
     beautifyBenchmark.add(e.target)
   })
 
   testSuite.on('complete', function () {
     beautifyBenchmark.log()
     console.log(`Fastest is: ${this.filter('fastest').map('name')}\n`)
-
-	 console.log(
-       `Improvement: ${Math.round(this[this.length -1].hz / this[this.length - 2].hz * 100) / 100}x faster`
-     )
+
+    console.log(
+      `Improvement: ${Math.round(this[this.length - 1].hz / this[this.length - 2].hz * 100) /
+        100}x faster`
+    )
   })
 
   return testSuite.run({ async: true })

benchmark/packages/302/dynamic/createPrefixer.js

@@ -0,0 +1,175 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+exports.default = createPrefixer;
+
+var _getBrowserInformation = require('../utils/getBrowserInformation');
+
+var _getBrowserInformation2 = _interopRequireDefault(_getBrowserInformation);
+
+var _getPrefixedKeyframes = require('../utils/getPrefixedKeyframes');
+
+var _getPrefixedKeyframes2 = _interopRequireDefault(_getPrefixedKeyframes);
+
+var _capitalizeString = require('../utils/capitalizeString');
+
+var _capitalizeString2 = _interopRequireDefault(_capitalizeString);
+
+var _addNewValuesOnly = require('../utils/addNewValuesOnly');
+
+var _addNewValuesOnly2 = _interopRequireDefault(_addNewValuesOnly);
+
+var _isObject = require('../utils/isObject');
+
+var _isObject2 = _interopRequireDefault(_isObject);
+
+var _prefixValue = require('../utils/prefixValue');
+
+var _prefixValue2 = _interopRequireDefault(_prefixValue);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function createPrefixer(_ref) {
+  var prefixMap = _ref.prefixMap,
+      plugins = _ref.plugins;
+  var fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function (style) {
+    return style;
+  };
+
+  return function () {
+    /**
+    * Instantiante a new prefixer
+    * @param {string} userAgent - userAgent to gather prefix information according to caniuse.com
+    * @param {string} keepUnprefixed - keeps unprefixed properties and values
+    */
+    function Prefixer() {
+      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+      _classCallCheck(this, Prefixer);
+
+      var defaultUserAgent = typeof navigator !== 'undefined' ? navigator.userAgent : undefined;
+
+      this._userAgent = options.userAgent || defaultUserAgent;
+      this._keepUnprefixed = options.keepUnprefixed || false;
+
+      if (this._userAgent) {
+        this._browserInfo = (0, _getBrowserInformation2.default)(this._userAgent);
+      }
+
+      // Checks if the userAgent was resolved correctly
+      if (this._browserInfo && this._browserInfo.cssPrefix) {
+        this.prefixedKeyframes = (0, _getPrefixedKeyframes2.default)(this._browserInfo.browserName, this._browserInfo.browserVersion, this._browserInfo.cssPrefix);
+      } else {
+        this._useFallback = true;
+        return false;
+      }
+
+      var prefixData = this._browserInfo.browserName && prefixMap[this._browserInfo.browserName];
+      if (prefixData) {
+        this._requiresPrefix = {};
+
+        for (var property in prefixData) {
+          if (prefixData[property] >= this._browserInfo.browserVersion) {
+            this._requiresPrefix[property] = true;
+          }
+        }
+
+        this._hasPropsRequiringPrefix = Object.keys(this._requiresPrefix).length > 0;
+      } else {
+        this._useFallback = true;
+      }
+
+      this._metaData = {
+        browserVersion: this._browserInfo.browserVersion,
+        browserName: this._browserInfo.browserName,
+        cssPrefix: this._browserInfo.cssPrefix,
+        jsPrefix: this._browserInfo.jsPrefix,
+        keepUnprefixed: this._keepUnprefixed,
+        requiresPrefix: this._requiresPrefix
+      };
+    }
+
+    _createClass(Prefixer, [{
+      key: 'prefix',
+      value: function prefix(style) {
+        // use static prefixer as fallback if userAgent can not be resolved
+        if (this._useFallback) {
+          return fallback(style);
+        }
+
+        // only add prefixes if needed
+        if (!this._hasPropsRequiringPrefix) {
+          return style;
+        }
+
+        return this._prefixStyle(style);
+      }
+    }, {
+      key: '_prefixStyle',
+      value: function _prefixStyle(style) {
+        for (var property in style) {
+          var value = style[property];
+
+          // handle nested objects
+          if ((0, _isObject2.default)(value)) {
+            style[property] = this.prefix(value);
+            // handle array values
+          } else if (Array.isArray(value)) {
+            var combinedValue = [];
+
+            for (var i = 0, len = value.length; i < len; ++i) {
+              var processedValue = (0, _prefixValue2.default)(plugins, property, value[i], style, this._metaData);
+              (0, _addNewValuesOnly2.default)(combinedValue, processedValue || value[i]);
+            }
+
+            // only modify the value if it was touched
+            // by any plugin to prevent unnecessary mutations
+            if (combinedValue.length > 0) {
+              style[property] = combinedValue;
+            }
+          } else {
+            var _processedValue = (0, _prefixValue2.default)(plugins, property, value, style, this._metaData);
+
+            // only modify the value if it was touched
+            // by any plugin to prevent unnecessary mutations
+            if (_processedValue) {
+              style[property] = _processedValue;
+            }
+
+            // add prefixes to properties
+            if (this._requiresPrefix.hasOwnProperty(property)) {
+              style[this._browserInfo.jsPrefix + (0, _capitalizeString2.default)(property)] = value;
+              if (!this._keepUnprefixed) {
+                delete style[property];
+              }
+            }
+          }
+        }
+
+        return style;
+      }
+
+      /**
+      * Returns a prefixed version of the style object using all vendor prefixes
+      * @param {Object} styles - Style object that gets prefixed properties added
+      * @returns {Object} - Style object with prefixed properties and values
+      */
+
+    }], [{
+      key: 'prefixAll',
+      value: function prefixAll(styles) {
+        return fallback(styles);
+      }
+    }]);
+
+    return Prefixer;
+  }();
+}
+module.exports = exports['default'];