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

frontend/components/AuthenticationFormWrapper/_styles.scss

@@ -1,8 +1,8 @@
 .auth-form-wrapper {
-  @include display(flex);
+  display: flex;
-  @include flex-direction(column);
+  flex-direction: column;
-  @include justify-content(center);
+  justify-content: center;
-  @include flex-grow(1);
+  flex-grow: 1;
   padding: $base 0;
 
   &__logo {

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;

frontend/components/LoginRoutes/_styles.scss

@@ -1,8 +1,8 @@
 .login-routes {
-  @include align-items(center);
+  align-items: center;
-  @include display(flex);
+  display: flex;
-  @include flex-direction(column);
+  flex-direction: column;
-  @include justify-content(center);
+  justify-content: center;
   position: relative;
   min-height: calc(100vh - #{$footer-height});
   background-color: $white;

frontend/components/SmtpWarning/_styles.scss

@@ -1,7 +1,7 @@
 .smtp-warning {
-  @include display(flex);
+  display: flex;
-  @include justify-content(space-between);
+  justify-content: space-between;
-  @include align-items(flex-start);
+  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;
   }
 

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;

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;

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;

frontend/components/buttons/EllipsisMenu/_styles.scss

@@ -1,5 +1,5 @@
 .ellipsis-menu {
-  @include user-select(none);
+  user-select: none;
   display: inline-block;
   position: absolute;
 

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;
 

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 @@
     }
   }
 }
-

frontend/components/forms/ChangeEmailForm/_styles.scss

@@ -1,7 +1,7 @@
 .change-email-form {
   &__btn-wrap {
-    @include display(flex);
+    display: flex;
-    @include flex-direction(row-reverse);
+    flex-direction: row-reverse;
   }
 
   &__btn {

frontend/components/forms/ChangePasswordForm/_styles.scss

@@ -1,7 +1,7 @@
 .change-password-form {
   &__btn-wrap {
-    @include display(flex);
+    display: flex;
-    @include flex-direction(row-reverse);
+    flex-direction: row-reverse;
   }
 
   &__btn {

frontend/components/forms/InviteUserForm/_styles.scss

@@ -23,8 +23,8 @@
   }
 
   &__btn-wrap {
-    @include display(flex);
+    display: flex;
-    @include flex-direction(row-reverse);
+    flex-direction: row-reverse;
   }
 
   &__btn {

frontend/components/forms/LoginForm/_styles.scss

@@ -1,24 +1,23 @@
 .login-form {
-  @include transition(all 300ms ease-in);
+  transition: transform 300ms ease-in;
-  @include transform(scale(1));
+  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;

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);
+    display: flex;
-    @include align-items(center);
+    align-items: center;
-    @include flex-direction(column);
+    flex-direction: column;
     background-color: $white;
     box-sizing: border-box;
     padding: 30px;

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;

frontend/components/forms/RegistrationForm/_styles.scss

@@ -1,12 +1,12 @@
 .user-registration {
-  @include display(flex);
+  display: flex;
-  @include align-content(center);
+  align-content: center;
-  @include justify-content(center);
+  justify-content: center;
-  @include flex-grow(1);
+  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;

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: '';

frontend/components/forms/fields/Dropdown/_styles.scss

@@ -53,8 +53,8 @@
 
       &::after {
         @extend %kolidecon;
-        @include transition(color 150ms ease-in-out);
+        transition: color 150ms ease-in-out;
-        @include transform(translate(-50%, -50%));
+        transform: translate(-50%, -50%);
         content: '\f036';
         position: absolute;
         top: 50%;
@@ -167,14 +167,14 @@
 
   &.Select--multi {
     .Select-control {
-      @include display(flex);
+      display: flex;
-      @include align-items(center);
+      align-items: center;
       height: auto;
       min-height: 40px;
     }
 
     .Select-multi-value-wrapper {
-      @include flex-grow(1);
+      flex-grow: 1;
     }
 
     .Select-arrow-zone {

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;

frontend/components/forms/fields/InputFieldWithIcon/_styles.scss

@@ -31,7 +31,7 @@
     color: $text-dark;
     font-weight: $light;
 
-    @include placeholder {
+    ::placeholder {
       color: $accent-text;
     }
 

frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/_styles.scss

@@ -8,9 +8,9 @@
   }
 
   &__wrapper {
-    @include display(flex);
+    display: flex;
-    @include align-items(stretch);
+    align-items: stretch;
-    @include align-content(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;
   }
 

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);
+        transition: color 150ms ease-in-out;
-        @include transform(translate(-50%, -50%));
+        transform: translate(-50%, -50%);
         content: '\f036';
         position: absolute;
         top: 50%;

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);
+    display: flex;
-    @include align-items(center);
+    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;

frontend/components/hosts/HostContainer/_styles.scss

@@ -40,10 +40,10 @@
   }
 
   &--grid {
-    @include display(flex);
+    display: flex;
-    @include justify-content(space-around);
+    justify-content: space-around;
-    @include flex-wrap(wrap);
+    flex-wrap: wrap;
-    @include align-content(center);
+    align-content: center;
     margin: 0 auto;
   }
 }

frontend/components/hosts/HostDetails/_styles.scss

@@ -1,8 +1,8 @@
 .host-details {
-  @include display(flex);
+  display: flex;
-  @include flex-direction(column);
+  flex-direction: column;
-  @include flex-grow(1);
+  flex-grow: 1;
-  @include flex-basis(250px);
+  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);
+    display: flex;
-    @include flex-wrap(wrap);
+    flex-wrap: wrap;
-    @include justify-content(space-around);
+    justify-content: space-around;
-    @include align-items(center);
+    align-items: center;
     flex: 1;
     list-style: none;
     margin: 0 auto;
@@ -108,25 +108,25 @@
     }
 
     &--os {
-      @include flex-basis(49.5%);
+      flex-basis: 49.5%;
-      @include flex-grow(1);
+      flex-grow: 1;
       border-right: solid 1px rgba(73, 143, 226, 0.16);
     }
 
     &--osquery {
-      @include flex-basis(49.5%);
+      flex-basis: 49.5%;
-      @include flex-grow(1);
+      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;

frontend/components/hosts/LonelyHost/_styles.scss

@@ -1,5 +1,5 @@
 .lonely-host {
-  @include display(flex);
+  display: flex;
   padding: 16px 8px;
 
   &__add-host-btn {

frontend/components/loaders/ProgressBar/_styles.scss

@@ -1,5 +1,5 @@
 .progress-bar {
-  @include display(flex);
+  display: flex;
   background-color: $silver;
   height: 10px;
   overflow: hidden;

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;
   }
 }

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;

frontend/components/queries/QueryResultsTable/_styles.scss

@@ -1,6 +1,6 @@
 .query-results-table {
-  @include display(flex);
+  display: flex;
-  @include flex-direction(column);
+  flex-direction: column;
   background-color: $white;
   padding: $pad-base;
   width: 100%;
@@ -28,8 +28,8 @@
   }
 
   &__table-wrapper {
-    @include display(flex);
+    display: flex;
-    @include flex-grow(1);
+    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);
+      flex-grow: 1;
-      @include align-self(center);
+      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;

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;
 

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);
+    display: flex;
-    @include align-items(center);
+    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;

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);
+    display: flex;
-    @include align-items(center);
+    align-items: center;
-    @include justify-content(space-between);
+    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;
   }
 

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;

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;

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;
   }
 

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);

frontend/pages/Admin/UserManagementPage/_styles.scss

@@ -31,8 +31,8 @@
   }
 
   &__users {
-    @include display(flex);
+    display: flex;
-    @include flex-wrap(wrap);
+    flex-wrap: wrap;
     clear: both;
   }
 

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);
+    transition: opacity 300ms ease-in, transform 300ms ease-in;
-    @include transform(scale(1.3));
+    transform: scale(1.3);
     opacity: 0;
   }
 }

frontend/pages/LogoutPage/_styles.scss

@@ -1,13 +1,13 @@
 .logout-page {
-  @include display(flex);
+  display: flex;
-  @include align-items(center);
+  align-items: center;
-  @include justify-content(center);
+  justify-content: center;
-  @include flex-direction(column);
+  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;

frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss

@@ -1,7 +1,7 @@
 .registration-breadcrumbs {
-  @include display(flex);
+  display: flex;
-  @include justify-content(space-between);
+  justify-content: space-between;
-  @include align-content(center);
+  align-content: center;
   width: 665px;
   height: 125px;
   margin: 0 auto;

frontend/pages/RegistrationPage/_styles.scss

@@ -1,7 +1,7 @@
 .registration-page {
-  @include display(flex);
+  display: flex;
-  @include justify-content(center);
+  justify-content: center;
-  @include flex-direction(column);
+  flex-direction: column;
   min-height: calc(100vh - #{$footer-height});
   position: relative;
   overflow-x: hidden;

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);
+    flex-grow: 1;
-    @include align-self(flex-start);
+    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;
       }
     }

frontend/pages/hosts/ManageHostsPage/_styles.scss

@@ -62,14 +62,14 @@
   }
 
   &__topper {
-    @include display(flex);
+    display: flex;
-    @include align-items(flex-end);
+    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);
+    display: flex;
-    @include flex-direction(row-reverse);
+    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;
       }

frontend/pages/packs/AllPacksPage/_styles.scss

@@ -35,8 +35,8 @@
   }
 
   &__search-create-section {
-    @include display(flex);
+    display: flex;
-    @include justify-content(space-between);
+    justify-content: space-between;
 
     input {
       &[name='pack-filter'] {
@@ -62,8 +62,8 @@
   }
 
   &__modal-btn-wrap {
-    @include display(flex);
+    display: flex;
-    @include flex-direction(row-reverse);
+    flex-direction: row-reverse;
 
     .button {
       margin-left: 15px;

frontend/pages/packs/EditPackPage/_styles.scss

@@ -1,8 +1,8 @@
 .edit-pack-page {
   @at-root .has-sidebar > &__content {
-    @include display(flex);
+    display: flex;
-    @include flex-direction(column);
+    flex-direction: column;
-    @include align-self(stretch);
+    align-self: stretch;
   }
 
   &__pack-form {

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);
+    display: flex;
-    @include flex-direction(row-reverse);
+    flex-direction: row-reverse;
 
     .button {
       margin-left: 15px;

frontend/pages/queries/QueryPage/_styles.scss

@@ -1,14 +1,14 @@
 .query-page {
   @at-root .has-sidebar > &__content {
-    @include display(flex);
+    display: flex;
-    @include flex-direction(column);
+    flex-direction: column;
-    @include align-self(stretch);
+    align-self: stretch;
     margin-bottom: $pad-base;
   }
 
   &__results {
-    @include display(flex);
+    display: flex;
-    @include flex-grow(1);
+    flex-grow: 1;
     position: relative;
     min-height: 400px;
   }

frontend/styles/global/_forms.scss

@@ -1,5 +1,5 @@
 .input-with-icon {
-  @include placeholder {
+  ::placeholder {
     color: $accent-text;
     opacity: 1;
   }

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);
+      flex-grow: 1;
-      @include align-self(flex-start);
+      align-self: flex-start;
       margin-right: 0;
     }
   }

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-notifier": "1.6.0"
-    "webpack": "2.7.0"
+  },
-  }
+  "browserslist": [
+    "last 1 version",
+    "> 1%",
+    "maintained node versions",
+    "not dead"
+  ]
 }

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer')
+  ]
+}

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?$/,

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"
+  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
+  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"