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 430777340..cf61c3222 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 9ec1cccec..24d93d303 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 92772fe66..83d83eede 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 91b60005a..ea156f53a 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 52d0072fb..12d4af78e 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 3c8238c7f..ffba259b0 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 0ca7727e6..36b3d7fef 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 0e20289a2..3dafec712 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 3755f9e7e..d5c95718d 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 e14d204d9..1f7e86951 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 0428bcc63..f673bdc78 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 b001af999..53a6333cd 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 6a05ece3f..445de545e 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 8af9d92d8..61ccf7c7c 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 6284246e5..9e7acfda2 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 984b54cbd..7e6e68f5b 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 d976f5819..94620ee10 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 4dfddfc73..c79da065c 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 bf27dd7f5..0fca4ef06 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 cb4e70bfc..4735a6059 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 a5f0b79dc..45c7011b7 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 41d8fee6b..e8c0a95de 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 68c3324c5..480950253 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 75f61f4a3..68a88cc3b 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 4d371932d..dd42a1266 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 585034106..5451935ac 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 8ea284301..576ee9152 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 faf96411e..20589e799 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 4213cf76b..b41b3c021 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 59422a4c7..9af026e49 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 2bb39474d..50a958ef6 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 8038066bb..0dd7924b5 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 2a5b868a6..0a0f21760 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 67c026e9e..e6dc5b351 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 f1a56b553..a2acbacad 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 c89bc8815..d512a0239 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 14c24ba91..08e311325 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 9c1b8ce66..3f868b1f0 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 0372e7b27..7123049b9 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 32bed13d1..29e862977 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 58a24496c..877704695 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 112452407..672fff75d 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 7d4b606d4..7f9aeb444 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 a092af181..1eabcf45d 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 ecb5e8306..020c05175 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 d73a7ea7f..53e26bfe1 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 dbce61801..81f8bf577 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 215ba541a..d178d71ae 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 99a462b95..3698898ad 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 764b64139..761d12255 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 fe1777ebd..df30a58df 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 6b69c8d45..19c68d457 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 000000000..88752c6cb
--- /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 313dddeab..bc754b2fe 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 24fcec4f2..8d499de1a 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"