added autoprefixer and began to refactor css

package.json

@@ -44,14 +44,16 @@
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.5",
+    "autoprefixer": "^9.8.4",
     "babel-loader": "^8.0.6",
     "react": "^16.13.1",
     "rollup": "^2.6.1",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-banner": "^0.2.1",
+    "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-postcss": "^3.1.2",
     "rollup-plugin-terser": "^5.3.0",
-    "rollup-plugin-copy": "^3.3.0",
-    "rollup-plugin-postcss": "^3.1.2"
+    "sass": "^1.26.9"
   }
 }

rollup.config.js

@@ -3,6 +3,7 @@ import resolve from 'rollup-plugin-node-resolve'
 import { terser } from 'rollup-plugin-terser'
 import banner from 'rollup-plugin-banner'
 import postcss from 'rollup-plugin-postcss'
+import autoprefixer from 'autoprefixer'
 import copy from 'rollup-plugin-copy'
 
 const pkg = require('./package.json')
@@ -91,8 +92,8 @@ export default [
       postcss({
         extract: true,
         sourceMap: true,
+        plugins: [autoprefixer()],
       }),
-      banner(bannerText),
     ],
   },
   {
@@ -101,13 +102,12 @@ export default [
       file: 'keen-slider.min.css',
     },
     plugins: [
-      banner(bannerText),
       postcss({
         extract: true,
         minimize: true,
         sourceMap: true,
+        plugins: [autoprefixer()],
       }),
-      banner(bannerText),
     ],
   },
 ]

src/keen-slider.scss

@@ -2,23 +2,21 @@
   display: block;
   overflow: hidden;
   position: relative;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
   -webkit-touch-callout: none;
   -khtml-user-select: none;
   -ms-touch-action: pan-y;
   touch-action: pan-y;
   -webkit-tap-highlight-color: transparent;
 
-.keen-slider__slide {
-  position: absolute;
-  overflow: hidden;
-  width: 100%;
-  min-height: 100%;
-}
+  &__slide {
+    position: absolute;
+    overflow: hidden;
+    width: 100%;
+    min-height: 100%;
+  }
 
-.keen-slider.keen-slider--vertical .keen-slider__slide {
-  min-height: auto;
+  &--vertical &__slide {
+    min-height: auto;
+  }
 }