Add Autoprefixer to build pipeline (#210)

* Add Autoprefixer to build pipeline * Remove vendor prefixes from source code * Rebuild dist CSS
kamranahmedse · Jan 19, 2020 · f088684 · f088684
1 parent 69ed90d
commit f088684
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 34 deletions.
diff --git a/config/webpack.config.demo.js b/config/webpack.config.demo.js
@@ -47,6 +47,13 @@ module.exports = {
             loader: 'css-loader',
             options: { url: false },
           },
+          {
+            loader: 'postcss-loader',
+            options: {
+              ident: 'postcss',
+              plugins: [require('autoprefixer')()], // eslint-disable-line global-require
+            },
+          },
           'sass-loader',
         ]),
       },

diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js
@@ -40,6 +40,13 @@ module.exports = {
             loader: 'css-loader',
             options: { url: false },
           },
+          {
+            loader: 'postcss-loader',
+            options: {
+              ident: 'postcss',
+              plugins: [require('autoprefixer')()], // eslint-disable-line global-require
+            },
+          },
           'sass-loader',
         ]),
       },

diff --git a/dist/driver.min.css b/dist/driver.min.css
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "@babel/core": "^7.4.5",
     "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
     "@babel/preset-env": "^7.4.5",
+    "autoprefixer": "^9.7.4",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.6",
     "copy-webpack-plugin": "^5.0.3",
@@ -46,5 +47,8 @@
     "webpack-cli": "^3.3.4",
     "webpack-dev-server": "^3.7.1"
   },
-  "dependencies": {}
+  "dependencies": {},
+  "browserslist": [
+    "defaults"
+  ]
 }
diff --git a/src/driver.scss b/src/driver.scss
@@ -176,10 +176,6 @@ div#driver-popover-item {
 }
 
 .driver-stage-no-animation {
-  -webkit-transition: none !important;
-  -moz-transition: none !important;
-  -ms-transition: none !important;
-  -o-transition: none !important;
   transition: none !important;
 
   background: transparent !important;
@@ -201,10 +197,6 @@ div#driver-page-overlay {
   opacity: 0.75;
   z-index: $overlay-z-index !important;
 
-  -webkit-transition: all $animation-sec;
-  -moz-transition: all $animation-sec;
-  -ms-transition: all $animation-sec;
-  -o-transition: all $animation-sec;
   transition: all $animation-sec;
 }
 
@@ -219,10 +211,6 @@ div#driver-highlighted-element-stage {
   display: none;
   border-radius: 2px;
 
-  -webkit-transition: all $animation-sec;
-  -moz-transition: all $animation-sec;
-  -ms-transition: all $animation-sec;
-  -o-transition: all $animation-sec;
   transition: all $animation-sec;
 }
 
@@ -237,29 +225,10 @@ div#driver-highlighted-element-stage {
 .driver-fix-stacking {
   z-index: auto !important;
   opacity: 1.0 !important;
-  -webkit-transform: none !important;
-  -moz-transform: none !important;
-  -ms-transform: none !important;
-  -o-transform: none !important;
   transform: none !important;
-  -webkit-filter: none !important;
-  -moz-filter: none !important;
-  -ms-filter: none !important;
-  -o-filter: none !important;
   filter: none !important;
-  -webkit-perspective: none !important;
-  -moz-perspective: none !important;
-  -ms-perspective: none !important;
-  -o-perspective: none !important;
   perspective: none !important;
-  -webkit-transform-style: flat !important;
-  -moz-transform-style: flat !important;
-  -ms-transform-style: flat !important;
   transform-style: flat !important;
-  -webkit-transform-box: border-box !important;
-  -moz-transform-box: border-box !important;
-  -ms-transform-box: border-box !important;
-  -o-transform-box: border-box !important;
   transform-box: border-box !important;
   will-change: unset !important;
 }
@@ -276,4 +245,4 @@ div#driver-popover-item .driver-popover-footer .driver-close-btn-top-right {
   background-color: transparent;
   border: none;
   font-size: 13px;
-}
+}