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 4307773400a8..cf61c3222e82 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 9ec1cccec0a0..24d93d303227 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 92772fe662be..83d83eede5be 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 91b60005aba8..ea156f53a376 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 52d0072fb256..12d4af78e6cd 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 3c8238c7f60b..ffba259b061a 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 0ca7727e6e8d..36b3d7fefbda 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 0e20289a2b8f..3dafec712b22 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 3755f9e7e611..d5c95718d503 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 e14d204d92fe..1f7e86951a98 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 0428bcc6337e..f673bdc78ce6 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 b001af999b81..53a6333cdb7e 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 6a05ece3f25e..445de545e769 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 8af9d92d8013..61ccf7c7c2c5 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 6284246e5b4f..9e7acfda2908 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 984b54cbd1b5..7e6e68f5b1b1 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 d976f58197a7..94620ee10ff1 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 4dfddfc738ed..c79da065c70e 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 bf27dd7f531a..0fca4ef061e7 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 cb4e70bfc4b5..4735a6059247 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 a5f0b79dce1a..45c7011b753a 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 41d8fee6b29f..e8c0a95debf3 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 68c3324c5562..480950253c98 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 75f61f4a3d08..68a88cc3b6ed 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 4d371932d5d7..dd42a126645b 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 5850341067d0..5451935ac4ea 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 8ea284301ee8..576ee9152af4 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 faf96411e239..20589e799bd0 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 4213cf76bb14..b41b3c021d96 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 59422a4c7d47..9af026e49d97 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 2bb39474d1ef..50a958ef6769 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 8038066bb1fc..0dd7924b59f6 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 2a5b868a6321..0a0f21760b2a 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 67c026e9e18c..e6dc5b3512e7 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 f1a56b553745..a2acbacade12 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 c89bc8815fac..d512a0239ea3 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 14c24ba9162f..08e311325743 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 9c1b8ce66845..3f868b1f0d3d 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 0372e7b277fc..7123049b9b98 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 32bed13d1f0a..29e862977a89 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 58a24496c6c1..8777046958be 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 112452407a7a..672fff75d236 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 7d4b606d4ea3..7f9aeb444f27 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 a092af181278..1eabcf45d579 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 ecb5e8306df3..020c05175766 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 d73a7ea7fc26..53e26bfe117f 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 dbce61801deb..81f8bf5777cf 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 215ba541ab3e..d178d71ae74b 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 99a462b95a93..3698898adb00 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 764b64139e50..761d12255b1d 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 fe1777ebd4d6..df30a58df2b7 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 6b69c8d454aa..19c68d457fee 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 000000000000..88752c6cb06b
--- /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 313dddeab833..bc754b2fea21 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 24fcec4f2149..8d499de1a016 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"