react-prefixer - npm Package Compare versions

Comparing version 1.1.4 to 2.0.0-0

lib/index.js

@@ -1,67 +0,85 @@
-"use strict";
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _prefix = require("./prefix");
+var _isPlainObject = require('lodash/isPlainObject');
 
+var _isPlainObject2 = _interopRequireDefault(_isPlainObject);
+
+var _prefix = require('./prefix');
+
 var _prefix2 = _interopRequireDefault(_prefix);
 
-var _properties = require("./properties");
+var _supports = require('./supports');
 
-var _properties2 = _interopRequireDefault(_properties);
+var _supports2 = _interopRequireDefault(_supports);
 
-var _animatableValues = require("./animatableValues");
+var _constants = require('./constants');
 
-var _animatableValues2 = _interopRequireDefault(_animatableValues);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _CssSupportsPolyfill = require("./CssSupportsPolyfill");
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var _CssSupportsPolyfill2 = _interopRequireDefault(_CssSupportsPolyfill);
+var toKebabCase = function toKebabCase(string) {
+  return string.replace(/([A-Z])/g, function ($1) {
+    return '-' + $1.toLowerCase();
+  });
+};
 
-function camelToKebab(str) {
-    return str.replace(/\W+/g, "-").replace(/([a-z\d])([A-Z])/g, "$1-$2").toLowerCase();
-}
+/**
+ * create a new style object with prefixes applied
+ *
+ * @param {Object} object
+ * @returns {Object}
+ */
+var applyPrefixes = function applyPrefixes(object) {
+  if (!(0, _isPlainObject2.default)(object)) {
+    return object;
+  }
 
-function applyPrefixes(obj) {
-    if (typeof obj === "object" && !!obj) {
-        Object.keys(obj).forEach(function (key) {
-            var realKey = key;
+  var value = void 0;
 
-            if (typeof obj[key] === "object" && !!obj[key]) {
-                obj[key] = applyPrefixes(obj[key]);
-            } else if (_properties2["default"].indexOf(key) !== -1 && !(0, _CssSupportsPolyfill2["default"])(camelToKebab(key))) {
-                var value = obj[key];
+  return Object.keys(object).reduce(function (styleObject, originalKey) {
+    var key = originalKey;
 
-                realKey = _prefix2["default"].js + key.charAt(0).toUpperCase() + key.slice(1);
+    value = object[key];
 
-                delete obj[key];
-                obj[realKey] = value;
-            }
+    if ((0, _isPlainObject2.default)(value)) {
+      return _extends({}, styleObject, _defineProperty({}, key, applyPrefixes(value)));
+    }
 
-            if (realKey === "display" && obj[realKey] === "flex" && !(0, _CssSupportsPolyfill2["default"])("display", "flex")) {
-                obj[realKey] = _prefix2["default"] === "ms" ? "-ms-flexbox" : _prefix2["default"].css + "flex";
-            }
+    if (_constants.CSS_PROPERTIES.indexOf(key) !== -1 && !(0, _supports2.default)(toKebabCase(key))) {
+      key = '' + _prefix2.default.js + key.charAt(0).toUpperCase() + key.slice(1);
+    }
 
-            if (key === "transition") {
-                _animatableValues2["default"].forEach(function (animatableValue) {
-                    var kebabValue = camelToKebab(animatableValue);
+    if (originalKey === 'display' && object[originalKey] === 'flex' && !(0, _supports2.default)('display', 'flex')) {
+      return _extends({}, styleObject, _defineProperty({}, key, _prefix2.default.js === 'ms' ? '-ms-flexbox' : _prefix2.default.css + 'flex'));
+    }
 
-                    if (!(0, _CssSupportsPolyfill2["default"])(kebabValue)) {
-                        var re = new RegExp(kebabValue, "g");
+    if (originalKey === 'transition') {
+      var animatableValuesObject = _constants.ANIMATABLE_VALUES.reduce(function (animatableValues, animatableValue) {
+        var kebabValue = toKebabCase(animatableValue);
+        var re = new RegExp(kebabValue, 'g');
 
-                        obj[realKey] = obj[realKey].replace(re, _prefix2["default"].css + kebabValue);
-                    }
-                });
-            }
-        });
+        if (re.test(object[originalKey]) && !(0, _supports2.default)(kebabValue)) {
+          var cleanValue = object[originalKey].replace(re, '' + _prefix2.default.css + kebabValue);
+
+          return _extends({}, animatableValues, _defineProperty({}, key, cleanValue));
+        }
+
+        return animatableValues;
+      }, {});
+
+      return _extends({}, styleObject, animatableValuesObject);
     }
 
-    return obj;
-}
+    return _extends({}, styleObject, _defineProperty({}, key, value));
+  }, {});
+};
 
-exports["default"] = applyPrefixes;
-module.exports = exports["default"];
+exports.default = applyPrefixes;
+module.exports = exports['default'];

lib/prefix.js

@@ -1,18 +0,37 @@
-"use strict";
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-var styles = window.getComputedStyle(document.documentElement, ""),
-    prefix = Array.prototype.slice.call(styles).join("").match(/-(moz|webkit|ms)-/)[1] || styles.OLink === "" && ["", "o"],
-    ret = {
-    css: "-" + prefix + "-",
-    js: prefix
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var prefixObject = {
+  css: '',
+  js: ''
 };
 
-if (ret.js !== "ms") {
-    ret.js = ret.js.charAt(0).toUpperCase() + ret.js.slice(1);
+if (typeof window !== 'undefined') {
+  var styles = window.getComputedStyle(document.documentElement);
+
+  var prefixString = Array.prototype.slice.call(styles).join('');
+  var standardPrefixString = prefixString.match(/-(moz|webkit|ms)-/);
+  var operaPrefixString = prefixString.match(styles.OLink === '' && ['', 'o']);
+  var prefixMatch = standardPrefixString || operaPrefixString;
+
+  var prefix = prefixMatch ? prefixMatch[1] : '';
+
+  prefixObject = {
+    css: '-' + prefix + '-',
+    js: prefix
+  };
+
+  if (prefixObject.js !== 'ms') {
+    prefixObject = _extends({}, prefixObject, {
+      js: '' + prefixObject.js.charAt(0).toUpperCase() + prefixObject.js.slice(1)
+    });
+  }
 }
 
-exports["default"] = ret;
-module.exports = exports["default"];
+exports.default = prefixObject;
+module.exports = exports['default'];

package.json

 {
   "author": "tquetano-r7",
+  "ava": {
+    "babel": "inherit",
+    "concurrency": 10,
+    "failFast": true,
+    "files": [
+      "test/**/*.js",
+      "!test/helpers/**"
+    ],
+    "source": [
+      "src/*.js"
+    ],
+    "require": [
+      "babel-register",
+      "babel-polyfill",
+      "./test/helpers/setup-browser-env.js"
+    ],
+    "verbose": true
+  },
   "bugs": {
     "url": "https://github.com/rapid7/react-prefixer/issues"
   },
+  "dependencies": {
+    "lodash": "^4.16.6"
+  },
   "description": "Add vendor-specific prefixes to React styles",
   "devDependencies": {
-    "babel": "~5.8.21",
-    "babel-core": "~5.8.22",
-    "babel-loader": "~5.3.2",
-    "lodash": "^3.10.1",
-    "webpack": "~1.11.0"
+    "ava": "^0.16.0",
+    "babel": "~6.5.2",
+    "babel-cli": "^6.18.0",
+    "babel-core": "~6.18.2",
+    "babel-eslint": "^7.1.0",
+    "babel-loader": "~6.2.7",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-polyfill": "^6.16.0",
+    "babel-preset-latest": "^6.16.0",
+    "babel-preset-react": "^6.16.0",
+    "babel-preset-stage-2": "^6.18.0",
+    "babel-register": "^6.18.0",
+    "eslint": "^3.9.1",
+    "eslint-config-rapid7": "^2.6.0",
+    "eslint-friendly-formatter": "^2.0.6",
+    "eslint-loader": "^1.6.1",
+    "html-webpack-plugin": "^2.24.1",
+    "in-publish": "^2.0.0",
+    "jsdom": "^9.8.3",
+    "jsdom-global": "^2.1.0",
+    "lodash": "^4.16.6",
+    "lodash-webpack-plugin": "^0.10.5",
+    "optimize-js-plugin": "0.0.4",
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2",
+    "rimraf": "^2.5.4",
+    "sinon": "^1.17.6",
+    "webpack": "^1.13.3",
+    "webpack-dashboard": "^0.2.0",
+    "webpack-dev-server": "^1.16.2"
   },
@@ -32,7 +78,15 @@ "homepage": "https://github.com/rapid7/recess#readme",
   "scripts": {
-    "compile": "babel -d lib/ src/",
-    "dist": "npm run compile && webpack && webpack --config=webpack.config.minified.js",
-    "prepublish": "npm run compile"
+    "build": "NODE_ENV=development webpack --profile --progress",
+    "build:minified": "NODE_ENV=production webpack --profile --progress --config=webpack.config.minified.js",
+    "clean": "rimraf lib && rimraf dist",
+    "lint": "NODE_ENV=test eslint src",
+    "lint:fix": "NODE_ENV=test eslint src --fix",
+    "prepublish": "in-publish && npm run prepublish:compile || echo ''",
+    "prepublish:compile": "npm run clean && npm run lint && npm test && npm run transpile && npm run build && npm run build:minified",
+    "start": "NODE_ENV=development webpack-dashboard -- webpack-dev-server --config=webpack.config.dev.js",
+    "test": "NODE_PATH=. NODE_ENV=test ava --no-cache",
+    "test:watch": "NODE_PATH=. NODE_ENV=test ava --watch",
+    "transpile": "babel src --out-dir lib"
   },
-  "version": "1.1.4"
+  "version": "2.0.0-0"
 }

README.md

 # react-prefixer
 
-react-prefixer is a tiny package designed to provide vender-specific prefixes to the style objects you use in your React project. To install:
+react-prefixer is a tiny package designed to provide vender-specific prefixes to the style objects you use in your React project.
 
+#### Table of contents
+* [Installation](#installation)
+* [Usage](#usage)
+* [Test environments](#test-environments)
+* [Browser support](#browser-support)
+* [Development](#development)
+
+#### Installation
+
 ```
@@ -9,9 +18,10 @@ $ npm install react-prefixer
 
-It's usage is pretty straightforward:
+#### Usage
 
-```
-var prefix = require("react-prefixer"),
-    styles = prefix({
-      userSelect:"none"
-    });
+```javascript
+import prefix from 'react-prefixer';
+
+const styles = prefix({
+  userSelect: 'none'
+});
     
@@ -23,15 +33,16 @@ console.log(styles); // {WebkitUserSelect:"none"}
 
-```
-var prefix = require("react-prefixer"),
-    styles = prefix({
-      some:{
-        really:{
-          deep:{
-            style:{
-              userSelect:"none"
-            }
-          }
+```javascript
+import prefix from 'react-prefixer';
+
+const styles = prefix({
+  some:{
+    really:{
+      deep:{
+        style:{
+          userSelect: 'none'
         }
       }
-    });
+    }
+  }
+});
     
@@ -43,7 +54,8 @@ console.log(styles); // {some:{really:{deep:{style:{WebkitUserSelect:"none"}}}}}
 
-```
-var prefix = require("react-prefixer"),
-    styles = prefix({
-      transition:"transform 200ms"
-    });
+```javascript
+import prefix from 'react-prefixer';
+
+const styles = prefix({
+  transition: 'transform 200ms'
+});
     
@@ -55,14 +67,32 @@ console.log(styles); // {WebkitTransition:"-webkit-transform 200ms"}, if on Safari for example
 
-```
-var prefix = require("react-prefixer"),
-    styles = prefix({
-      display:"flex"
-    });
+```javascript
+import prefix from 'react-prefixer';
+
+const styles = prefix({
+  display: 'flex'
+});
     
 console.log(styles); 
-// {display:"-webkit-flex"}, if on Safari
-// {display:"-ms-flexbox"}, if on IE10
+// {display: '-webkit-flex'}, if on Safari
+// {display: '-ms-flexbox'}, if on IE10
 ```
 
-Browser support:
+#### Test environments
+
+When running in test environments where there is a JS-based DOM (`jsdom` for example), the `getComputedStyle` method will return an empty array of styles when calculating the prefix. This previously caused an error which is since resolved, however it will default to assuming no browser prefix at all. As such, if you want to perform tests based on a specific browser prefix, you will need to mock the `getComputedStyle` property on the `window`. An example that is for tests with Webkit browsers:
+
+```javascript
+const originalGetComputedStyle = window.getComputedStyle;
+
+window.getComputedStyle = function(...args) {
+  if (arguments[0] === document.documentElement) {
+    return ['-webkit-appearance'];
+  }
+
+  return originalGetComputedStyle.apply(window, args);
+};
+```
+
+#### Browser support
+
 * IE10+ and Edge
@@ -74,2 +104,17 @@ * Firefox
 
+#### Development
+
+Standard stuff, clone the repo and `npm i` to get the dependencies. npm scripts available:
+* `build` => runs webpack to build the compiled JS file with `NODE_ENV` set to `development`
+* `build:minified` => runs webpack to build the compiled and optimized JS file with `NODE_ENV` set to `production`
+* `clean` => runs `rimraf` on both `lib` and `dist` directories
+* `dev` => runs the webpack dev server for the playground
+* `lint` => runs ESLint against files in the `src` folder
+* `lint:fix` => runs `lint` with `--fix` applied
+* `prepublish` => if in publish, runs `prepublish:compile`
+* `prepublish:compile` => runs `clean`, `lint`, `test`, `transpile`, `build` and `build:minified`
+* `test` => runs `ava` against all files in `src`
+* `test:watch` => runs `test` with a persistent watcher
+* `transpile` => runs Babel against files in `src` to files in `lib`
+
 Happy prefixing!

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

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

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

122104

increased by64.94%

Lines of code

880

increased by722.43%

Number of lines in readme file

116

increased by63.38%

Worsened metrics

Dependency count

1

increased byInfinity%

Dev dependency count

30

increased by500%

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedlodash@^4.16.6

• + Addedlodash@4.17.21(transitive)