Use gulp autoprefixer instead of manually adding prefixes

.stylelintrc.json

@@ -5,8 +5,6 @@
   ],
   "rules": {
     "max-nesting-depth": 5,
-    "property-no-vendor-prefix": null,
-    "value-no-vendor-prefix": null,
     "selector-no-qualifying-type": null,
     "selector-max-compound-selectors": null,
     "scss/selector-no-redundant-nesting-selector": null,

gulpfile.js

@@ -7,11 +7,13 @@ const gulp = require('gulp'),
       exec = require('child_process').execFile,
       optional = require('optional'),
       hugo = optional('hugo-bin'),
-      gulpStylelint = optional('gulp-stylelint');
+      gulpStylelint = optional('gulp-stylelint'),
+      autoprefixer = require('gulp-autoprefixer');
 
 gulp.task('sass', function() {
   gulp.src('src/**/*.scss')
     .pipe(sass.sync().on('error', sass.logError))
+    .pipe(autoprefixer())
     .pipe(cleanCSS({format: 'beautify'}))
     .pipe(rename('paper.css'))
     .pipe(gulp.dest('dist'))
@@ -49,6 +51,7 @@ gulp.task('hugo-build', function (cb) {
 gulp.task('minify-css', () => {
   return gulp.src('src/**/*.scss')
   .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
+  .pipe(autoprefixer())
   .pipe(rename('paper.min.css'))
   .pipe(gulp.dest('dist'))
   .pipe(gulp.dest('docs/static/assets'));

package.json

@@ -22,6 +22,7 @@
   "homepage": "https://www.getpapercss.com",
   "dependencies": {
     "gulp": "3.9.1",
+    "gulp-autoprefixer": "^6.0.0",
     "gulp-clean-css": "3.9.0",
     "gulp-connect": "5.0.0",
     "gulp-plumber": "1.1.0",
@@ -74,5 +75,8 @@
   },
   "pre-commit": [
     "stylelint"
+  ],
+  "browserslist": [
+    "last 4 versions"
   ]
 }

src/components/_buttons.scss

@@ -44,8 +44,6 @@ button,
 
   &:focus {
     border: 2px solid $secondary;
-    -webkit-box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
-    -moz-box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
     box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
   }
 

src/components/_navbar.scss

@@ -25,7 +25,6 @@ nav {
 
   .collapsible input[id^=collapsible]:checked + button {
     .bar1 {
-      -webkit-transform: rotate(-45deg) translate(-9px, 7px);
       transform: rotate(-45deg) translate(-9px, 7px);
     }
 
@@ -34,7 +33,6 @@ nav {
     }
 
     .bar3 {
-      -webkit-transform: rotate(45deg) translate(-8px, -9px);
       transform: rotate(45deg) translate(-8px, -9px);
     }
   }

src/core/_config.scss

@@ -155,16 +155,11 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
 }
 
 @mixin center-all() {
-  -webkit-align-items: center;
   align-items: center;
-  -webkit-justify-content: center;
   justify-content: center;
 }
 
 @mixin col-size($percent) {
-  -webkit-box-flex: 0;
-  -webkit-flex: 0 0 $percent;
-  -ms-flex: 0 0 $percent;
   flex: 0 0 $percent;
   max-width: $percent;
 }
@@ -176,7 +171,7 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
 }
 
 /*
-  Add transform: translate() with browser prefixes.
+  Add transform: translate().
   Same syntax for translate() and translate3d()
   To get 3D add a $z value and set 'true'
   @param string | boolean
@@ -184,12 +179,8 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
 */
 @mixin translate($x, $y, $z: 0, $transform3d: false) {
   @if $transform3d {
-    -webkit-transform: translate3d($x, $y, $z);
-    -ms-transform: translate3d($x, $y, $z);
     transform: translate3d($x, $y, $z);
   } @else {
-    -webkit-transform: translate($x, $y);
-    -ms-transform: translate($x, $y);
     transform: translate($x, $y);
   }
 }
@@ -200,9 +191,6 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
   @default all | 235ms | ease-in-out | 0
 */
 @mixin transition($name:all, $duration:235ms, $animation:ease-in-out, $delay: 0s) {
-  -webkit-transition: $name $duration $animation $delay;
-  -moz-transition: $name $duration $animation $delay;
-  -o-transition: $name $duration $animation $delay;
   transition: $name $duration $animation $delay;
 }
 

src/layout/_container.scss

@@ -33,8 +33,6 @@ hr {
 .paper {
   background-color: $main-background;
   border: 1px solid $primary-light;
-  -moz-box-shadow: -1px 5px 35px -9px hsla(0, 0%, 0%, 0.2);
-  -webkit-box-shadow: -1px 5px 35px -9px hsla(0, 0%, 0%, 0.2);
   box-shadow: -1px 5px 35px -9px hsla(0, 0%, 0%, 0.2);
   margin-bottom: 1rem;
   margin-top: 1rem;

src/layout/_flexbox.scss

@@ -4,9 +4,6 @@ $number-columns: 12;
   @include resp($min: $breakpoint) {
     @for $i from 1 through $number-columns {
       .#{$colName}-#{$i} {
-        -webkit-box-flex: 0;
-        -webkit-flex: 0 0 $i * 100% / $number-columns;
-        -ms-flex: 0 0 $i * 100% / $number-columns;
         flex: 0 0 $i * 100% / $number-columns;
         max-width: $i * 100% / $number-columns;
       }
@@ -15,65 +12,38 @@ $number-columns: 12;
 }
 
 .row {
-  -webkit-box-direction: normal;
-  -webkit-box-orient: horizontal;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-flow: row wrap;
-  -ms-flex-flow: row wrap;
   flex-flow: row wrap;
   margin-bottom: 1rem;
   margin-left: auto;
   margin-right: auto;
 
   &.flex-right {
-    -webkit-box-pack: end;
-    -ms-flex-pack: end;
-    -webkit-justify-content: flex-end;
     justify-content: flex-end;
   }
 
   &.flex-center {
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    -webkit-justify-content: center;
     justify-content: center;
   }
 
   &.flex-edges {
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    -webkit-justify-content: space-between;
     justify-content: space-between;
   }
 
   &.flex-spaces {
-    -ms-flex-pack: distribute;
-    -webkit-justify-content: space-around;
     justify-content: space-around;
   }
 
   &.flex-top {
-    -webkit-align-items: flex-start;
     align-items: flex-start;
-    -webkit-box-align: start;
-    -ms-flex-align: start;
   }
 
   &.flex-middle {
-    -webkit-align-items: center;
     align-items: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
   }
 
   &.flex-bottom {
-    -webkit-align-items: flex-end;
     align-items: flex-end;
-    -webkit-box-align: end;
-    -ms-flex-align: end;
   }
 }
 
@@ -97,22 +67,15 @@ $number-columns: 12;
 @include create-flex-classes(lg, $large-screen);
 
 .align-top {
-  -webkit-align-self: flex-start;
   align-self: flex-start;
-  -ms-flex-item-align: start;
 }
 
 .align-middle {
-  -webkit-align-self: center;
   align-self: center;
-  -ms-flex-item-align: center;
-  -ms-grid-row-align: center;
 }
 
 .align-bottom {
-  -webkit-align-self: flex-end;
   align-self: flex-end;
-  -ms-flex-item-align: end;
 }
 
 .container {