Use autoprefixer for vendor prefixes in CSS

spinningarrow · spinningarrow · commit 9319e7704f8b · 2017-03-19T15:21:16.000+08:00
- Closes #28 (github)
diff --git a/README.md b/README.md
@@ -22,7 +22,7 @@ will open the image in a new tab instead of zooming it.
 2. Add the `zoom-vanilla.min.js` and `zoom.css` files to your HTML page:
 
   ```html
-  <link href="css/zoom.css" rel="stylesheet"> <!-- inside <head> -->
+  <link href="dist/zoom.css" rel="stylesheet"> <!-- inside <head> -->
   <script src="dist/zoom-vanilla.min.js"></script> <!-- before </body> -->
   ```
 
@@ -53,6 +53,6 @@ an issue! Thanks!
 - `npm i` to install dev dependencies
 - `npm start` to start a simple HTTP server (makes it easy to view the demo
   page)
-- `npm run build` to build the minified JS
-- `npm run watch` to rebuild when any files change (recommended for
+- `npm run build` to build the minified JS and vendor-prefixed CSS
+- `npm run watch` to rebuild when any JS files change (recommended for
   development)
diff --git a/css/zoom.css b/css/zoom.css
@@ -1,20 +1,14 @@
 img[data-action="zoom"] {
-  cursor: pointer;
-  cursor: -webkit-zoom-in;
-  cursor: -moz-zoom-in;
+  cursor: zoom-in;
 }
 .zoom-img,
 .zoom-img-wrap {
   position: relative;
   z-index: 666;
-  -webkit-transition: all 300ms;
-       -o-transition: all 300ms;
-          transition: all 300ms;
+  transition: all 300ms;
 }
 img.zoom-img {
-  cursor: pointer;
-  cursor: -webkit-zoom-out;
-  cursor: -moz-zoom-out;
+  cursor: zoom-out;
 }
 .zoom-overlay {
   z-index: 420;
@@ -27,9 +21,7 @@ img.zoom-img {
   pointer-events: none;
   filter: "alpha(opacity=0)";
   opacity: 0;
-  -webkit-transition:      opacity 300ms;
-       -o-transition:      opacity 300ms;
-          transition:      opacity 300ms;
+  transition:      opacity 300ms;
 }
 .zoom-overlay-open .zoom-overlay {
   filter: "alpha(opacity=100)";
diff --git a/dist/zoom.css b/dist/zoom.css
diff --git a/index.html b/index.html
@@ -33,7 +33,7 @@
       }
     }
   </style>
-  <link rel="stylesheet" type="text/css" href="css/zoom.css">
+  <link rel="stylesheet" type="text/css" href="dist/zoom.css">
 </head>
 <body>
   <div class="container">
diff --git a/package.json b/package.json
@@ -20,15 +20,18 @@
   },
   "homepage": "https://github.com/spinningarrow/zoom-vanilla.js",
   "devDependencies": {
+    "autoprefixer": "^6.7.7",
     "http-server": "^0.9.0",
+    "postcss-cli": "^3.0.0",
     "uglify-js": "^2.7.3",
     "watch": "^0.19.2"
   },
   "scripts": {
     "_echo_done": "echo [`date`] \"\\033[1;32mzoom-vanilla.min.js rebuilt\\033[0m\"",
     "compress": "uglifyjs --compress --mangle --source-map=dist/zoom-vanilla.min.js.map --source-map-url='/dist/zoom-vanilla.min.js.map' --source-map-root='/' --preamble=\"// $npm_package_name - $npm_package_version ($npm_package_homepage)\" js/zoom-vanilla.js > dist/zoom-vanilla.min.js",
     "clean": "rm -rf dist/*",
-    "build": "npm run clean && npm run compress",
+    "build": "npm run clean && npm run compress && npm run css",
+    "css": "postcss css/zoom.css --use autoprefixer -d dist/",
     "start": "http-server",
     "version": "npm run build && git add -u .",
     "watch": "watch 'npm run compress && npm run _echo_done' js --ignoreDotFiles"

Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@`
`33`	`33`	`}`
`34`	`34`	`}`
`35`	`35`	`</style>`
`36`		`- <link rel="stylesheet" type="text/css" href="css/zoom.css">`
	`36`	`+ <link rel="stylesheet" type="text/css" href="dist/zoom.css">`
`37`	`37`	`</head>`
`38`	`38`	`<body>`
`39`	`39`	`<div class="container">`