jss-vendor-prefixer - npm Package Compare versions

Comparing version 0.3.0 to 1.0.0

dist/jss-vendor-prefixer.js

@@ -62,11 +62,8 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+	function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
 
 	var _cssVendor = __webpack_require__(1);
 
-	var _cssVendor2 = _interopRequireDefault(_cssVendor);
+	var vendor = _interopRequireWildcard(_cssVendor);
 
-	var KEYFRAMES = '@keyframes';
-	var KEYFRAMES_LENGHT = KEYFRAMES.length;
-
 	/**
@@ -79,26 +76,28 @@ * Add vendor prefix to a property name when needed.
 
-	function jssVendorPrefixer(rule) {
-	  var style = rule.style;
+	function jssVendorPrefixer() {
+	  return function (rule) {
+	    if (rule.type === 'keyframe') {
+	      rule.selector = '@' + vendor.prefix.css + 'keyframes' + rule.selector.substr(10);
+	      return;
+	    }
 
-	  if (rule.isAtRule && rule.selector.substr(0, KEYFRAMES_LENGHT) === KEYFRAMES) {
-	    rule.selector = '@' + _cssVendor2['default'].prefix.css + 'keyframes' + rule.selector.substr(KEYFRAMES_LENGHT);
-	    return;
-	  }
+	    if (rule.type !== 'regular') return;
 
-	  for (var prop in style) {
-	    var value = style[prop];
+	    for (var prop in rule.style) {
+	      var value = rule.style[prop];
 
-	    var changeProp = false;
-	    var supportedProp = _cssVendor2['default'].supportedProperty(prop);
-	    if (supportedProp && supportedProp !== prop) changeProp = true;
+	      var changeProp = false;
+	      var supportedProp = vendor.supportedProperty(prop);
+	      if (supportedProp && supportedProp !== prop) changeProp = true;
 
-	    var changeValue = false;
-	    var supportedValue = _cssVendor2['default'].supportedValue(supportedProp, value);
-	    if (supportedValue && supportedValue !== value) changeValue = true;
+	      var changeValue = false;
+	      var supportedValue = vendor.supportedValue(supportedProp, value);
+	      if (supportedValue && supportedValue !== value) changeValue = true;
 
-	    if (changeProp || changeValue) {
-	      if (changeProp) delete style[prop];
-	      style[supportedProp] = supportedValue;
+	      if (changeProp || changeValue) {
+	        if (changeProp) delete rule.style[prop];
+	        rule.style[supportedProp] = supportedValue;
+	      }
 	    }
-	  }
+	  };
 	}
@@ -112,33 +111,34 @@
 
-	'use strict'
-
 	/**
-	 * Vendor prefix string for the current browser.
+	 * CSS Vendor prefix detection and property feature testing.
 	 *
-	 * @type {{js: String, css: String}}
-	 * @api public
+	 * @copyright Oleg Slobodskoi 2015
+	 * @website https://github.com/jsstyles/css-vendor
+	 * @license MIT
 	 */
-	exports.prefix = __webpack_require__(2)
 
-	/**
-	 * Test if a property is supported, returns property with vendor
-	 * prefix if required, otherwise `false`.
-	 *
-	 * @param {String} prop
-	 * @return {String|Boolean}
-	 * @api public
-	 */
-	exports.supportedProperty = __webpack_require__(3)
+	'use strict';
 
-	/**
-	 * Returns prefixed value if needed. Returns `false` if value is not supported.
-	 *
-	 * @param {String} property
-	 * @param {String} value
-	 * @return {String|Boolean}
-	 * @api public
-	 */
-	 exports.supportedValue = __webpack_require__(5)
+	exports.__esModule = true;
 
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
+	var _prefix2 = __webpack_require__(2);
+
+	var _prefix3 = _interopRequireDefault(_prefix2);
+
+	exports.prefix = _prefix3['default'];
+
+	var _supportedProperty2 = __webpack_require__(3);
+
+	var _supportedProperty3 = _interopRequireDefault(_supportedProperty2);
+
+	exports.supportedProperty = _supportedProperty3['default'];
+
+	var _supportedValue2 = __webpack_require__(5);
+
+	var _supportedValue3 = _interopRequireDefault(_supportedValue2);
+
+	exports.supportedValue = _supportedValue3['default'];
+
 /***/ },
@@ -148,4 +148,2 @@ /* 2 */
 
-	'use strict'
-
 	/**
@@ -156,3 +154,11 @@ * Export javascript style and css style vendor prefixes.
 
-	var jsCssMap = {
+	'use strict';
+
+	exports.__esModule = true;
+	var js = '';
+	var css = '';
+
+	// We should not do anything if required serverside.
+	if (typeof document != 'undefined') {
+	  var jsCssMap = {
 	    Webkit: '-webkit-',
@@ -163,15 +169,23 @@ Moz: '-moz-',
 	    O: '-o-'
-	}
+	  };
+	  var style = document.createElement('p').style;
+	  var testProp = 'Transform';
 
-	var style = document.createElement('p').style
-	var testProp = 'Transform'
-
-	for (var js in jsCssMap) {
-	    if ((js + testProp) in style) {
-	        exports.js = js
-	        exports.css = jsCssMap[js]
-	        break
+	  for (var key in jsCssMap) {
+	    if (key + testProp in style) {
+	      js = key;
+	      css = jsCssMap[key];
+	      break;
 	    }
+	  }
 	}
 
+	/**
+	 * Vendor prefix string for the current browser.
+	 *
+	 * @type {{js: String, css: String}}
+	 * @api public
+	 */
+	exports['default'] = { js: js, css: css };
+	module.exports = exports['default'];
 
@@ -182,29 +196,38 @@ /***/ },
 
-	'use strict'
+	'use strict';
 
-	var prefix = __webpack_require__(2)
-	var camelize = __webpack_require__(4)
+	exports.__esModule = true;
+	exports['default'] = supportedProperty;
 
-	var el = document.createElement('p')
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-	/**
-	 * We test every property on vendor prefix requirement.
-	 * Once tested, result is cached. It gives us up to 70% perf boost.
-	 * http://jsperf.com/element-style-object-access-vs-plain-object
-	 *
-	 * Prefill cache with known css properties to reduce amount of
-	 * properties we need to feature test at runtime.
-	 * http://davidwalsh.name/vendor-prefix
-	 */
-	var cache = (function() {
-	    var computed = window.getComputedStyle(document.documentElement, '')
-	    var cache = {}
+	var _prefix = __webpack_require__(2);
 
-	    for (var key in computed) {
-	        cache[computed[key]] = computed[key]
-	    }
+	var _prefix2 = _interopRequireDefault(_prefix);
 
-	    return cache
-	}())
+	var _camelize = __webpack_require__(4);
 
+	var _camelize2 = _interopRequireDefault(_camelize);
+
+	var el = undefined;
+	var cache = {};
+
+	if (typeof document != 'undefined') {
+	  el = document.createElement('p');
+
+	  /**
+	   * We test every property on vendor prefix requirement.
+	   * Once tested, result is cached. It gives us up to 70% perf boost.
+	   * http://jsperf.com/element-style-object-access-vs-plain-object
+	   *
+	   * Prefill cache with known css properties to reduce amount of
+	   * properties we need to feature test at runtime.
+	   * http://davidwalsh.name/vendor-prefix
+	   */
+	  var computed = window.getComputedStyle(document.documentElement, '');
+	  for (var key in computed) {
+	    cache[computed[key]] = computed[key];
+	  }
+	}
+
 	/**
@@ -218,21 +241,23 @@ * Test if a property is supported, returns supported property with vendor
 	 */
-	module.exports = function (prop) {
-	    // We have not tested this prop yet, lets do the test.
-	    if (cache[prop] != null) return cache[prop]
 
-	    // Camelization is required because we can't test using
-	    // css syntax for e.g. in FF.
-	    // Test if property is supported as it is.
-	    if (camelize(prop) in el.style) {
-	        cache[prop] = prop
+	function supportedProperty(prop) {
+	  // We have not tested this prop yet, lets do the test.
+	  if (cache[prop] != null) return cache[prop];
+
+	  // Camelization is required because we can't test using
+	  // css syntax for e.g. in FF.
+	  // Test if property is supported as it is.
+	  if (_camelize2['default'](prop) in el.style) {
+	    cache[prop] = prop;
 	    // Test if property is supported with vendor prefix.
-	    } else if ((prefix.js + camelize('-' + prop)) in el.style) {
-	        cache[prop] = prefix.css + prop
+	  } else if (_prefix2['default'].js + _camelize2['default']('-' + prop) in el.style) {
+	      cache[prop] = _prefix2['default'].css + prop;
 	    } else {
-	        cache[prop] = false
+	      cache[prop] = false;
 	    }
 
-	    return cache[prop]
+	  return cache[prop];
 	}
 
+	module.exports = exports['default'];
 
@@ -243,5 +268,7 @@ /***/ },
 
-	'use strict'
+	'use strict';
 
-	var regExp = /[-\s]+(.)?/g
+	exports.__esModule = true;
+	exports['default'] = camelize;
+	var regExp = /[-\s]+(.)?/g;
 
@@ -254,12 +281,12 @@ /**
 	 */
-	module.exports = function(str) {
-	    return str.replace(regExp, toUpper)
+
+	function camelize(str) {
+	  return str.replace(regExp, toUpper);
 	}
 
 	function toUpper(match, c) {
-	    return c ? c.toUpperCase() : ''
+	  return c ? c.toUpperCase() : '';
 	}
+	module.exports = exports['default'];
 
-
-
 /***/ },
@@ -269,10 +296,18 @@ /* 5 */
 
-	'use strict'
+	'use strict';
 
-	var prefix = __webpack_require__(2)
+	exports.__esModule = true;
+	exports['default'] = supportedValue;
 
-	var cache = {}
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-	var el = document.createElement('p')
+	var _prefix = __webpack_require__(2);
 
+	var _prefix2 = _interopRequireDefault(_prefix);
+
+	var cache = {};
+	var el = undefined;
+
+	if (typeof document != 'undefined') el = document.createElement('p');
+
 	/**
@@ -286,29 +321,35 @@ * Returns prefixed value if needed. Returns `false` if value is not supported.
 	 */
-	module.exports = function (property, value) {
-	    if (typeof value != 'string') return value
 
-	    var cacheKey = property + value
+	function supportedValue(property, value) {
+	  if (typeof value != 'string' || !isNaN(parseInt(value, 10))) return value;
 
-	    if (cache[cacheKey] != null) return cache[cacheKey]
+	  var cacheKey = property + value;
 
-	    // Test value as it is.
-	    el.style[property] = value
+	  if (cache[cacheKey] != null) return cache[cacheKey];
 
-	    // Value is supported as it is.
-	    if (el.style[property] == value) {
-	        cache[cacheKey] = value
-	    } else {
-	        // Test value with vendor prefix.
-	        value = prefix.css + value
-	        el.style[property] = value
+	  // Test value as it is.
+	  el.style[property] = value;
 
-	        // Value is supported with vendor prefix.
-	        if (el.style[property] == value) cache[cacheKey] = value
-	    }
+	  // Value is supported as it is.
+	  if (el.style[property] === value) {
+	    cache[cacheKey] = value;
+	  } else {
+	    // Test value with vendor prefix.
+	    value = _prefix2['default'].css + value;
 
-	    if (!cache[cacheKey]) cache[cacheKey] = false
+	    // Hardcode test to convert "flex" to "-ms-flexbox" for IE10.
+	    if (value === '-ms-flex') value = '-ms-flexbox';
 
-	    return cache[cacheKey]
+	    el.style[property] = value;
+
+	    // Value is supported with vendor prefix.
+	    if (el.style[property] === value) cache[cacheKey] = value;
+	  }
+
+	  if (!cache[cacheKey]) cache[cacheKey] = false;
+
+	  return cache[cacheKey];
 	}
 
+	module.exports = exports['default'];
 
@@ -315,0 +356,0 @@ /***/ }

dist/jss-vendor-prefixer.min.js

@@ -1,1 +0,8 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.jssVendorPrefixer=t():e.jssVendorPrefixer=t()}(this,function(){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e){var t=e.style;if(e.isAtRule&&e.selector.substr(0,f)===i)return void(e.selector="@"+u["default"].prefix.css+"keyframes"+e.selector.substr(f));for(var r in t){var n=t[r],o=!1,s=u["default"].supportedProperty(r);s&&s!==r&&(o=!0);var c=!1,l=u["default"].supportedValue(s,n);l&&l!==n&&(c=!0),(o||c)&&(o&&delete t[r],t[s]=l)}}t.__esModule=!0,t["default"]=o;var s=r(1),u=n(s),i="@keyframes",f=i.length;e.exports=t["default"]},function(e,t,r){"use strict";t.prefix=r(2),t.supportedProperty=r(3),t.supportedValue=r(5)},function(e,t){"use strict";var r={Webkit:"-webkit-",Moz:"-moz-",ms:"-ms-",O:"-o-"},n=document.createElement("p").style,o="Transform";for(var s in r)if(s+o in n){t.js=s,t.css=r[s];break}},function(e,t,r){"use strict";var n=r(2),o=r(4),s=document.createElement("p"),u=function(){var e=window.getComputedStyle(document.documentElement,""),t={};for(var r in e)t[e[r]]=e[r];return t}();e.exports=function(e){return null!=u[e]?u[e]:(o(e)in s.style?u[e]=e:n.js+o("-"+e)in s.style?u[e]=n.css+e:u[e]=!1,u[e])}},function(e,t){"use strict";function r(e,t){return t?t.toUpperCase():""}var n=/[-\s]+(.)?/g;e.exports=function(e){return e.replace(n,r)}},function(e,t,r){"use strict";var n=r(2),o={},s=document.createElement("p");e.exports=function(e,t){if("string"!=typeof t)return t;var r=e+t;return null!=o[r]?o[r]:(s.style[e]=t,s.style[e]==t?o[r]=t:(t=n.css+t,s.style[e]=t,s.style[e]==t&&(o[r]=t)),o[r]||(o[r]=!1),o[r])}}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.jssVendorPrefixer=t():e.jssVendorPrefixer=t()}(this,function(){return function(e){function t(u){if(r[u])return r[u].exports;var n=r[u]={exports:{},id:u,loaded:!1};return e[u].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";function u(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t["default"]=e,t}function n(){return function(e){if("keyframe"===e.type)return void(e.selector="@"+s.prefix.css+"keyframes"+e.selector.substr(10));if("regular"===e.type)for(var t in e.style){var r=e.style[t],u=!1,n=s.supportedProperty(t);n&&n!==t&&(u=!0);var o=!1,f=s.supportedValue(n,r);f&&f!==r&&(o=!0),(u||o)&&(u&&delete e.style[t],e.style[n]=f)}}}t.__esModule=!0,t["default"]=n;var o=r(1),s=u(o);e.exports=t["default"]},function(e,t,r){/**
+	 * CSS Vendor prefix detection and property feature testing.
+	 *
+	 * @copyright Oleg Slobodskoi 2015
+	 * @website https://github.com/jsstyles/css-vendor
+	 * @license MIT
+	 */
+"use strict";function u(e){return e&&e.__esModule?e:{"default":e}}t.__esModule=!0;var n=r(2),o=u(n);t.prefix=o["default"];var s=r(3),f=u(s);t.supportedProperty=f["default"];var l=r(5),d=u(l);t.supportedValue=d["default"]},function(e,t){"use strict";t.__esModule=!0;var r="",u="";if("undefined"!=typeof document){var n={Webkit:"-webkit-",Moz:"-moz-",ms:"-ms-",O:"-o-"},o=document.createElement("p").style,s="Transform";for(var f in n)if(f+s in o){r=f,u=n[f];break}}t["default"]={js:r,css:u},e.exports=t["default"]},function(e,t,r){"use strict";function u(e){return e&&e.__esModule?e:{"default":e}}function n(e){return null!=i[e]?i[e]:(l["default"](e)in d.style?i[e]=e:s["default"].js+l["default"]("-"+e)in d.style?i[e]=s["default"].css+e:i[e]=!1,i[e])}t.__esModule=!0,t["default"]=n;var o=r(2),s=u(o),f=r(4),l=u(f),d=void 0,i={};if("undefined"!=typeof document){d=document.createElement("p");var a=window.getComputedStyle(document.documentElement,"");for(var c in a)i[a[c]]=a[c]}e.exports=t["default"]},function(e,t){"use strict";function r(e){return e.replace(n,u)}function u(e,t){return t?t.toUpperCase():""}t.__esModule=!0,t["default"]=r;var n=/[-\s]+(.)?/g;e.exports=t["default"]},function(e,t,r){"use strict";function u(e){return e&&e.__esModule?e:{"default":e}}function n(e,t){if("string"!=typeof t||!isNaN(parseInt(t,10)))return t;var r=e+t;return null!=f[r]?f[r]:(l.style[e]=t,l.style[e]===t?f[r]=t:(t=s["default"].css+t,"-ms-flex"===t&&(t="-ms-flexbox"),l.style[e]=t,l.style[e]===t&&(f[r]=t)),f[r]||(f[r]=!1),f[r])}t.__esModule=!0,t["default"]=n;var o=r(2),s=u(o),f={},l=void 0;"undefined"!=typeof document&&(l=document.createElement("p")),e.exports=t["default"]}])});

history.md

@@ -0,1 +1,6 @@
+## 1.0.0 / 2015-10-19
+
+- support jss 3.0
+- now plugin needs to be called like a middleware
+
 ## 0.3.0 / 2015-09-21
@@ -2,0 +7,0 @@

lib/index.js

@@ -6,11 +6,8 @@ 'use strict';
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
 
 var _cssVendor = require('css-vendor');
 
-var _cssVendor2 = _interopRequireDefault(_cssVendor);
+var vendor = _interopRequireWildcard(_cssVendor);
 
-var KEYFRAMES = '@keyframes';
-var KEYFRAMES_LENGHT = KEYFRAMES.length;
-
 /**
@@ -23,28 +20,30 @@ * Add vendor prefix to a property name when needed.
 
-function jssVendorPrefixer(rule) {
-  var style = rule.style;
+function jssVendorPrefixer() {
+  return function (rule) {
+    if (rule.type === 'keyframe') {
+      rule.selector = '@' + vendor.prefix.css + 'keyframes' + rule.selector.substr(10);
+      return;
+    }
 
-  if (rule.isAtRule && rule.selector.substr(0, KEYFRAMES_LENGHT) === KEYFRAMES) {
-    rule.selector = '@' + _cssVendor2['default'].prefix.css + 'keyframes' + rule.selector.substr(KEYFRAMES_LENGHT);
-    return;
-  }
+    if (rule.type !== 'regular') return;
 
-  for (var prop in style) {
-    var value = style[prop];
+    for (var prop in rule.style) {
+      var value = rule.style[prop];
 
-    var changeProp = false;
-    var supportedProp = _cssVendor2['default'].supportedProperty(prop);
-    if (supportedProp && supportedProp !== prop) changeProp = true;
+      var changeProp = false;
+      var supportedProp = vendor.supportedProperty(prop);
+      if (supportedProp && supportedProp !== prop) changeProp = true;
 
-    var changeValue = false;
-    var supportedValue = _cssVendor2['default'].supportedValue(supportedProp, value);
-    if (supportedValue && supportedValue !== value) changeValue = true;
+      var changeValue = false;
+      var supportedValue = vendor.supportedValue(supportedProp, value);
+      if (supportedValue && supportedValue !== value) changeValue = true;
 
-    if (changeProp || changeValue) {
-      if (changeProp) delete style[prop];
-      style[supportedProp] = supportedValue;
+      if (changeProp || changeValue) {
+        if (changeProp) delete rule.style[prop];
+        rule.style[supportedProp] = supportedValue;
+      }
     }
-  }
+  };
 }
 
 module.exports = exports['default'];

package.json

 {
   "name": "jss-vendor-prefixer",
   "description": "JSS plugin that handles vendor prefixes on the browser",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "author": {
@@ -33,3 +33,3 @@ "name": "Oleg Slobodskoi",
   "dependencies": {
-    "css-vendor": "^0.2.0"
+    "css-vendor": "^0.3.1"
   },
@@ -46,3 +46,3 @@ "main": "./lib/index.js",
     "eslint-plugin-react": "^2.7.0",
-    "jss": "^2.3.4",
+    "jss": ">=3.0.0 < 4.0.0",
     "opener": "^1.4.1",
@@ -54,4 +54,4 @@ "qunitjs": "1.15.0",
   "peerDependencies": {
-    "jss": "^2.3.4"
+    "jss": ">=3.0.0 < 4.0.0"
   }
 }

readme.md

@@ -22,5 +22,5 @@ ![JSS logo](https://avatars1.githubusercontent.com/u/9503099?v=3&s=60)
 
-jss.use(vendorPrefixer)
+jss.use(vendorPrefixer())
 
-const styleSheet = jss.createStyleSheet({
+let sheet = jss.createStyleSheet({
   container: {
@@ -48,3 +48,2 @@ transform: 'translateX(100px)'
 
-
 ## Run tests
@@ -57,5 +56,4 @@
 
-
 ## License
 
 MIT

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18128

increased by16.9%

Lines of code

330

increased by11.49%

Number of low quality alerts

1

decreased by-50%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

57

decreased by-3.39%

Dependency changes

• + Addedcss-vendor@0.3.8(transitive)

• + Addedis-in-browser@1.1.3(transitive)

• + Addedjss@3.11.1(transitive)

• - Removedcss-vendor@0.2.5(transitive)

• - Removedjss@2.3.5(transitive)

• Updatedcss-vendor@^0.3.1