inline-style-prefixer - npm Package Compare versions

Comparing version 4.0.2 to 5.0.0

package.json

 {
   "name": "inline-style-prefixer",
-  "version": "4.0.2",
+  "version": "5.0.0",
   "description": "Run-time Autoprefixer for JavaScript style objects",
-  "main": "dynamic/index.js",
+  "module": "es/index.js",
+  "jsnext:main": "es/index.js",
+  "main": "lib/index.js",
   "files": [
     "LICENSE",
     "README.md",
-    "dist/",
-    "static/",
-    "generator/",
-    "dynamic/",
-    "utils/"
+    "lib/",
+    "es/"
   ],
   "scripts": {
-    "babel": "babel modules/ --out-dir .",
-    "build": "npm run check && mkdir dist && npm run generate && npm run babel && npm run dist",
-    "check": "npm run clean && npm run format && npm run lint && npm test && npm run flow",
-    "clean": "rimraf static dynamic generator utils dist coverage",
-    "dist": "cross-env NODE_ENV=production babel-node buildPackage && cross-env NODE_ENV=development babel-node buildPackage",
+    "babel:es": "babel -d es modules --ignore __tests__",
+    "babel:lib": "cross-env BABEL_ENV=commonjs babel -d lib modules --ignore __tests__",
+    "babel": "yarn babel:es && yarn babel:lib",
+    "build": "yarn run check && yarn generate && yarn babel",
+    "check": "yarn clear && yarn format && yarn lint && yarn coverage && yarn flow",
+    "clear": "rimraf lib coverage",
     "docs": "gitbook install && gitbook build && gh-pages -d _book",
     "flow": "flow",
-    "format": "prettier --write \"./modules/**/*.js\" && prettier --write \"./test/**/*.js\"",
-    "generate": "babel-node generateDefaultData",
-    "lint": "eslint .",
-    "release": "npm run build && npm publish && npm run docs",
-    "test": "istanbul cover node_modules/mocha/bin/_mocha -- --opts test/_setup/mocha.opts"
+    "format": "prettier --write \"./modules/**/*.js\"",
+    "generate": "cross-env BABEL_ENV=commonjs babel-node generateDefaultData",
+    "lint": "eslint modules/**/*.js",
+    "release": "yarn build && npm publish && yarn docs",
+    "test": "cross-env BABEL_ENV=commonjs jest",
+    "coverage": "yarn test --coverage"
   },
@@ -41,4 +42,6 @@ "repository": "https://github.com/rofrischmann/inline-style-prefixer",
   "license": "MIT",
+  "jest": {
+    "rootDir": "modules"
+  },
   "dependencies": {
-    "bowser": "^1.7.3",
     "css-in-js-utils": "^2.0.0"
@@ -51,12 +54,10 @@ },
     "babel-eslint": "^7.1.1",
-    "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-plugin-transform-class-properties": "^6.9.1",
+    "babel-jest": "^20.0.1",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "babel-preset-es2015": "^6.6.0",
-    "babel-preset-es2015-rollup": "^1.1.1",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-0": "^6.5.0",
-    "caniuse-api": "^2.0.0",
-    "chai": "^3.2.0",
+    "caniuse-api": "^3.0.0",
     "codeclimate-test-reporter": "^0.1.1",
-    "cross-env": "^1.0.8",
+    "cross-env": "^5.2.0",
     "eslint": "^3.14.0",
@@ -68,4 +69,4 @@ "eslint-config-airbnb": "^14.0.0",
     "eslint-plugin-react": "^6.9.0",
-    "flow-bin": "0.38.0",
-    "gh-pages": "^0.12.0",
+    "flow-bin": "^0.80.0",
+    "gh-pages": "^1.2.0",
     "gitbook": "^3.2.2",
@@ -77,12 +78,6 @@ "gitbook-cli": "^2.3.0",
     "gitbook-plugin-prism": "^2.2.1",
-    "istanbul": "1.0.0-alpha.2",
-    "mocha": "^2.4.5",
-    "prettier": "^1.3.1",
-    "rimraf": "^2.4.2",
-    "rollup": "0.26.3",
-    "rollup-plugin-babel": "2.4.0",
-    "rollup-plugin-commonjs": "2.2.1",
-    "rollup-plugin-node-resolve": "1.5.0",
-    "rollup-plugin-uglify": "0.3.1"
+    "jest": "^19.0.2",
+    "prettier": "^1.14.2",
+    "rimraf": "^2.6.2"
   }
 }

README.md

@@ -1,30 +0,10 @@
-# Autoprefixer for Style Objects
+# inline-style-prefixer
 
-**inline-style-prefixer** adds required **vendor prefixes** to your style object. It only adds prefixes if they're actually required by evaluating the browser's `userAgent` against data from [caniuse.com](http://caniuse.com/).
-<br>
+A small, simple and fast vendor prefixer from JavaScript style object.
 
-Alternatively it ships a static version that adds all available vendor prefixes.
+<img alt="TravisCI" src="https://travis-ci.org/rofrischmann/inline-style-prefixer.svg?branch=master"> <a href="https://codeclimate.com/github/rofrischmann/inline-style-prefixer/coverage"><img alt="Test Coverage" src="https://codeclimate.com/github/rofrischmann/inline-style-prefixer/badges/coverage.svg"></a> <img alt="npm downloads" src="https://img.shields.io/npm/dm/inline-style-prefixer.svg"> <img alt="gzipped size" src="https://img.shields.io/bundlephobia/minzip/inline-style-prefixer.svg?colorB=4c1&label=gzipped%20size"> <img alt="npm version" src="https://badge.fury.io/js/inline-style-prefixer.svg">
 
-[![Build Status](https://travis-ci.org/rofrischmann/inline-style-prefixer.svg)](https://travis-ci.org/rofrischmann/inline-style-prefixer)
-[![Test Coverage](https://codeclimate.com/github/rofrischmann/inline-style-prefixer/badges/coverage.svg)](https://codeclimate.com/github/rofrischmann/inline-style-prefixer/coverage)
-[![npm downloads](https://img.shields.io/npm/dm/inline-style-prefixer.svg)](https://img.shields.io/npm/dm/inline-style-prefixer.svg)
-![Dependencies](https://david-dm.org/rofrischmann/inline-style-prefixer.svg)
-
 ## Support Us
 Support Robin Frischmann's work on [Fela](https://github.com/rofrischmann/fela) and its ecosystem (inline-style-prefixer) directly via [**Patreon**](https://www.patreon.com/rofrischmann).
 
-Or support us on [**Open Collective**](https://opencollective.com/fela) to fund community work. This also includes inline-style-prefixer as well.<br>
-Thank you to all our backers!
-
-<a href="https://opencollective.com/fela/backer/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/fela/backer/0/avatar.svg?requireActive=false"></a>
-<a href="https://opencollective.com/fela/backer/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/fela/backer/1/avatar.svg?requireActive=false"></a>
-<a href="https://opencollective.com/fela/backer/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/fela/backer/2/avatar.svg?requireActive=false"></a>
-<a href="https://opencollective.com/fela/backer/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/fela/backer/3/avatar.svg?requireActive=false"></a>
-<a href="https://opencollective.com/fela/backer/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/fela/backer/4/avatar.svg?requireActive=false"></a>
-<a href="https://opencollective.com/fela/backer/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/fela/backer/5/avatar.svg?requireActive=false"></a>
-<a href="https://opencollective.com/fela/backer/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/fela/backer/6/avatar.svg?requireActive=false"></a>
-<a href="https://opencollective.com/fela/backer/7/website?requireActive=false" target="_blank"><img src="https://opencollective.com/fela/backer/7/avatar.svg?requireActive=false"></a>
-<a href="https://opencollective.com/fela/backer/8/website?requireActive=false" target="_blank"><img src="https://opencollective.com/fela/backer/8/avatar.svg?requireActive=false"></a>
-<a href="https://opencollective.com/fela/backer/9/website?requireActive=false" target="_blank"><img src="https://opencollective.com/fela/backer/9/avatar.svg?requireActive=false"></a>
-
 ## Installation
@@ -35,11 +15,2 @@ ```sh
 If you're still using npm, you may run `npm i --save inline-style-prefixer`.
-We also provide [UMD](https://github.com/umdjs/umd) builds for each package in the `dist` folder. You can easily use them via [unpkg](https://unpkg.com/).
-```HTML
-<!-- Unminified versions -->
-<script src="https://unpkg.com/inline-style-prefixer@3.0.1/dist/inline-style-prefixer.js"></script>
-<script src="https://unpkg.com/inline-style-prefixer@3.0.1/dist/inline-style-prefix-all.js"></script>
-<!-- Minified versions -->
-<script src="https://unpkg.com/inline-style-prefixer@3.0.1/dist/inline-style-prefixer.min.js"></script>
-<script src="https://unpkg.com/inline-style-prefixer@3.0.1/dist/inline-style-prefix-all.min.js"></script>
-```
 
@@ -67,17 +38,9 @@ ## Browser Support
 
-## Dynamic vs. Static
-Before using the prefixer, you have to decide which one you want to use. We ship two different versions - a dynamic and a static version.
+## Usage
 
-The **dynamic prefixer** evaluates the `userAgent` to identify the browser environment. Using this technique, we are able to only add the bare minimum of prefixes. Browser detection is quite accurate (~90% correctness), but yet also  	expensive which is why the package is almost 3 times as big as the static version.
-
-> It uses the static prefixer as a fallback.
-
-![Gzipped Size](https://img.shields.io/badge/gzipped-8.50kb-brightgreen.svg)
-
 ```javascript
-import Prefixer from 'inline-style-prefixer'
+import { prefix } from 'inline-style-prefixer'
 
 const style = {
   transition: '200ms all linear',
-  userSelect: 'none',
   boxSizing: 'border-box',
@@ -88,33 +51,5 @@ display: 'flex',
 
-const prefixer = new Prefixer()
-const prefixedStyle = prefixer.prefix(style)
+const output = prefix(style)
 
-// prefixedStyle === output
-const output = {
-  transition: '200ms all linear',
-  WebkitUserSelect: 'none',
-  boxSizing: 'border-box',
-  display: '-webkit-flex',
-  color: 'blue'
-}
-```
-
-The **static prefixer**, on the other hand, adds all required prefixes according the above mentioned browser versions. Removing the browser detection makes it both smaller and fast, but also drastically increases the output.
-
-![Gzipped Size](https://img.shields.io/badge/gzipped-2.70kb-brightgreen.svg)
-
-```javascript
-import prefixAll from 'inline-style-prefixer/static'
-
-const style = {
-  transition: '200ms all linear',
-  boxSizing: 'border-box',
-  display: 'flex',
-  color: 'blue'
-}
-
-const prefixedStyle = prefixAll(style)
-
-// prefixedStyle === output
-const output = {
+output === {
   WebkitTransition: '200ms all linear',
@@ -133,16 +68,6 @@ transition: '200ms all linear',
 ```sh
-npm install --save @types/inline-style-prefixer
-```
+yarn add @types/inline-style-prefixer
 
-Then import in your code:
-
-```typescript
-import prefixAll = require('inline-style-prefixer/static');
-
-const prefixedStyle = prefixAll({
-  transition: '200ms all linear',
-  boxSizing: 'border-box',
-  display: 'flex',
-  color: 'blue'
-});
+# alternatively use npm
+npm i --save @types/inline-style-prefixer
 ```
@@ -156,3 +81,2 @@
 * [API Reference](https://inline-style-prefixer.js.org/docs/API.html)
-* [FAQ](https://inline-style-prefixer.js.org/docs/FAQ.html)
 
@@ -159,0 +83,0 @@ ## Community

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

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

136521

increased by53.01%

Dependency count

1

decreased by-50%

Dev dependency count

29

decreased by-21.62%

Number of package files

65

increased by30%

Lines of code

3431

increased by122.07%

Worsened metrics

Number of lines in readme file

101

decreased by-42.94%

Number of low supply chain risk alerts

3

increased by50%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedbowser@^1.7.3

• - Removedbowser@1.9.4(transitive)