Integrate csslab

app/assets/stylesheets/bootstrap_migration.scss

@@ -18,8 +18,10 @@ $input-border: $border-color;
 $padding-base-vertical: $gl-vert-padding;
 $padding-base-horizontal: $gl-padding;
 
-html {
-  // Override default font size used in bs4
+body,
+.form-control,
+.search form {
+  // Override default font size used in non-csslab UI
   font-size: 14px;
 }
 

app/assets/stylesheets/csslab.scss

+@import "../../../node_modules/@gitlab/csslab/dist/css/csslab-slim";

app/assets/stylesheets/framework/files.scss

@@ -24,7 +24,7 @@
     }
   }
 
-  table {
+  &:not(.use-csslab) table {
     @extend .table;
   }
 

app/assets/stylesheets/framework/markdown_area.scss

@@ -131,7 +131,7 @@
   width: 100%;
 }
 
-.md {
+.md:not(.use-csslab) {
   &.md-preview-holder {
     // Reset ul style types since we're nested inside a ul already
     @include bulleted-list;

app/assets/stylesheets/framework/typography.scss

@@ -368,11 +368,11 @@ code {
  * Apply Markdown typography
  *
  */
-.wiki {
+.wiki:not(.use-csslab) {
   @include md-typography;
 }
 
-.md {
+.md:not(.use-csslab) {
   @include md-typography;
 }
 

app/assets/stylesheets/pages/wiki.scss

@@ -180,7 +180,7 @@ ul.wiki-pages-list.content-list {
   }
 }
 
-.wiki {
+.wiki:not(.use-csslab) {
   table {
     @include markdown-table;
   }

app/views/layouts/_head.html.haml

@@ -36,6 +36,7 @@
   = stylesheet_link_tag "print",       media: "print"
   = stylesheet_link_tag "test",        media: "all" if Rails.env.test?
   = stylesheet_link_tag 'performance_bar' if performance_bar_enabled?
+  = stylesheet_link_tag 'csslab' if Feature.enabled?(:csslab)
 
   = Gon::Base.render_data
 

app/views/projects/blob/_blob.html.haml

@@ -9,6 +9,6 @@
   = render "projects/blob/auxiliary_viewer", blob: blob
 
 #blob-content-holder.blob-content-holder
-  %article.file-holder
+  %article.file-holder{ class: ('use-csslab' if Feature.enabled?(:csslab)) }
     = render 'projects/blob/header', blob: blob
     = render 'projects/blob/content', blob: blob

app/views/projects/blob/preview.html.haml

 .diff-file.file-holder
   .diff-content
     - if markup?(@blob.name)
-      .file-content.wiki
+      .file-content.wiki.md{ class: ('use-csslab' if Feature.enabled?(:csslab)) }
         = markup(@blob.name, @content, legacy_render_context(params))
     - else
       .file-content.code.js-syntax-highlight

app/views/projects/blob/viewers/_markup.html.haml

@@ -2,5 +2,5 @@
 - context = legacy_render_context(params)
 - unless context[:markdown_engine] == :redcarpet
   - context[:rendered] = blob.rendered_markup if blob.respond_to?(:rendered_markup)
-.file-content.wiki
+.file-content.wiki.md{ class: ('use-csslab' if Feature.enabled?(:csslab)) }
   = markup(blob.name, blob.data, context)

app/views/projects/snippets/show.html.haml

@@ -6,7 +6,7 @@
 = render 'shared/snippets/header'
 
 .project-snippets
-  %article.file-holder.snippet-file-content
+  %article.file-holder.snippet-file-content{ class: ('use-csslab' if Feature.enabled?(:csslab)) }
     = render 'shared/snippets/blob'
 
   .row-content-block.top-block.content-component-block

app/views/projects/wikis/show.html.haml

@@ -26,7 +26,7 @@
     = (s_("WikiHistoricalPage|You can view the %{most_recent_link} or browse the %{history_link}.") % { most_recent_link: most_recent_link, history_link: history_link }).html_safe
 
 .prepend-top-default.append-bottom-default
-  .wiki
+  .wiki.md{ class: ('use-csslab' if Feature.enabled?(:csslab)) }
     = render_wiki_content(@page, legacy_render_context(params))
 
 = render 'sidebar'

config/application.rb

@@ -154,6 +154,7 @@ module Gitlab
     config.assets.precompile << "locale/**/app.js"
     config.assets.precompile << "emoji_sprites.css"
     config.assets.precompile << "errors.css"
+    config.assets.precompile << "csslab.css"
 
     # Import gitlab-svgs directly from vendored directory
     config.assets.paths << "#{config.root}/node_modules/@gitlab/svgs/dist"

package.json

@@ -25,6 +25,7 @@
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/plugin-syntax-import-meta": "^7.0.0",
     "@babel/preset-env": "^7.1.0",
+    "@gitlab/csslab": "^1.8.0",
     "@gitlab/svgs": "^1.40.0",
     "@gitlab/ui": "^1.14.0",
     "apollo-boost": "^0.1.20",

spec/features/projects/files/user_browses_files_spec.rb

@@ -11,6 +11,7 @@ describe "User browses files" do
   let(:user) { project.owner }
 
   before do
+    stub_feature_flags(csslab: false)
     sign_in(user)
   end
 

yarn.lock

@@ -616,6 +616,13 @@
     lodash "^4.17.10"
     to-fast-properties "^2.0.0"
 
+"@gitlab/csslab@^1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/csslab/-/csslab-1.8.0.tgz#54a2457fdc80f006665f0e578a5532780954ccfa"
+  integrity sha512-RZylRElufH1kwsBQlIDaVcrcXMyD5IEGrU6ABUd8W3LG8/F9jJ4Y3Ys7EPTpK/qFJyx86AutTtFGRxRNlMx85w==
+  dependencies:
+    bootstrap "4.1.3"
+
 "@gitlab/eslint-config@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@gitlab/eslint-config/-/eslint-config-1.2.0.tgz#115568a70edabbc024f1bc13ba1ba499a9ba05a9"