From 759a69b5b760090e4476bc4defd2b3a6f24aa0a1 Mon Sep 17 00:00:00 2001
From: Zachary Wasserman <zachwass2000@gmail.com>
Date: Thu, 3 Jan 2019 12:46:55 -0800
Subject: [PATCH] Upgrade Bourbon to 5.1.0 and fix deprecation warnings (#1973)

- Replace uses of deprecated Bourbon helpers with raw CSS
- Add autoprefixer into the build chain to prefix the now removed helpers

This process was achieved by running through each of the deprecation warnings and using the following bash function to replace it in all files:

```
function bourbon-deprecate() {
    grep -rl "@include $1" ./frontend --exclude-dir=.git | xargs sed -i '' -E "s/@include $1[(](.*)[)]/$1: \1/g"
}
```

For some helpers, this did not result in valid CSS, so manual modifications were made.

Closes #1189 #1274
---
 .../AuthenticationFormWrapper/_styles.scss    |   8 +-
 frontend/components/Footer/_styles.scss       |   2 +-
 frontend/components/LoginRoutes/_styles.scss  |   8 +-
 frontend/components/SmtpWarning/_styles.scss  |   8 +-
 .../components/StackedWhiteBoxes/_styles.scss |  10 +-
 frontend/components/UserBlock/_styles.scss    |  14 +-
 .../components/buttons/Button/_styles.scss    |   4 +-
 .../buttons/EllipsisMenu/_styles.scss         |   2 +-
 .../flash_messages/FlashMessage/_styles.scss  |  10 +-
 .../PersistentFlash/_styles.scss              |   9 +-
 .../forms/ChangeEmailForm/_styles.scss        |   4 +-
 .../forms/ChangePasswordForm/_styles.scss     |   4 +-
 .../forms/InviteUserForm/_styles.scss         |   4 +-
 .../components/forms/LoginForm/_styles.scss   |   9 +-
 .../components/forms/LogoutForm/_styles.scss  |   8 +-
 .../ConfirmationPage/_styles.scss             |   2 +-
 .../forms/RegistrationForm/_styles.scss       |  16 +-
 .../forms/fields/Checkbox/_styles.scss        |   6 +-
 .../forms/fields/Dropdown/_styles.scss        |  10 +-
 .../forms/fields/InputField/_styles.scss      |   6 +-
 .../fields/InputFieldWithIcon/_styles.scss    |   2 +-
 .../TargetOption/_styles.scss                 |  10 +-
 .../fields/SelectTargetsDropdown/_styles.scss |   6 +-
 .../forms/fields/Slider/_styles.scss          |   8 +-
 .../hosts/HostContainer/_styles.scss          |   8 +-
 .../components/hosts/HostDetails/_styles.scss |  30 +--
 .../components/hosts/LonelyHost/_styles.scss  |   2 +-
 .../loaders/ProgressBar/_styles.scss          |   2 +-
 .../components/loaders/Spinner/_styles.scss   |  16 +-
 frontend/components/modals/Modal/_styles.scss |   2 +-
 .../queries/QueryResultsTable/_styles.scss    |  18 +-
 .../ScheduledQueriesListWrapper/_styles.scss  |   2 +-
 .../HostSidePanel/PanelGroupItem/_styles.scss |  12 +-
 .../side_panels/QuerySidePanel/_styles.scss   |  14 +-
 .../SecondarySidePanelContainer/_styles.scss  |   2 +-
 .../side_panels/SiteNavHeader/_styles.scss    |   6 +-
 .../side_panels/SiteNavSidePanel/_styles.scss |  18 +-
 frontend/layouts/CoreLayout/_styles.scss      |   4 +-
 .../Admin/UserManagementPage/_styles.scss     |   4 +-
 frontend/pages/LoginPage/_styles.scss         |   6 +-
 frontend/pages/LogoutPage/_styles.scss        |  10 +-
 .../RegistrationPage/Breadcrumbs/_styles.scss |   6 +-
 frontend/pages/RegistrationPage/_styles.scss  |   6 +-
 frontend/pages/UserSettingsPage/_styles.scss  |   8 +-
 .../pages/hosts/ManageHostsPage/_styles.scss  |  14 +-
 .../pages/packs/AllPacksPage/_styles.scss     |   8 +-
 .../pages/packs/EditPackPage/_styles.scss     |   6 +-
 .../queries/ManageQueriesPage/_styles.scss    |  10 +-
 frontend/pages/queries/QueryPage/_styles.scss |  10 +-
 frontend/styles/global/_forms.scss            |   2 +-
 frontend/styles/global/_global.scss           |   6 +-
 package.json                                  |  42 ++--
 postcss.config.js                             |   5 +
 webpack.config.js                             |   3 +-
 yarn.lock                                     | 180 +++++++++++++++++-
 55 files changed, 410 insertions(+), 222 deletions(-)
 create mode 100644 postcss.config.js

diff --git a/frontend/components/AuthenticationFormWrapper/_styles.scss b/frontend/components/AuthenticationFormWrapper/_styles.scss
index 4307773400..cf61c3222e 100644
--- a/frontend/components/AuthenticationFormWrapper/_styles.scss
+++ b/frontend/components/AuthenticationFormWrapper/_styles.scss
@@ -1,8 +1,8 @@
 .auth-form-wrapper {
-  @include display(flex);
-  @include flex-direction(column);
-  @include justify-content(center);
-  @include flex-grow(1);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex-grow: 1;
   padding: $base 0;
 
   &__logo {
diff --git a/frontend/components/Footer/_styles.scss b/frontend/components/Footer/_styles.scss
index 9ec1cccec0..24d93d3032 100644
--- a/frontend/components/Footer/_styles.scss
+++ b/frontend/components/Footer/_styles.scss
@@ -1,5 +1,5 @@
 .footer {
-  @include align-items(center);
+  align-items: center;
   background-color: $footer-bg;
   height: $footer-height;
   text-align: center;
diff --git a/frontend/components/LoginRoutes/_styles.scss b/frontend/components/LoginRoutes/_styles.scss
index 92772fe662..83d83eede5 100644
--- a/frontend/components/LoginRoutes/_styles.scss
+++ b/frontend/components/LoginRoutes/_styles.scss
@@ -1,8 +1,8 @@
 .login-routes {
-  @include align-items(center);
-  @include display(flex);
-  @include flex-direction(column);
-  @include justify-content(center);
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   position: relative;
   min-height: calc(100vh - #{$footer-height});
   background-color: $white;
diff --git a/frontend/components/SmtpWarning/_styles.scss b/frontend/components/SmtpWarning/_styles.scss
index 91b60005ab..ea156f53a3 100644
--- a/frontend/components/SmtpWarning/_styles.scss
+++ b/frontend/components/SmtpWarning/_styles.scss
@@ -1,7 +1,7 @@
 .smtp-warning {
-  @include display(flex);
-  @include justify-content(space-between);
-  @include align-items(flex-start);
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
   background-color: $alert;
   color: $white;
   padding: 15px 20px;
@@ -21,7 +21,7 @@
   }
 
   &__text {
-    @include flex-grow(1);
+    flex-grow: 1;
     line-height: 20px;
   }
 
diff --git a/frontend/components/StackedWhiteBoxes/_styles.scss b/frontend/components/StackedWhiteBoxes/_styles.scss
index 52d0072fb2..12d4af78e6 100644
--- a/frontend/components/StackedWhiteBoxes/_styles.scss
+++ b/frontend/components/StackedWhiteBoxes/_styles.scss
@@ -1,21 +1,21 @@
 .stacked-white-boxes {
   @include position(absolute, null null null 50%);
-  @include transition(all 300ms ease-in);
+  transition: transform 300ms ease-in;
   margin: 75px 0 0 -262px;
   width: 524px;
 
   &--loading {
-    @include transform(scale(1.3));
+    transform: scale(1.3);
     opacity: 0;
   }
 
   &--loaded {
-    @include transform(scale(1));
+    transform: scale(1);
     opacity: 1;
   }
 
   &--leaving {
-    @include transform(scale(1.3));
+    transform: scale(1.3);
     opacity: 0;
   }
 
@@ -55,7 +55,7 @@
     width: 100%;
 
     &-link {
-      @include transition(color 150ms ease-in-out);
+      transition: color 150ms ease-in-out;
       color: $text-light;
       text-decoration: none;
       position: absolute;
diff --git a/frontend/components/UserBlock/_styles.scss b/frontend/components/UserBlock/_styles.scss
index 3c8238c7f6..ffba259b06 100644
--- a/frontend/components/UserBlock/_styles.scss
+++ b/frontend/components/UserBlock/_styles.scss
@@ -1,5 +1,5 @@
 .user-block {
-  @include transition(all 300ms ease-in-out);
+  transition: border 300ms ease-in-out, background-color 300ms ease-in-out;
   background-color: $white;
   display: inline-block;
   height: 440px;
@@ -20,7 +20,7 @@
   }
 
   &__header {
-    @include transition(all 300ms ease-in-out);
+  transition: color 300ms ease-in-out, background-color 300ms ease-in-out;
     background-color: $bg-light;
     border-bottom: 1px solid $accent-light;
     color: $text-ultradark;
@@ -73,7 +73,7 @@
 
   &__avatar {
     @include size(100px);
-    @include transition(all 300ms ease-in-out);
+    transition: border 300ms ease-in-out;
     border: 1px solid $text-medium;
     filter: none;
     display: block;
@@ -92,7 +92,7 @@
   }
 
   &__status-label {
-    @include transition(color 300ms ease-in-out);
+    transition: color 300ms ease-in-out;
     float: left;
     font-weight: $bold;
     font-size: $medium;
@@ -101,7 +101,7 @@
   }
 
   &__status-text {
-    @include transition(color 300ms ease-in-out);
+    transition: color 300ms ease-in-out;
     float: right;
     text-transform: uppercase;
     font-weight: $light;
@@ -122,7 +122,7 @@
   }
 
   &__username {
-    @include transition(color 300ms ease-in-out);
+    transition: color 300ms ease-in-out;
     color: $text-medium;
     font-size: $medium;
     text-transform: uppercase;
@@ -154,7 +154,7 @@
   }
 
   &__email {
-    @include transition(all 300ms ease-in-out);
+    transition: color 300ms ease-in-out;
     color: $link;
     font-size: $small;
     line-height: $larger;
diff --git a/frontend/components/buttons/Button/_styles.scss b/frontend/components/buttons/Button/_styles.scss
index 0ca7727e6e..36b3d7fefb 100644
--- a/frontend/components/buttons/Button/_styles.scss
+++ b/frontend/components/buttons/Button/_styles.scss
@@ -26,9 +26,9 @@ $base-class: 'button';
 }
 
 .#{$base-class} {
-  @include user-select(none);
-  @include transition(color 150ms ease-in-out, background 150ms ease-in-out, top 50ms ease-in-out, box-shadow 50ms ease-in-out, border 50ms ease-in-out);
   @include button-variant($link);
+  user-select: none;
+  transition: color 150ms ease-in-out, background 150ms ease-in-out, top 50ms ease-in-out, box-shadow 50ms ease-in-out, border 50ms ease-in-out;
   position: relative;
   height: 38px;
   text-align: center;
diff --git a/frontend/components/buttons/EllipsisMenu/_styles.scss b/frontend/components/buttons/EllipsisMenu/_styles.scss
index 0e20289a2b..3dafec712b 100644
--- a/frontend/components/buttons/EllipsisMenu/_styles.scss
+++ b/frontend/components/buttons/EllipsisMenu/_styles.scss
@@ -1,5 +1,5 @@
 .ellipsis-menu {
-  @include user-select(none);
+  user-select: none;
   display: inline-block;
   position: absolute;
 
diff --git a/frontend/components/flash_messages/FlashMessage/_styles.scss b/frontend/components/flash_messages/FlashMessage/_styles.scss
index 3755f9e7e6..d5c95718d5 100644
--- a/frontend/components/flash_messages/FlashMessage/_styles.scss
+++ b/frontend/components/flash_messages/FlashMessage/_styles.scss
@@ -9,10 +9,10 @@
 }
 
 .flash-message {
-  @include display(flex);
-  @include align-items(center);
-  @include justify-content(center);
   @include position(fixed, 0 0 null $nav-width);
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: $white;
   padding: $pad-half;
   z-index: 2;
@@ -41,7 +41,7 @@
   }
 
   &__content {
-    @include flex-grow(1);
+    flex-grow: 1;
     text-align: center;
 
     span {
@@ -69,7 +69,7 @@
     margin-left: 15px;
 
     .kolidecon {
-      @include transition(color 150ms ease-in-out);
+      transition: color 150ms ease-in-out;
       color: $text-light;
       font-size: 24px;
 
diff --git a/frontend/components/flash_messages/PersistentFlash/_styles.scss b/frontend/components/flash_messages/PersistentFlash/_styles.scss
index e14d204d92..1f7e86951a 100644
--- a/frontend/components/flash_messages/PersistentFlash/_styles.scss
+++ b/frontend/components/flash_messages/PersistentFlash/_styles.scss
@@ -9,10 +9,10 @@
 }
 
 .persistent-flash {
-  @include display(flex);
-  @include align-items(center);
-  @include justify-content(center);
   @include position(fixed, 0 0 null $nav-width);
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: $white;
   padding: $pad-half;
   z-index: 2;
@@ -25,7 +25,7 @@
   }
 
   &__content {
-    @include flex-grow(1);
+    flex-grow: 1;
     text-align: center;
 
     i {
@@ -39,4 +39,3 @@
     }
   }
 }
-
diff --git a/frontend/components/forms/ChangeEmailForm/_styles.scss b/frontend/components/forms/ChangeEmailForm/_styles.scss
index 0428bcc633..f673bdc78c 100644
--- a/frontend/components/forms/ChangeEmailForm/_styles.scss
+++ b/frontend/components/forms/ChangeEmailForm/_styles.scss
@@ -1,7 +1,7 @@
 .change-email-form {
   &__btn-wrap {
-    @include display(flex);
-    @include flex-direction(row-reverse);
+    display: flex;
+    flex-direction: row-reverse;
   }
 
   &__btn {
diff --git a/frontend/components/forms/ChangePasswordForm/_styles.scss b/frontend/components/forms/ChangePasswordForm/_styles.scss
index b001af999b..53a6333cdb 100644
--- a/frontend/components/forms/ChangePasswordForm/_styles.scss
+++ b/frontend/components/forms/ChangePasswordForm/_styles.scss
@@ -1,7 +1,7 @@
 .change-password-form {
   &__btn-wrap {
-    @include display(flex);
-    @include flex-direction(row-reverse);
+    display: flex;
+    flex-direction: row-reverse;
   }
 
   &__btn {
diff --git a/frontend/components/forms/InviteUserForm/_styles.scss b/frontend/components/forms/InviteUserForm/_styles.scss
index 6a05ece3f2..445de545e7 100644
--- a/frontend/components/forms/InviteUserForm/_styles.scss
+++ b/frontend/components/forms/InviteUserForm/_styles.scss
@@ -23,8 +23,8 @@
   }
 
   &__btn-wrap {
-    @include display(flex);
-    @include flex-direction(row-reverse);
+    display: flex;
+    flex-direction: row-reverse;
   }
 
   &__btn {
diff --git a/frontend/components/forms/LoginForm/_styles.scss b/frontend/components/forms/LoginForm/_styles.scss
index 8af9d92d80..61ccf7c7c2 100644
--- a/frontend/components/forms/LoginForm/_styles.scss
+++ b/frontend/components/forms/LoginForm/_styles.scss
@@ -1,24 +1,23 @@
 .login-form {
-  @include transition(all 300ms ease-in);
-  @include transform(scale(1));
+  transition: transform 300ms ease-in;
+  transform: scale(1);
   margin-top: -260px;
   opacity: 1;
   width: 460px;
   align-self: center;
 
   &--hidden {
-    @include transform(scale(1.3));
+    transform: scale(1.3);
     opacity: 0;
   }
 
   &__container {
-    @include display(flex);
+    display: flex;
     align-items: center;
     background-color: $white;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     box-sizing: border-box;
-    display: flex;
     flex-direction: column;
     padding: 30px;
     width: 460px;
diff --git a/frontend/components/forms/LogoutForm/_styles.scss b/frontend/components/forms/LogoutForm/_styles.scss
index 6284246e5b..9e7acfda29 100644
--- a/frontend/components/forms/LogoutForm/_styles.scss
+++ b/frontend/components/forms/LogoutForm/_styles.scss
@@ -1,11 +1,11 @@
 .logout-form {
-  @include align-self(center);
+  align-self: center;
   width: 460px;
 
   &__container {
-    @include display(flex);
-    @include align-items(center);
-    @include flex-direction(column);
+    display: flex;
+    align-items: center;
+    flex-direction: column;
     background-color: $white;
     box-sizing: border-box;
     padding: 30px;
diff --git a/frontend/components/forms/RegistrationForm/ConfirmationPage/_styles.scss b/frontend/components/forms/RegistrationForm/ConfirmationPage/_styles.scss
index 984b54cbd1..7e6e68f5b1 100644
--- a/frontend/components/forms/RegistrationForm/ConfirmationPage/_styles.scss
+++ b/frontend/components/forms/RegistrationForm/ConfirmationPage/_styles.scss
@@ -65,7 +65,7 @@
   }
 
   &__import {
-    @include user-select(none);
+    user-select: none;
     font-size: 14px;
     font-weight: $light;
     line-height: 1.71;
diff --git a/frontend/components/forms/RegistrationForm/_styles.scss b/frontend/components/forms/RegistrationForm/_styles.scss
index d976f58197..94620ee10f 100644
--- a/frontend/components/forms/RegistrationForm/_styles.scss
+++ b/frontend/components/forms/RegistrationForm/_styles.scss
@@ -1,12 +1,12 @@
 .user-registration {
-  @include display(flex);
-  @include align-content(center);
-  @include justify-content(center);
-  @include flex-grow(1);
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  flex-grow: 1;
 
   &__container {
-    @include align-self(center);
     @include size(500px 520px);
+    align-self: center;
     border-radius: 4px;
     background-color: $bg-light;
     box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.3);
@@ -29,15 +29,15 @@
   }
 
   &__form {
-    @include transform(translateY(-85px));
     @include position(absolute, 49% 0 null null);
+    transform: translateY(-85px);
     width: 100%;
     height: 470px;
     box-sizing: border-box;
     padding: 25px 0;
 
     @include breakpoint(tablet) {
-      @include transform(translateY(-100px));
+      transform: translateY(-100px);
     }
 
     &--step1-complete {
@@ -135,7 +135,7 @@
   }
 
   &__field-wrapper {
-    @include transition(left 300ms ease);
+    transition: left 300ms ease;
     width: 430px;
     min-height: 420px;
     padding-bottom: 75px;
diff --git a/frontend/components/forms/fields/Checkbox/_styles.scss b/frontend/components/forms/fields/Checkbox/_styles.scss
index 4dfddfc738..c79da065c7 100644
--- a/frontend/components/forms/fields/Checkbox/_styles.scss
+++ b/frontend/components/forms/fields/Checkbox/_styles.scss
@@ -16,8 +16,8 @@
       }
 
       &::before {
-        @include transform(rotate(45deg));
         @include position(absolute, 50% null null 50%);
+        transform: rotate(45deg);
         box-sizing: border-box;
         display: block;
         width: 7px;
@@ -34,12 +34,12 @@
   &__tick {
     @include size(20px);
     @include position(absolute, 50% null null 0);
-    @include transform(translateY(-10px));
+    transform: translateY(-10px);
     display: inline-block;
 
     &::after {
-      @include transition(border 75ms ease-in-out, background 75ms ease-in-out);
       @include size(20px);
+      transition: border 75ms ease-in-out, background 75ms ease-in-out;
       border-radius: 2px;
       border: solid 2px $border-medium;
       content: '';
diff --git a/frontend/components/forms/fields/Dropdown/_styles.scss b/frontend/components/forms/fields/Dropdown/_styles.scss
index bf27dd7f53..0fca4ef061 100644
--- a/frontend/components/forms/fields/Dropdown/_styles.scss
+++ b/frontend/components/forms/fields/Dropdown/_styles.scss
@@ -53,8 +53,8 @@
 
       &::after {
         @extend %kolidecon;
-        @include transition(color 150ms ease-in-out);
-        @include transform(translate(-50%, -50%));
+        transition: color 150ms ease-in-out;
+        transform: translate(-50%, -50%);
         content: '\f036';
         position: absolute;
         top: 50%;
@@ -167,14 +167,14 @@
 
   &.Select--multi {
     .Select-control {
-      @include display(flex);
-      @include align-items(center);
+      display: flex;
+      align-items: center;
       height: auto;
       min-height: 40px;
     }
 
     .Select-multi-value-wrapper {
-      @include flex-grow(1);
+      flex-grow: 1;
     }
 
     .Select-arrow-zone {
diff --git a/frontend/components/forms/fields/InputField/_styles.scss b/frontend/components/forms/fields/InputField/_styles.scss
index cb4e70bfc4..4735a60592 100644
--- a/frontend/components/forms/fields/InputField/_styles.scss
+++ b/frontend/components/forms/fields/InputField/_styles.scss
@@ -1,5 +1,5 @@
 .input-field {
-  @include transition(border 150ms ease-in-out, box-shadow 150ms ease-in-out);
+  transition: border 150ms ease-in-out, box-shadow 150ms ease-in-out;
   line-height: 34px;
   background-color: $white;
   border: solid 1px $accent-medium;
@@ -10,7 +10,7 @@
   box-sizing: border-box;
   height: 40px;
 
-  @include placeholder {
+  ::placeholder {
     color: $accent-text;
   }
 
@@ -26,7 +26,7 @@
   }
 
   &--error {
-    @include transition(background 150ms ease-in-out, color 150ms ease-in-out);
+    transition: background 150ms ease-in-out, color 150ms ease-in-out;
     border-color: $alert;
     background-color: $alert-light;
     color: $white;
diff --git a/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss b/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss
index a5f0b79dce..45c7011b75 100644
--- a/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss
+++ b/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss
@@ -31,7 +31,7 @@
     color: $text-dark;
     font-weight: $light;
 
-    @include placeholder {
+    ::placeholder {
       color: $accent-text;
     }
 
diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/_styles.scss b/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/_styles.scss
index 41d8fee6b2..e8c0a95deb 100644
--- a/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/_styles.scss
+++ b/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/_styles.scss
@@ -8,9 +8,9 @@
   }
 
   &__wrapper {
-    @include display(flex);
-    @include align-items(stretch);
-    @include align-content(stretch);
+    display: flex;
+    align-items: stretch;
+    align-content: stretch;
     cursor: default;
   }
 
@@ -24,13 +24,13 @@
   }
 
   &__add-btn {
-    @include transition(color 0ms);
+    transition: color 0ms;
     color: $success;
     font-size: $base;
   }
 
   &__target-content {
-    @include flex-grow(1);
+    flex-grow: 1;
     text-align: left;
   }
 
diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss b/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss
index 68c3324c55..480950253c 100644
--- a/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss
+++ b/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss
@@ -31,7 +31,7 @@
 
   &.Select {
     .Select-control {
-      @include transition(border 150ms ease-in-out, box-shadow 150ms ease-in-out);
+      transition: border 150ms ease-in-out, box-shadow 150ms ease-in-out;
       min-height: 48px;
     }
 
@@ -173,8 +173,8 @@
 
       &::after {
         @extend %kolidecon;
-        @include transition(color 150ms ease-in-out);
-        @include transform(translate(-50%, -50%));
+        transition: color 150ms ease-in-out;
+        transform: translate(-50%, -50%);
         content: '\f036';
         position: absolute;
         top: 50%;
diff --git a/frontend/components/forms/fields/Slider/_styles.scss b/frontend/components/forms/fields/Slider/_styles.scss
index 75f61f4a3d..68a88cc3b6 100644
--- a/frontend/components/forms/fields/Slider/_styles.scss
+++ b/frontend/components/forms/fields/Slider/_styles.scss
@@ -1,5 +1,5 @@
 .kolide-slider {
-  @include transition(background-color 150ms ease-in-out);
+  transition: background-color 150ms ease-in-out;
   background-color: $text-medium;
   border-radius: 12px;
   border: 1px solid #eaeaea;
@@ -26,15 +26,15 @@
   }
 
   &__wrapper {
-    @include display(flex);
-    @include align-items(center);
+    display: flex;
+    align-items: center;
     height: 40px;
   }
 
   &__dot {
-    @include transition(left 150ms ease-in-out);
     @include size(14px);
     @include position(absolute, 0 null null 5px);
+    transition: left 150ms ease-in-out;
     margin-top: 3px;
     border-radius: 50%;
     background-color: $white;
diff --git a/frontend/components/hosts/HostContainer/_styles.scss b/frontend/components/hosts/HostContainer/_styles.scss
index 4d371932d5..dd42a12664 100644
--- a/frontend/components/hosts/HostContainer/_styles.scss
+++ b/frontend/components/hosts/HostContainer/_styles.scss
@@ -40,10 +40,10 @@
   }
 
   &--grid {
-    @include display(flex);
-    @include justify-content(space-around);
-    @include flex-wrap(wrap);
-    @include align-content(center);
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    align-content: center;
     margin: 0 auto;
   }
 }
diff --git a/frontend/components/hosts/HostDetails/_styles.scss b/frontend/components/hosts/HostDetails/_styles.scss
index 5850341067..5451935ac4 100644
--- a/frontend/components/hosts/HostDetails/_styles.scss
+++ b/frontend/components/hosts/HostDetails/_styles.scss
@@ -1,8 +1,8 @@
 .host-details {
-  @include display(flex);
-  @include flex-direction(column);
-  @include flex-grow(1);
-  @include flex-basis(250px);
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  flex-basis: 250px;
   background-color: $white;
   border-radius: 3px;
   box-shadow: 0 12px 17px 0 rgba(47, 47, 91, 0.07), 0 3px 8px 0 rgba(0, 0, 0, 0.08), 0 -2px 0 0 rgba(32, 36, 50, 0.04);
@@ -74,10 +74,10 @@
   }
 
   &__details-list {
-    @include display(flex);
-    @include flex-wrap(wrap);
-    @include justify-content(space-around);
-    @include align-items(center);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-items: center;
     flex: 1;
     list-style: none;
     margin: 0 auto;
@@ -108,25 +108,25 @@
     }
 
     &--os {
-      @include flex-basis(49.5%);
-      @include flex-grow(1);
+      flex-basis: 49.5%;
+      flex-grow: 1;
       border-right: solid 1px rgba(73, 143, 226, 0.16);
     }
 
     &--osquery {
-      @include flex-basis(49.5%);
-      @include flex-grow(1);
+      flex-basis: 49.5%;
+      flex-grow: 1;
     }
 
     &--cpu,
     &--memory,
     &--uptime {
-      @include flex-basis(36%);
+      flex-basis: 36%;
       border-right: solid 1px rgba(73, 143, 226, 0.16);
     }
 
     &--memory {
-      @include flex-basis(27%);
+      flex-basis: 27%;
     }
 
     &--uptime {
@@ -135,7 +135,7 @@
 
     &--mac,
     &--ip {
-      @include flex-basis(100%);
+      flex-basis: 100%;
 
       .kolidecon {
         display: inline;
diff --git a/frontend/components/hosts/LonelyHost/_styles.scss b/frontend/components/hosts/LonelyHost/_styles.scss
index 8ea284301e..576ee9152a 100644
--- a/frontend/components/hosts/LonelyHost/_styles.scss
+++ b/frontend/components/hosts/LonelyHost/_styles.scss
@@ -1,5 +1,5 @@
 .lonely-host {
-  @include display(flex);
+  display: flex;
   padding: 16px 8px;
 
   &__add-host-btn {
diff --git a/frontend/components/loaders/ProgressBar/_styles.scss b/frontend/components/loaders/ProgressBar/_styles.scss
index faf96411e2..20589e799b 100644
--- a/frontend/components/loaders/ProgressBar/_styles.scss
+++ b/frontend/components/loaders/ProgressBar/_styles.scss
@@ -1,5 +1,5 @@
 .progress-bar {
-  @include display(flex);
+  display: flex;
   background-color: $silver;
   height: 10px;
   overflow: hidden;
diff --git a/frontend/components/loaders/Spinner/_styles.scss b/frontend/components/loaders/Spinner/_styles.scss
index 4213cf76bb..b41b3c021d 100644
--- a/frontend/components/loaders/Spinner/_styles.scss
+++ b/frontend/components/loaders/Spinner/_styles.scss
@@ -1,39 +1,39 @@
 .kolide-spinner {
-  @include animation(sk-rotateplane 2.4s infinite ease-in-out);
   @include size(64px);
+  animation: sk-rotateplane 2.4s infinite ease-in-out;
   background-color: #ae6ddf;
   border-radius: 5px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
   margin: 30px auto;
 }
 
-@include keyframes(sk-rotateplane) {
+@keyframes sk-rotateplane {
   0% {
-    @include transform(perspective(120px) rotateX(0deg) rotateY(0deg));
+    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
   }
 
   20% {
-    @include transform(perspective(120px) rotateX(-180.1deg) rotateY(0deg));
+    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
     background: #ff5850;
   }
 
   40% {
-    @include transform(perspective(120px) rotateX(-180deg) rotateY(-179.9deg));
+    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
     background: #ffad00;
   }
 
   60% {
-    @include transform(perspective(120px) rotateX(0deg) rotateY(0deg));
+    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
     background: #4fd061;
   }
 
   80% {
-    @include transform(perspective(120px) rotateX(-180.1deg) rotateY(0deg));
+    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
     background: #4a90e2;
   }
 
   100% {
-    @include transform(perspective(120px) rotateX(-180deg) rotateY(-179.9deg));
+    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
     background: #ae6ddf;
   }
 }
diff --git a/frontend/components/modals/Modal/_styles.scss b/frontend/components/modals/Modal/_styles.scss
index 59422a4c7d..9af026e49d 100644
--- a/frontend/components/modals/Modal/_styles.scss
+++ b/frontend/components/modals/Modal/_styles.scss
@@ -42,7 +42,7 @@
 
   &__modal_container {
     @include position(absolute, 50% null null 50%);
-    @include transform(translate(-50%, -50%));
+    transform: translate(-50%, -50%);
     background-color: $white;
     width: 600px;
     z-index: 3;
diff --git a/frontend/components/queries/QueryResultsTable/_styles.scss b/frontend/components/queries/QueryResultsTable/_styles.scss
index 2bb39474d1..50a958ef67 100644
--- a/frontend/components/queries/QueryResultsTable/_styles.scss
+++ b/frontend/components/queries/QueryResultsTable/_styles.scss
@@ -1,6 +1,6 @@
 .query-results-table {
-  @include display(flex);
-  @include flex-direction(column);
+  display: flex;
+  flex-direction: column;
   background-color: $white;
   padding: $pad-base;
   width: 100%;
@@ -28,8 +28,8 @@
   }
 
   &__table-wrapper {
-    @include display(flex);
-    @include flex-grow(1);
+    display: flex;
+    flex-grow: 1;
     border: solid 1px $accent-dark;
     border-radius: 3px;
     box-shadow: inset 0 0 8px 0 rgba(0, 0, 0, 0.12);
@@ -39,12 +39,12 @@
     width: 100%;
 
     .kolide-spinner {
-      @include align-self(center);
+      align-self: center;
     }
 
     .no-results-message {
-      @include flex-grow(1);
-      @include align-self(center);
+      flex-grow: 1;
+      align-self: center;
       text-align: center;
     }
   }
@@ -118,7 +118,7 @@
   }
 }
 
-@include keyframes(growFullScreen) {
+@keyframes growFullScreen {
   100% {
     top: $pad-half;
     right: $pad-half;
@@ -129,7 +129,7 @@
   }
 }
 
-@include keyframes(shrinkFullScreen) {
+@keyframes shrinkFullScreen {
   0% {
     top: $pad-half;
     right: auto;
diff --git a/frontend/components/queries/ScheduledQueriesListWrapper/_styles.scss b/frontend/components/queries/ScheduledQueriesListWrapper/_styles.scss
index 8038066bb1..0dd7924b59 100644
--- a/frontend/components/queries/ScheduledQueriesListWrapper/_styles.scss
+++ b/frontend/components/queries/ScheduledQueriesListWrapper/_styles.scss
@@ -1,5 +1,5 @@
 .scheduled-queries-list-wrapper {
-  @include flex-grow(1);
+  flex-grow: 1;
   padding: $pad-small $pad-base;
   margin-bottom: $base;
 
diff --git a/frontend/components/side_panels/HostSidePanel/PanelGroupItem/_styles.scss b/frontend/components/side_panels/HostSidePanel/PanelGroupItem/_styles.scss
index 2a5b868a63..0a0f21760b 100644
--- a/frontend/components/side_panels/HostSidePanel/PanelGroupItem/_styles.scss
+++ b/frontend/components/side_panels/HostSidePanel/PanelGroupItem/_styles.scss
@@ -23,7 +23,7 @@ $base-class: 'panel-group-item';
 }
 
 .#{$base-class} {
-  @include transition(color 75ms ease-in-out, background 75ms ease-in-out);
+  transition: color 75ms ease-in-out, background 75ms ease-in-out;
   width: 100%;
   font-size: 16px;
   line-height: 2.25;
@@ -34,19 +34,19 @@ $base-class: 'panel-group-item';
   padding: 0 $pad-large;
 
   &__flexy {
-    @include display(flex);
-    @include align-items(center);
+    display: flex;
+    align-items: center;
   }
 
   &__icon {
-    @include transition(color 75ms ease-in-out);
+    transition: color 75ms ease-in-out;
     margin-right: 23px;
     font-size: 18px;
   }
 
   &__name {
     @include ellipsis(80%);
-    @include flex-grow(1);
+    flex-grow: 1;
   }
 
   &__description {
@@ -56,7 +56,7 @@ $base-class: 'panel-group-item';
   }
 
   &__count {
-    @include transition(color 75ms ease-in-out);
+    transition: color 75ms ease-in-out;
     font-weight: $bold;
     text-align: right;
     font-size: 14px;
diff --git a/frontend/components/side_panels/QuerySidePanel/_styles.scss b/frontend/components/side_panels/QuerySidePanel/_styles.scss
index 67c026e9e1..e6dc5b3512 100644
--- a/frontend/components/side_panels/QuerySidePanel/_styles.scss
+++ b/frontend/components/side_panels/QuerySidePanel/_styles.scss
@@ -54,14 +54,14 @@
   }
 
   &__column-wrapper {
-    @include display(flex);
+    display: flex;
     margin: 0 0 15px;
     padding-top: $pad-half;
     border-top: 1px solid $accent-light;
   }
 
   &__suggestion {
-    @include flex-grow(1);
+    flex-grow: 1;
     font-size: 14px;
     line-height: 1.71;
     letter-spacing: 0.5px;
@@ -70,7 +70,7 @@
   }
 
   &__load-suggestion {
-    @include align-self(center);
+    align-self: center;
     padding: 1px 5px;
     margin: 0 0 0 10px;
   }
@@ -78,9 +78,9 @@
 
 .query-column-list {
   &__item {
-    @include display(flex);
-    @include align-items(center);
-    @include justify-content(space-between);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     border-top: 1px solid $accent-light;
     color: $text-dark;
     font-size: px-to-rem(14);
@@ -103,7 +103,7 @@
   }
 
   &__description {
-    @include flex-grow(1);
+    flex-grow: 1;
     text-align: right;
   }
 
diff --git a/frontend/components/side_panels/SecondarySidePanelContainer/_styles.scss b/frontend/components/side_panels/SecondarySidePanelContainer/_styles.scss
index f1a56b5537..a2acbacade 100644
--- a/frontend/components/side_panels/SecondarySidePanelContainer/_styles.scss
+++ b/frontend/components/side_panels/SecondarySidePanelContainer/_styles.scss
@@ -1,5 +1,5 @@
 .secondary-side-panel-container {
-  @include align-self(stretch);
+  align-self: stretch;
   background-color: $white;
   box-sizing: border-box;
   border-left: 1px solid $border-medium;
diff --git a/frontend/components/side_panels/SiteNavHeader/_styles.scss b/frontend/components/side_panels/SiteNavHeader/_styles.scss
index c89bc8815f..d512a0239e 100644
--- a/frontend/components/side_panels/SiteNavHeader/_styles.scss
+++ b/frontend/components/side_panels/SiteNavHeader/_styles.scss
@@ -2,7 +2,7 @@
   position: relative;
 
   &__button {
-    @include transition(background 150ms $ease-in-quad);
+    transition: background 150ms $ease-in-quad;
     cursor: pointer;
     padding: $pad-large $pad-medium 0;
     position: relative;
@@ -22,8 +22,8 @@
   }
 
   &__org {
-    @include transition(border 150ms $ease-in-quad);
     @include clearfix;
+    transition: border 150ms $ease-in-quad;
     position: relative;
     z-index: 2;
     border-bottom: 1px solid $accent-light;
@@ -191,7 +191,7 @@
     padding: 14px 0;
 
     a {
-      @include transition(opacity 75ms $ease-in-quad, background 75ms $ease-in-quad);
+      transition: opacity 75ms $ease-in-quad, background 75ms $ease-in-quad;
       color: $white;
       display: block;
       text-decoration: none;
diff --git a/frontend/components/side_panels/SiteNavSidePanel/_styles.scss b/frontend/components/side_panels/SiteNavSidePanel/_styles.scss
index 14c24ba916..08e3113257 100644
--- a/frontend/components/side_panels/SiteNavSidePanel/_styles.scss
+++ b/frontend/components/side_panels/SiteNavSidePanel/_styles.scss
@@ -39,7 +39,7 @@
   }
 
   &__button {
-    @include transition(color 200ms ease-in-out);
+    transition: color 200ms ease-in-out;
     line-height: 40px;
     position: relative;
     color: $text-dark;
@@ -106,11 +106,11 @@
 
     .site-nav-item__icon {
       @at-root .site-nav--small & {
-        @include transform(translate(-2px, 3px));
+        transform: translate(-2px, 3px);
       }
 
       @include breakpoint(smalldesk) {
-        @include transform(translate(-2px, 3px));
+        transform: translate(-2px, 3px);
       }
     }
 
@@ -184,7 +184,7 @@
   }
 
   &__button {
-    @include transition(color 150ms ease-in-out);
+    transition: color 150ms ease-in-out;
     color: rgba($white, 0.75);
     text-transform: none;
     cursor: pointer;
@@ -212,7 +212,7 @@
   }
 
   &__link {
-    @include transition(font-size 200ms ease-in-out);
+    transition: font-size 200ms ease-in-out;
     font-size: 14px;
 
     &--active {
@@ -271,7 +271,7 @@
 }
 
 .site-sub-items {
-  @include transition(width 100ms ease-in-out);
+  transition: width 100ms ease-in-out;
   background-color: $brand;
   font-size: 13px;
   margin: 0;
@@ -279,12 +279,14 @@
   position: relative;
 
   @at-root .site-nav--small & {
-    @include linear-gradient(to bottom, $brand 18%, $brand 82%);
+    background-color: $brand 18%;
+    background-image: linear-gradient(to bottom, $brand 18%, $brand 82%);
     box-shadow: none;
   }
 
   @include breakpoint(smalldesk) {
-    @include linear-gradient(to bottom, $brand 18%, $brand 82%);
+    background-color: $brand 18%;
+    background-image: linear-gradient(to bottom, $brand 18%, $brand 82%);
     box-shadow: none;
   }
 
diff --git a/frontend/layouts/CoreLayout/_styles.scss b/frontend/layouts/CoreLayout/_styles.scss
index 9c1b8ce668..3f868b1f0d 100644
--- a/frontend/layouts/CoreLayout/_styles.scss
+++ b/frontend/layouts/CoreLayout/_styles.scss
@@ -1,10 +1,10 @@
 .app-wrap {
-  @include display(flex);
+  display: flex;
   min-height: calc(100vh - #{$footer-height});
 }
 
 .core-wrapper {
-  @include flex-grow(1);
+  flex-grow: 1;
   margin: 0;
   padding: 0 0 0 $pad-base;
   max-width: calc(100% - 258px);
diff --git a/frontend/pages/Admin/UserManagementPage/_styles.scss b/frontend/pages/Admin/UserManagementPage/_styles.scss
index 0372e7b277..7123049b9b 100644
--- a/frontend/pages/Admin/UserManagementPage/_styles.scss
+++ b/frontend/pages/Admin/UserManagementPage/_styles.scss
@@ -31,8 +31,8 @@
   }
 
   &__users {
-    @include display(flex);
-    @include flex-wrap(wrap);
+    display: flex;
+    flex-wrap: wrap;
     clear: both;
   }
 
diff --git a/frontend/pages/LoginPage/_styles.scss b/frontend/pages/LoginPage/_styles.scss
index 32bed13d1f..29e862977a 100644
--- a/frontend/pages/LoginPage/_styles.scss
+++ b/frontend/pages/LoginPage/_styles.scss
@@ -1,10 +1,10 @@
 .login-form-animation-leave {
-  @include transform(scale(1));
+  transform: scale(1);
   opacity: 1;
 
   &.login-form-animation-leave-active {
-    @include transition(all 300ms ease-in);
-    @include transform(scale(1.3));
+    transition: opacity 300ms ease-in, transform 300ms ease-in;
+    transform: scale(1.3);
     opacity: 0;
   }
 }
diff --git a/frontend/pages/LogoutPage/_styles.scss b/frontend/pages/LogoutPage/_styles.scss
index 58a24496c6..8777046958 100644
--- a/frontend/pages/LogoutPage/_styles.scss
+++ b/frontend/pages/LogoutPage/_styles.scss
@@ -1,13 +1,13 @@
 .logout-page {
-  @include display(flex);
-  @include align-items(center);
-  @include justify-content(center);
-  @include flex-direction(column);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
   position: relative;
   height: calc(100vh - #{$footer-height});
 
   &__tab {
-    @include align-self(center);
+    align-self: center;
     background-color: $white;
     height: 30px;
     margin-top: 20px;
diff --git a/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss b/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss
index 112452407a..672fff75d2 100644
--- a/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss
+++ b/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss
@@ -1,7 +1,7 @@
 .registration-breadcrumbs {
-  @include display(flex);
-  @include justify-content(space-between);
-  @include align-content(center);
+  display: flex;
+  justify-content: space-between;
+  align-content: center;
   width: 665px;
   height: 125px;
   margin: 0 auto;
diff --git a/frontend/pages/RegistrationPage/_styles.scss b/frontend/pages/RegistrationPage/_styles.scss
index 7d4b606d4e..7f9aeb444f 100644
--- a/frontend/pages/RegistrationPage/_styles.scss
+++ b/frontend/pages/RegistrationPage/_styles.scss
@@ -1,7 +1,7 @@
 .registration-page {
-  @include display(flex);
-  @include justify-content(center);
-  @include flex-direction(column);
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
   min-height: calc(100vh - #{$footer-height});
   position: relative;
   overflow-x: hidden;
diff --git a/frontend/pages/UserSettingsPage/_styles.scss b/frontend/pages/UserSettingsPage/_styles.scss
index a092af1812..1eabcf45d5 100644
--- a/frontend/pages/UserSettingsPage/_styles.scss
+++ b/frontend/pages/UserSettingsPage/_styles.scss
@@ -1,13 +1,13 @@
 .user-settings {
-  @include display(flex);
+  display: flex;
 
   h1 {
     margin: 0 0 30px;
   }
 
   &__manage {
-    @include flex-grow(1);
-    @include align-self(flex-start);
+    flex-grow: 1;
+    align-self: flex-start;
     padding: 30px;
     min-width: 542px;
   }
@@ -108,7 +108,7 @@
       padding-right: 36px;
       font-family: 'SourceCodePro', $monospace;
 
-      &[type="password"] {
+      &[type='password'] {
         letter-spacing: 3px;
       }
     }
diff --git a/frontend/pages/hosts/ManageHostsPage/_styles.scss b/frontend/pages/hosts/ManageHostsPage/_styles.scss
index ecb5e8306d..020c051757 100644
--- a/frontend/pages/hosts/ManageHostsPage/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/_styles.scss
@@ -62,14 +62,14 @@
   }
 
   &__topper {
-    @include display(flex);
-    @include align-items(flex-end);
+    display: flex;
+    align-items: flex-end;
     border-bottom: solid 1px $accent-light;
     padding-bottom: 10px;
   }
 
   &__host-count {
-    @include flex-grow(1);
+    flex-grow: 1;
     font-size: 14px;
     font-weight: $light;
     letter-spacing: 0.9px;
@@ -85,8 +85,8 @@
   }
 
   &__modal-buttons {
-    @include display(flex);
-    @include flex-direction(row-reverse);
+    display: flex;
+    flex-direction: row-reverse;
 
     .button--alert {
       margin-left: 10px;
@@ -100,6 +100,7 @@
       }
     }
   }
+
   &__toggle-view {
     .kolidecon {
       width: 24px;
@@ -107,7 +108,8 @@
       margin-left: 12px;
       fill: $accent-dark;
     }
-    &--active{
+
+    &--active {
       .kolidecon {
         fill: $link;
       }
diff --git a/frontend/pages/packs/AllPacksPage/_styles.scss b/frontend/pages/packs/AllPacksPage/_styles.scss
index d73a7ea7fc..53e26bfe11 100644
--- a/frontend/pages/packs/AllPacksPage/_styles.scss
+++ b/frontend/pages/packs/AllPacksPage/_styles.scss
@@ -35,8 +35,8 @@
   }
 
   &__search-create-section {
-    @include display(flex);
-    @include justify-content(space-between);
+    display: flex;
+    justify-content: space-between;
 
     input {
       &[name='pack-filter'] {
@@ -62,8 +62,8 @@
   }
 
   &__modal-btn-wrap {
-    @include display(flex);
-    @include flex-direction(row-reverse);
+    display: flex;
+    flex-direction: row-reverse;
 
     .button {
       margin-left: 15px;
diff --git a/frontend/pages/packs/EditPackPage/_styles.scss b/frontend/pages/packs/EditPackPage/_styles.scss
index dbce61801d..81f8bf5777 100644
--- a/frontend/pages/packs/EditPackPage/_styles.scss
+++ b/frontend/pages/packs/EditPackPage/_styles.scss
@@ -1,8 +1,8 @@
 .edit-pack-page {
   @at-root .has-sidebar > &__content {
-    @include display(flex);
-    @include flex-direction(column);
-    @include align-self(stretch);
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
   }
 
   &__pack-form {
diff --git a/frontend/pages/queries/ManageQueriesPage/_styles.scss b/frontend/pages/queries/ManageQueriesPage/_styles.scss
index 215ba541ab..d178d71ae7 100644
--- a/frontend/pages/queries/ManageQueriesPage/_styles.scss
+++ b/frontend/pages/queries/ManageQueriesPage/_styles.scss
@@ -5,7 +5,7 @@
   }
 
   &__ctas {
-    @include flex-grow(1);
+    flex-grow: 1;
     text-align: right;
   }
 
@@ -19,7 +19,7 @@
   }
 
   &__filter-and-cta {
-    @include display(flex);
+    display: flex;
     margin-bottom: $pad-small;
 
     .form-field {
@@ -34,7 +34,7 @@
   }
 
   &__filter-queries {
-    @include flex-grow(1);
+    flex-grow: 1;
     position: relative;
 
     .input-field {
@@ -60,8 +60,8 @@
   }
 
   &__modal-btn-wrap {
-    @include display(flex);
-    @include flex-direction(row-reverse);
+    display: flex;
+    flex-direction: row-reverse;
 
     .button {
       margin-left: 15px;
diff --git a/frontend/pages/queries/QueryPage/_styles.scss b/frontend/pages/queries/QueryPage/_styles.scss
index 99a462b95a..3698898adb 100644
--- a/frontend/pages/queries/QueryPage/_styles.scss
+++ b/frontend/pages/queries/QueryPage/_styles.scss
@@ -1,14 +1,14 @@
 .query-page {
   @at-root .has-sidebar > &__content {
-    @include display(flex);
-    @include flex-direction(column);
-    @include align-self(stretch);
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
     margin-bottom: $pad-base;
   }
 
   &__results {
-    @include display(flex);
-    @include flex-grow(1);
+    display: flex;
+    flex-grow: 1;
     position: relative;
     min-height: 400px;
   }
diff --git a/frontend/styles/global/_forms.scss b/frontend/styles/global/_forms.scss
index 764b64139e..761d12255b 100644
--- a/frontend/styles/global/_forms.scss
+++ b/frontend/styles/global/_forms.scss
@@ -1,5 +1,5 @@
 .input-with-icon {
-  @include placeholder {
+  ::placeholder {
     color: $accent-text;
     opacity: 1;
   }
diff --git a/frontend/styles/global/_global.scss b/frontend/styles/global/_global.scss
index fe1777ebd4..df30a58df2 100644
--- a/frontend/styles/global/_global.scss
+++ b/frontend/styles/global/_global.scss
@@ -89,13 +89,13 @@ a {
 }
 
 .has-sidebar {
-  @include display(flex);
+  display: flex;
   height: 100%;
 
   > * {
     &:first-child {
-      @include flex-grow(1);
-      @include align-self(flex-start);
+      flex-grow: 1;
+      align-self: flex-start;
       margin-right: 0;
     }
   }
diff --git a/package.json b/package.json
index 6b69c8d454..19c68d457f 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,8 @@
     "test": "make test-js"
   },
   "dependencies": {
-    "bourbon": "4.2.7",
+    "autoprefixer": "^9.4.3",
+    "bourbon": "^5.0.0",
     "brace": "0.11.1",
     "classnames": "2.2.5",
     "enzyme": "2.4.2",
@@ -30,22 +31,23 @@
     "node-bourbon": "4.2.8",
     "node-sass": "4.9.0",
     "normalizr": "2.3.1",
+    "postcss-loader": "^3.0.0",
     "proxy-middleware": "0.15.0",
     "rc-pagination": "1.16.3",
+    "react": "15.6.2",
     "react-ace": "3.7.0",
     "react-addons-css-transition-group": "15.6.2",
     "react-dom": "15.6.2",
     "react-entity-getter": "0.0.8",
-    "react-redux-loading-bar": "2.9.3",
     "react-redux": "4.4.9",
+    "react-redux-loading-bar": "2.9.3",
+    "react-router": "2.8.1",
     "react-router-redux": "4.0.8",
     "react-router-transition": "0.1.1",
-    "react-router": "2.8.1",
     "react-select": "1.2.1",
-    "react": "15.6.2",
+    "redux": "3.7.2",
     "redux-mock-store": "1.4.0",
     "redux-thunk": "2.3.0",
-    "redux": "3.7.2",
     "require-hacker": "2.1.4",
     "select": "1.1.2",
     "sockjs-client": "1.1.5",
@@ -54,10 +56,16 @@
     "when": "3.7.8"
   },
   "babel": {
-    "presets": ["env", "react", "stage-0"],
+    "presets": [
+      "env",
+      "react",
+      "stage-0"
+    ],
     "env": {
       "dev": {
-        "presets": ["react-hmre"]
+        "presets": [
+          "react-hmre"
+        ]
       }
     }
   },
@@ -71,16 +79,16 @@
     "babel-eslint": "6.1.2",
     "babel-loader": "6.4.1",
     "babel-preset-env": "1.7.0",
-    "babel-preset-react-hmre": "1.1.1",
     "babel-preset-react": "6.24.1",
+    "babel-preset-react-hmre": "1.1.1",
     "babel-preset-stage-0": "6.24.1",
     "css-loader": "0.28.11",
+    "eslint": "3.19.0",
     "eslint-config-airbnb": "12.0.0",
     "eslint-import-resolver-webpack": "0.10.0",
     "eslint-plugin-import": "1.16.0",
     "eslint-plugin-jsx-a11y": "2.2.3",
     "eslint-plugin-react": "6.10.3",
-    "eslint": "3.19.0",
     "expose-loader": "0.7.5",
     "extract-text-webpack-plugin": "2.1.2",
     "file-loader": "0.11.2",
@@ -96,15 +104,21 @@
     "style-loader": "0.21.0",
     "ts-loader": "0.9.5",
     "ts-node": "1.7.3",
+    "tslint": "5.10.0",
     "tslint-eslint-rules": "5.3.1",
     "tslint-react": "3.6.0",
-    "tslint": "5.10.0",
-    "typescript-require": "0.2.10",
     "typescript": "2.3.4",
+    "typescript-require": "0.2.10",
     "url-loader": "0.6.2",
+    "webpack": "2.7.0",
     "webpack-dev-middleware": "1.12.2",
     "webpack-hot-middleware": "2.22.2",
-    "webpack-notifier": "1.6.0",
-    "webpack": "2.7.0"
-  }
+    "webpack-notifier": "1.6.0"
+  },
+  "browserslist": [
+    "last 1 version",
+    "> 1%",
+    "maintained node versions",
+    "not dead"
+  ]
 }
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000000..88752c6cb0
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer')
+  ]
+}
diff --git a/webpack.config.js b/webpack.config.js
index 313dddeab8..bc754b2fea 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -64,6 +64,7 @@ var config  = {
         exclude: /node_modules/,
         use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [
           { loader: 'css-loader' },
+          { loader: 'postcss-loader' },
           {
             loader: 'sass-loader',
             options: {
@@ -76,7 +77,7 @@ var config  = {
       },
       {
         test: /\.css$/,
-        use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
+        use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'postcss-loader'] })
       },
       {
         test: /\.jsx?$/,
diff --git a/yarn.lock b/yarn.lock
index 24fcec4f21..8d499de1a0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -77,6 +77,11 @@ acorn@^5.0.0, acorn@^5.5.0:
   version "5.6.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.6.1.tgz#c9e50c3e3717cf897f1b071ceadbb543bbc0a8d4"
 
+ajv-errors@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
+  integrity sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==
+
 ajv-keywords@^1.0.0, ajv-keywords@^1.1.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.1.tgz#314dd0a4b3368fad3dfcdc54ede6171b886daf3c"
@@ -304,6 +309,18 @@ autoprefixer@^6.3.1:
     postcss "^5.2.16"
     postcss-value-parser "^3.2.3"
 
+autoprefixer@^9.4.3:
+  version "9.4.3"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.4.3.tgz#c97384a8fd80477b78049163a91bbc725d9c41d9"
+  integrity sha512-/XSnzDepRkAU//xLcXA/lUWxpsBuw0WiriAHOqnxkuCtzLhaz+fL4it4gp20BQ8n5SyLzK/FOc7A0+u/rti2FQ==
+  dependencies:
+    browserslist "^4.3.6"
+    caniuse-lite "^1.0.30000921"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^7.0.6"
+    postcss-value-parser "^3.3.1"
+
 aws-sign2@~0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
@@ -1145,14 +1162,15 @@ boom@2.x.x:
   dependencies:
     hoek "2.x.x"
 
-bourbon@4.2.7:
-  version "4.2.7"
-  resolved "https://registry.yarnpkg.com/bourbon/-/bourbon-4.2.7.tgz#48a805dff475fbf61e002a64e1e4db68d2f82fba"
-
 bourbon@^4.2.6:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/bourbon/-/bourbon-4.3.4.tgz#4da380029e92c0c8f9764c779451a134b11e7cc3"
 
+bourbon@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/bourbon/-/bourbon-5.1.0.tgz#84fa10de4c4e837602d8c2ec716d74bcb8915bad"
+  integrity sha512-rO4rwNAVNuzPmnL+DruxAe7DR2YFFo4nHsgDVRd9URMgDxtHmVBUnvFLXPan6teVe7jkybCyxcnR+CKClotj3g==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -1259,6 +1277,15 @@ browserslist@^3.2.6:
     caniuse-lite "^1.0.30000844"
     electron-to-chromium "^1.3.47"
 
+browserslist@^4.3.6:
+  version "4.3.6"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.3.6.tgz#0f9d9081afc66b36f477c6bdf3813f784f42396a"
+  integrity sha512-kMGKs4BTzRWviZ8yru18xBpx+CyHG9eqgRbj9XbE3IMgtczf4aiA0Y1YCpVdvUieKGZ03kolSPXqTcscBCb9qw==
+  dependencies:
+    caniuse-lite "^1.0.30000921"
+    electron-to-chromium "^1.3.92"
+    node-releases "^1.1.1"
+
 buffer-from@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.0.tgz#87fcaa3a298358e0ade6e442cfce840740d1ad04"
@@ -1354,6 +1381,11 @@ caniuse-lite@^1.0.30000844:
   version "1.0.30000847"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000847.tgz#be77f439be29bbc57ae08004b1e470b653b1ec1d"
 
+caniuse-lite@^1.0.30000921:
+  version "1.0.30000925"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000925.tgz#f1a3b9aae2a83071b1eccfa39959d72440409b08"
+  integrity sha512-zcYupoUxtW46rOikuDF7vfL9N1Qe9ZuUBTz3n3q8fFsoJIs/h9UN6Vg/0QpjsmvImXw9mVc3g+ZBfqvUz/iALA==
+
 caseless@~0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.11.0.tgz#715b96ea9841593cc33067923f5ec60ebda4f7d7"
@@ -1664,6 +1696,16 @@ core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
 
+cosmiconfig@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-4.0.0.tgz#760391549580bbd2df1e562bc177b13c290972dc"
+  integrity sha512-6e5vDdrXZD+t5v0L8CrurPeybg4Fmf+FCSYxXKYVAqLUtyCSbuyqE059d0kDthTNRzKVjL7QMgNpEUlsoYH3iQ==
+  dependencies:
+    is-directory "^0.3.1"
+    js-yaml "^3.9.0"
+    parse-json "^4.0.0"
+    require-from-string "^2.0.1"
+
 create-ecdh@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.3.tgz#c9111b6f33045c4697f144787f9254cdc77c45ff"
@@ -2089,6 +2131,11 @@ electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.47:
   version "1.3.48"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.48.tgz#d3b0d8593814044e092ece2108fc3ac9aea4b900"
 
+electron-to-chromium@^1.3.92:
+  version "1.3.96"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.96.tgz#25770ec99b8b07706dedf3a5f43fa50cb54c4f9a"
+  integrity sha512-ZUXBUyGLeoJxp4Nt6G/GjBRLnyz8IKQGexZ2ndWaoegThgMGFO1tdDYID5gBV32/1S83osjJHyfzvanE/8HY4Q==
+
 elliptic@^6.0.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"
@@ -2167,6 +2214,13 @@ error-ex@^1.2.0:
   dependencies:
     is-arrayish "^0.2.1"
 
+error-ex@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
+  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
+  dependencies:
+    is-arrayish "^0.2.1"
+
 error-stack-parser@^1.3.6:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-1.3.6.tgz#e0e73b93e417138d1cd7c0b746b1a4a14854c292"
@@ -2792,12 +2846,14 @@ fresh@0.5.2:
 front-matter@2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/front-matter/-/front-matter-2.1.2.tgz#f75983b9f2f413be658c93dfd7bd8ce4078f5cdb"
+  integrity sha1-91mDufL0E75ljJPf172M5AePXNs=
   dependencies:
     js-yaml "^3.4.6"
 
 fs-extra@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-3.0.1.tgz#3794f378c58b342ea7dbbb23095109c4b3b62291"
+  integrity sha1-N5TzeMWLNC6n27sjCVEJxLO2IpE=
   dependencies:
     graceful-fs "^4.1.2"
     jsonfile "^3.0.0"
@@ -2970,6 +3026,7 @@ globule@^1.0.0:
 gonzales-pe-sl@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/gonzales-pe-sl/-/gonzales-pe-sl-4.2.3.tgz#6a868bc380645f141feeb042c6f97fcc71b59fe6"
+  integrity sha1-aoaLw4BkXxQf7rBCxvl/zHG1n+Y=
   dependencies:
     minimist "1.1.x"
 
@@ -3276,6 +3333,20 @@ ignore@^3.1.2, ignore@^3.2.0:
   version "3.3.8"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.8.tgz#3f8e9c35d38708a3a7e0e9abb6c73e7ee7707b2b"
 
+import-cwd@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
+  integrity sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=
+  dependencies:
+    import-from "^2.1.0"
+
+import-from@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/import-from/-/import-from-2.1.0.tgz#335db7f2a7affd53aaa471d4b8021dee36b7f3b1"
+  integrity sha1-M1238qev/VOqpHHUuAId7ja387E=
+  dependencies:
+    resolve-from "^3.0.0"
+
 import-glob-loader@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/import-glob-loader/-/import-glob-loader-1.1.0.tgz#98d84c0f661c8ba9f821d9ddb7c6b6dc8e97eca2"
@@ -3442,6 +3513,11 @@ is-descriptor@^1.0.0, is-descriptor@^1.0.2:
     is-data-descriptor "^1.0.0"
     kind-of "^6.0.2"
 
+is-directory@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
+  integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=
+
 is-equal@^1.5.1:
   version "1.5.5"
   resolved "https://registry.yarnpkg.com/is-equal/-/is-equal-1.5.5.tgz#5e85f1957e052883247feb386965a3bba15fbb3d"
@@ -3657,7 +3733,15 @@ js-tokens@^3.0.0, js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
 
-js-yaml@^3.4.6, js-yaml@^3.5.1, js-yaml@^3.5.4, js-yaml@^3.7.0:
+js-yaml@^3.4.6, js-yaml@^3.9.0:
+  version "3.12.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.0.tgz#eaed656ec8344f10f527c6bfa1b6e2244de167d1"
+  integrity sha512-PIt2cnwmPfL4hKNwqeiuz4bKfnzHTBv6HyVgjahA6mPLwPDzjDWrplJBMjHUFxku/N3FlmrbyPclad+I+4mJ3A==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+js-yaml@^3.5.1, js-yaml@^3.5.4, js-yaml@^3.7.0:
   version "3.11.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.11.0.tgz#597c1a8bd57152f26d622ce4117851a51f5ebaef"
   dependencies:
@@ -3731,6 +3815,11 @@ json-loader@0.5.7, json-loader@^0.5.4:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/json-loader/-/json-loader-0.5.7.tgz#dca14a70235ff82f0ac9a3abeb60d337a365185d"
 
+json-parse-better-errors@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
+  integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
+
 json-schema-traverse@^0.3.0:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340"
@@ -3760,6 +3849,7 @@ json5@^0.5.0, json5@^0.5.1:
 jsonfile@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-3.0.1.tgz#a5ecc6f65f53f662c4415c7675a0331d0992ec66"
+  integrity sha1-pezG9l9T9mLEQVx2daAzHQmS7GY=
   optionalDependencies:
     graceful-fs "^4.1.6"
 
@@ -3807,6 +3897,7 @@ kind-of@^6.0.0, kind-of@^6.0.2:
 known-css-properties@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.3.0.tgz#a3d135bbfc60ee8c6eacf2f7e7e6f2d4755e49a4"
+  integrity sha512-QMQcnKAiQccfQTqtBh/qwquGZ2XK/DXND1jrcN9M8gMMy99Gwla7GQjndVUsEqIaRyP6bsFRuhwRj5poafBGJQ==
 
 lazy-cache@^1.0.3:
   version "1.0.4"
@@ -4366,6 +4457,13 @@ node-pre-gyp@^0.10.0:
     semver "^5.3.0"
     tar "^4"
 
+node-releases@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.2.tgz#93c17fba5eec8650ad908de5433fa8763baebe4d"
+  integrity sha512-j1gEV/zX821yxdWp/1vBMN0pSUjuH9oGUdLCb4PfUko6ZW7KdRs3Z+QGGwDUhYtSpQvdVVyLd2V0YvLsmdg5jQ==
+  dependencies:
+    semver "^5.3.0"
+
 node-sass@4.9.0:
   version "4.9.0"
   resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.9.0.tgz#d1b8aa855d98ed684d6848db929a20771cc2ae52"
@@ -4626,6 +4724,14 @@ parse-json@^2.2.0:
   dependencies:
     error-ex "^1.2.0"
 
+parse-json@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
+  integrity sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=
+  dependencies:
+    error-ex "^1.3.1"
+    json-parse-better-errors "^1.0.1"
+
 parse5@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-1.5.1.tgz#9b7f3b0de32be78dc2401b17573ccaf0f6f59d94"
@@ -4792,6 +4898,24 @@ postcss-filter-plugins@^2.0.0:
   dependencies:
     postcss "^5.0.4"
 
+postcss-load-config@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.0.0.tgz#f1312ddbf5912cd747177083c5ef7a19d62ee484"
+  integrity sha512-V5JBLzw406BB8UIfsAWSK2KSwIJ5yoEIVFb4gVkXci0QdKgA24jLmHZ/ghe/GgX0lJ0/D1uUK1ejhzEY94MChQ==
+  dependencies:
+    cosmiconfig "^4.0.0"
+    import-cwd "^2.0.0"
+
+postcss-loader@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-3.0.0.tgz#6b97943e47c72d845fa9e03f273773d4e8dd6c2d"
+  integrity sha512-cLWoDEY5OwHcAjDnkyRQzAXfs2jrKjXpO/HQFcc5b5u/r7aa471wdmChmwfnv7x2u840iat/wi0lQ5nbRgSkUA==
+  dependencies:
+    loader-utils "^1.1.0"
+    postcss "^7.0.0"
+    postcss-load-config "^2.0.0"
+    schema-utils "^1.0.0"
+
 postcss-merge-idents@^2.1.5:
   version "2.1.7"
   resolved "https://registry.yarnpkg.com/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz#4c5530313c08e1d5b3bbf3d2bbc747e278eea270"
@@ -4952,6 +5076,11 @@ postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
 
+postcss-value-parser@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
+  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
+
 postcss-zindex@^2.0.1:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/postcss-zindex/-/postcss-zindex-2.2.0.tgz#d2109ddc055b91af67fc4cb3b025946639d2af22"
@@ -4977,6 +5106,15 @@ postcss@^6.0.1:
     source-map "^0.6.1"
     supports-color "^5.4.0"
 
+postcss@^7.0.0, postcss@^7.0.6:
+  version "7.0.7"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.7.tgz#2754d073f77acb4ef08f1235c36c5721a7201614"
+  integrity sha512-HThWSJEPkupqew2fnuQMEI2YcTj/8gMV3n80cMdJsKxfIh5tHf7nM5JigNX6LxVMqo6zkgQNAI88hyFvBk41Pg==
+  dependencies:
+    chalk "^2.4.1"
+    source-map "^0.6.1"
+    supports-color "^5.5.0"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -5559,6 +5697,11 @@ require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
 
+require-from-string@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
+  integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
+
 require-hacker@2.1.4:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/require-hacker/-/require-hacker-2.1.4.tgz#1683da866119495e0ffcda8ebed9bbcf556849f2"
@@ -5585,6 +5728,11 @@ resolve-from@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"
 
+resolve-from@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
+  integrity sha1-six699nWiBvItuZTM17rywoYh0g=
+
 resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
@@ -5665,6 +5813,7 @@ sass-graph@^2.2.4:
 sass-lint@1.12.1:
   version "1.12.1"
   resolved "https://registry.yarnpkg.com/sass-lint/-/sass-lint-1.12.1.tgz#630f69c216aa206b8232fb2aa907bdf3336b6d83"
+  integrity sha1-Yw9pwhaqIGuCMvsqqQe98zNrbYM=
   dependencies:
     commander "^2.8.1"
     eslint "^2.7.0"
@@ -5708,6 +5857,15 @@ schema-utils@^0.4.5:
     ajv "^6.1.0"
     ajv-keywords "^3.1.0"
 
+schema-utils@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
+  integrity sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==
+  dependencies:
+    ajv "^6.1.0"
+    ajv-errors "^1.0.0"
+    ajv-keywords "^3.1.0"
+
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
@@ -6131,6 +6289,13 @@ supports-color@^5.3.0, supports-color@^5.4.0:
   dependencies:
     has-flag "^3.0.0"
 
+supports-color@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
+  dependencies:
+    has-flag "^3.0.0"
+
 svgo@^0.7.0:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"
@@ -6457,8 +6622,9 @@ uniqs@^2.0.0:
   resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
 
 universalify@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
+  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
 
 unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"