Adds a vendors folder for third party CSS

Does not run stylelint for the vendors folder

app/assets/stylesheets/application.scss

@@ -28,6 +28,9 @@
 // Component specific styles, will be moved to gitlab-ui
 @import "components/**/*";
 
+// Vendors specific styles
+@import "vendors/**/*";
+
 // Styles for JS behaviors.
 @import "behaviors";
 

app/assets/stylesheets/framework/markdown_area.scss

@@ -163,88 +163,6 @@
   }
 }
 
-.atwho-view {
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  .name,
-  small.aliases,
-  small.params {
-    float: left;
-  }
-
-  small.aliases,
-  small.params {
-    padding: 2px 5px;
-  }
-
-  small.description {
-    float: right;
-    padding: 3px 5px;
-  }
-
-  .avatar-inline {
-    margin-bottom: 0;
-  }
-
-  .has-warning {
-    .name,
-    .description {
-      color: $orange-700;
-    }
-  }
-
-  .cur {
-    .avatar {
-      @include disable-all-animation;
-      border: 1px solid $white-light;
-    }
-  }
-
-  ul > li {
-    @include clearfix;
-    white-space: nowrap;
-  }
-
-  // TODO: fallback to global style
-  .atwho-view-ul {
-    padding: 8px 1px;
-
-    li {
-      padding: 8px 16px;
-      border: 0;
-
-      &.cur {
-        background-color: $gray-darker;
-        color: $gl-text-color;
-
-        small {
-          color: inherit;
-        }
-
-        &.has-warning {
-          color: $orange-700;
-          background-color: $orange-100;
-        }
-      }
-
-      div.avatar {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-
-        .center {
-          line-height: 14px;
-        }
-      }
-
-      strong {
-        color: $gl-text-color;
-      }
-    }
-  }
-}
-
 .md-suggestion-diff {
   display: table !important;
   border: 1px solid $border-color !important;
@@ -269,15 +187,6 @@
 }
 
 @include media-breakpoint-down(xs) {
-  .atwho-view-ul {
-    width: 350px;
-  }
-
-  .atwho-view ul li {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
   .referenced-users {
     margin-right: 0;
   }

app/assets/stylesheets/vendors/atwho.scss

@@ -0,0 +1,92 @@
+.atwho-view {
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  .name,
+  small.aliases,
+  small.params {
+    float: left;
+  }
+
+  small.aliases,
+  small.params {
+    padding: 2px 5px;
+  }
+
+  small.description {
+    float: right;
+    padding: 3px 5px;
+  }
+
+  .avatar-inline {
+    margin-bottom: 0;
+  }
+
+  .has-warning {
+    .name,
+    .description {
+      color: $orange-700;
+    }
+  }
+
+  .cur {
+    .avatar {
+      @include disable-all-animation;
+      border: 1px solid $white-light;
+    }
+  }
+
+  ul > li {
+    @include clearfix;
+    white-space: nowrap;
+  }
+
+  // TODO: fallback to global style
+  .atwho-view-ul {
+    padding: 8px 1px;
+
+    li {
+      padding: 8px 16px;
+      border: 0;
+
+      &.cur {
+        background-color: $gray-darker;
+        color: $gl-text-color;
+
+        small {
+          color: inherit;
+        }
+
+        &.has-warning {
+          color: $orange-700;
+          background-color: $orange-100;
+        }
+      }
+
+      div.avatar {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+
+        .center {
+          line-height: 14px;
+        }
+      }
+
+      strong {
+        color: $gl-text-color;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-down(xs) {
+  .atwho-view-ul {
+    width: 350px;
+  }
+
+  .atwho-view ul li {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}

changelogs/unreleased/59708-vendor-css.yml

@@ -0,0 +1,5 @@
+---
+title: Creates a vendors folder for external CSS
+merge_request:
+author:
+type: other

package.json

@@ -17,7 +17,7 @@
     "prettier-staged-save": "node ./scripts/frontend/prettier.js save",
     "prettier-all": "node ./scripts/frontend/prettier.js check-all",
     "prettier-all-save": "node ./scripts/frontend/prettier.js save-all",
-    "stylelint": "node node_modules/stylelint/bin/stylelint.js app/assets/stylesheets/**/*.*  ee/app/assets/stylesheets/**/*.* --custom-formatter node_modules/stylelint-error-string-formatter",
+    "stylelint": "node node_modules/stylelint/bin/stylelint.js app/assets/stylesheets/**/*.*  ee/app/assets/stylesheets/**/*.* !**/vendors/** --custom-formatter node_modules/stylelint-error-string-formatter",
     "stylelint-file": "node node_modules/stylelint/bin/stylelint.js",
     "stylelint-create-utility-map": "node scripts/frontend/stylelint/stylelint-utility-map.js",
     "test": "yarn jest && yarn karma",