Bundle GitLab UI CSS with Rollup

6 files changed, 24 insertions, 30 deletions

diff --git a/commands/frontend.rb b/commands/frontend.rb
index 551602fb..d8e662fd 100644
--- a/commands/frontend.rb
+++ b/commands/frontend.rb
@@ -38,12 +38,11 @@ run do |opts, args, cmd|
     puts 'Failed to create icons.svg!'
   end
 
-  puts 'Copying GitLab UI CSS...'
+  puts 'Copying GitLab UI CSS sourcemaps...'
   gl_ui_src = 'node_modules/@gitlab/ui/dist'
-  gl_ui_dest = 'public/assets/stylesheets/gitlab-ui'
-  Dir.mkdir gl_ui_dest
+  gl_ui_dest = 'public/frontend/shared'
 
   Dir.children(gl_ui_src).each do |filename|
-    puts "Copied #{gl_ui_src}/#{filename}" if filename.include?("css") && File.write("#{gl_ui_dest}/#{filename}", File.read("#{root}/#{gl_ui_src}/#{filename}"))
+    puts "Copied #{gl_ui_src}/#{filename}" if filename.include?("map") && File.write("#{gl_ui_dest}/#{filename}", File.read("#{root}/#{gl_ui_src}/#{filename}"))
   end
 end
diff --git a/content/frontend/shared/global_imports.js b/content/frontend/shared/global_imports.js
index e1f4e9aa..968cf2c2 100644
--- a/content/frontend/shared/global_imports.js
+++ b/content/frontend/shared/global_imports.js
@@ -1,4 +1,7 @@
 import jquery from 'jquery';
 import 'bootstrap';
 
+import '@gitlab/ui/dist/index.css';
+import '@gitlab/ui/dist/utility_classes.css';
+
 window.$ = jquery;
diff --git a/layouts/head.html b/layouts/head.html
index 9a0d1fdf..faaf345c 100644
--- a/layouts/head.html
+++ b/layouts/head.html
@@ -29,8 +29,7 @@
 <% end %>
 <!-- End of CSP headers -->
 
-<link rel="stylesheet" href="/assets/stylesheets/gitlab-ui/index.css">
-<link rel="stylesheet" href="/assets/stylesheets/gitlab-ui/utility_classes.css">
+<link rel="stylesheet" href="/frontend/shared/global_imports.css">
 <link rel="stylesheet" href="/frontend/search/docsearch.css">
 <link rel="stylesheet" href="<%= @items['/assets/stylesheets/stylesheet.*'].path %>">
 <link rel="stylesheet" href="<%= @items['/assets/stylesheets/highlight.*'].path %>">
diff --git a/package.json b/package.json
index 56405a20..0063c06c 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,6 @@
     "prettier": "^2.6.2",
     "rollup": "^2.75.6",
     "rollup-plugin-import-resolver": "^1.2.1",
-    "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-vue": "^5.1.9",
     "stylelint": "^14.9.1",
     "vue-template-compiler": "^2.6.14"
@@ -45,6 +44,7 @@
     "@gitlab/svgs": "^2.18.0",
     "@gitlab/ui": "^41.5.0",
     "@popperjs/core": "^2.11.5",
+    "@rollup/plugin-image": "^2.1.1",
     "algoliasearch": "4.13.1",
     "bootstrap": "^4.6.1",
     "compare-versions": "^4.1.3",
diff --git a/rollup.config.js b/rollup.config.js
index fa0a7112..8836b1e2 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -7,7 +7,7 @@ const commonjs = require('@rollup/plugin-commonjs');
 const { babel } = require('@rollup/plugin-babel');
 const importResolver = require('rollup-plugin-import-resolver');
 const css = require('rollup-plugin-import-css');
-const svg = require('rollup-plugin-svg');
+const image = require('@rollup/plugin-image');
 const vue = require('rollup-plugin-vue');
 
 function mapDirectory(file) {
@@ -27,7 +27,7 @@ module.exports = glob.sync('content/frontend/**/*.js').map((file) => ({
       requireReturnsDefault: 'preferred',
     }),
     vue(),
-    svg(),
+    image(),
     inject({
       exclude: 'node_modules/**',
     }),
diff --git a/yarn.lock b/yarn.lock
index fbe3addf..350a0822 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1471,6 +1471,14 @@
     magic-string "^0.25.7"
     resolve "^1.17.0"
 
+"@rollup/plugin-image@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-image/-/plugin-image-2.1.1.tgz#898d6b59ac0025d7971ef45640ab330cb0663b0c"
+  integrity sha512-AgP4U85zuQJdUopLUCM+hTf45RepgXeTb8EJsleExVy99dIoYpt3ZlDYJdKmAc2KLkNntCDg6BPJvgJU3uGF+g==
+  dependencies:
+    "@rollup/pluginutils" "^3.1.0"
+    mini-svg-data-uri "^1.2.3"
+
 "@rollup/plugin-inject@^4.0.4":
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-inject/-/plugin-inject-4.0.4.tgz#fbeee66e9a700782c4f65c8b0edbafe58678fbc2"
@@ -3091,11 +3099,6 @@ estraverse@^5.1.0, estraverse@^5.2.0:
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
   integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
 
-estree-walker@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.2.1.tgz#bdafe8095383d8414d5dc2ecf4c9173b6db9412e"
-  integrity sha1-va/oCVOD2EFNXcLs9MkXO225QS4=
-
 estree-walker@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
@@ -4750,7 +4753,12 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
-minimatch@^3.0.2, minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
+mini-svg-data-uri@^1.2.3:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939"
+  integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==
+
+minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
@@ -5603,13 +5611,6 @@ rollup-plugin-import-resolver@^1.2.1:
   resolved "https://registry.yarnpkg.com/rollup-plugin-import-resolver/-/rollup-plugin-import-resolver-1.2.1.tgz#164c9f7c8a721cacbfea32a664b69f2e60d843b2"
   integrity sha512-os0KQ0rvlnUYvuUxWShM+NdBJX/4ujtF2uLl/lUki7JDMKCcsS6BArY5OPqS846QeceIQ59ycfk7tIXdoZ9t2w==
 
-rollup-plugin-svg@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-svg/-/rollup-plugin-svg-2.0.0.tgz#ce11b55e915d5b2190328c4e6632bd6b4fe12ee9"
-  integrity sha512-DmE7dSQHo1SC5L2uH2qul3Mjyd5oV6U1aVVkyvTLX/mUsRink7f1b1zaIm+32GEBA6EHu8H/JJi3DdWqM53ySQ==
-  dependencies:
-    rollup-pluginutils "^1.3.1"
-
 rollup-plugin-vue@^5.1.9:
   version "5.1.9"
   resolved "https://registry.yarnpkg.com/rollup-plugin-vue/-/rollup-plugin-vue-5.1.9.tgz#8769cfdac5531c2d1970222b7887b883db37b866"
@@ -5625,14 +5626,6 @@ rollup-plugin-vue@^5.1.9:
     source-map "0.7.3"
     vue-runtime-helpers "^1.1.2"
 
-rollup-pluginutils@^1.3.1:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz#1e156e778f94b7255bfa1b3d0178be8f5c552408"
-  integrity sha1-HhVud4+UtyVb+hs9AXi+j1xVJAg=
-  dependencies:
-    estree-walker "^0.2.1"
-    minimatch "^3.0.2"
-
 rollup-pluginutils@^2.8.2:
   version "2.8.2"
   resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"