Replace Bourbon with postcss/autoprefixer

package-lock.json

@@ -3166,12 +3166,6 @@
         }
       }
     },
-    "bourbon": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/bourbon/-/bourbon-4.3.4.tgz",
-      "integrity": "sha1-TaOAAp6SwMj5dkx3lFGhNLEefMM=",
-      "dev": true
-    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

package.json

@@ -62,7 +62,6 @@
     "bootstrap": "^4.3.1",
     "bootstrap.native": "^2.0.26",
     "bootstrap.native-loader": "2.0.0",
-    "bourbon": "^4.3.2",
     "clean-css-cli": "^4.3.0",
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^3.0.0",

sass/_core.scss

@@ -1,9 +1,9 @@
 @mixin fade-in {
     opacity: 0;  /* make things invisible upon start */
-    @include animation-name(fadein);
+    animation-name: fadein;
-    @include animation-fill-mode(forwards);
+    animation-fill-mode: forwards;
-    @include animation-duration(0.75s);
+    animation-duration: 0.75s;
-    @include animation-timing-function(ease);
+    animation-timing-function: ease;
 }
 
 body.converse-fullscreen {
@@ -16,10 +16,10 @@ body.converse-fullscreen {
         display: flex;
         justify-content: space-between;
         margin-top: 15vh;
-        @include animation-name(fadein);
+        animation-name: fadein;
-        @include animation-fill-mode(forwards);
+        animation-fill-mode: forwards;
-        @include animation-duration(5s);
+        animation-duration: 5s;
-        @include animation-timing-function(ease);
+        animation-timing-function: ease;
     }
 
     .converse-brand__padding {
@@ -121,9 +121,9 @@ body.converse-fullscreen {
         height: 3em;
     }
     &.converse-embedded {
-        @include box-sizing(border-box);
+        box-sizing: border-box;
         *, *:before, *:after {
-            @include box-sizing(border-box);
+            box-sizing: border-box;
         }
         bottom: auto;
         height: 100%; // When embedded, it fills the containing element
@@ -356,7 +356,7 @@ body.converse-fullscreen {
 
     .no-text-select {
         -webkit-touch-callout: none;
-        @include user-select(none);
+        user-select: none;
     }
 
     @keyframes colorchange-chatmessage {
@@ -411,10 +411,10 @@ body.converse-fullscreen {
 
     .visible {
         opacity:0;  /* make things invisible upon start */
-        @include animation-name(fadein);
+        animation-name: fadein;
-        @include animation-fill-mode(forwards);
+        animation-fill-mode: forwards;
-        @include animation-duration(500ms);
+        animation-duration: 500ms;
-        @include animation-timing-function(ease);
+        animation-timing-function: ease;
     }
 
     .hidden {
@@ -440,17 +440,17 @@ body.converse-fullscreen {
     }
 
 
-    @include keyframes(spin) {
+    @keyframes spin  {
         from {
-            @include transform(rotate(0deg));
+            transform: rotate(0deg);
         }
         to {
-            @include transform(rotate(359deg));
+            transform: rotate(359deg);
         }
     }
 
     .spinner {
-        @include animation(spin 2s infinite, linear);
+        animation: spin 2s infinite, linear;
         width: 1em;
         display: block;
         text-align: center;

sass/converse.scss

@@ -37,16 +37,6 @@
     @import "bootstrap/scss/utilities";
 }
 
-@import "bourbon/app/assets/stylesheets/settings/prefixer";
-@import "bourbon/app/assets/stylesheets/settings/deprecation-warnings";
-@import "bourbon/app/assets/stylesheets/bourbon-deprecate";
-@import "bourbon/app/assets/stylesheets/bourbon-deprecated-upcoming";
-@import "bourbon/app/assets/stylesheets/css3/transform";
-@import "bourbon/app/assets/stylesheets/css3/animation";
-@import "bourbon/app/assets/stylesheets/css3/keyframes";
-@import "bourbon/app/assets/stylesheets/css3/user-select";
-@import "bourbon/app/assets/stylesheets/addons/prefixer";
-
 @import "font-awesome";
 @import "variables";
 

sass/website.scss

@@ -22,13 +22,12 @@
 @import "bootstrap/scss/close";
 @import "bootstrap/scss/utilities";
 
-@import "bourbon";
 @mixin fade-in {
     opacity: 0;  /* make things invisible upon start */
-    @include animation-name(fadein);
+    animation-name: fadein;
-    @include animation-fill-mode(forwards);
+    animation-fill-mode: forwards;
-    @include animation-duration(1s);
+    animation-duration: 1s;
-    @include animation-timing-function(ease);
+    animation-timing-function: ease;
 }
 
 .fade-in {