From 03d173588999aeac2a77cfaef6a9a47353454e8a Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Tue, 9 Apr 2019 08:21:42 +0000
Subject: [PATCH] Adds a vendors folder for third party CSS

Does not run stylelint for the vendors folder
---
 app/assets/stylesheets/application.scss       |  3 +
 .../stylesheets/framework/markdown_area.scss  | 91 ------------------
 app/assets/stylesheets/vendors/atwho.scss     | 92 +++++++++++++++++++
 changelogs/unreleased/59708-vendor-css.yml    |  5 +
 package.json                                  |  2 +-
 5 files changed, 101 insertions(+), 92 deletions(-)
 create mode 100644 app/assets/stylesheets/vendors/atwho.scss
 create mode 100644 changelogs/unreleased/59708-vendor-css.yml

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 8aaa9772715..a2f518cd24e 100644
--- a/app/assets/stylesheets/application.scss
+++ b/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";
 
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 7c10de828cd..bfd96a4bc05 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/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;
   }
diff --git a/app/assets/stylesheets/vendors/atwho.scss b/app/assets/stylesheets/vendors/atwho.scss
new file mode 100644
index 00000000000..ccf3824ea56
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/changelogs/unreleased/59708-vendor-css.yml b/changelogs/unreleased/59708-vendor-css.yml
new file mode 100644
index 00000000000..ec7def7a9e6
--- /dev/null
+++ b/changelogs/unreleased/59708-vendor-css.yml
@@ -0,0 +1,5 @@
+---
+title: Creates a vendors folder for external CSS
+merge_request:
+author:
+type: other
diff --git a/package.json b/package.json
index 0b729caa78a..115f6fd1e8d 100644
--- a/package.json
+++ b/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",