Skip to content

Getting rid of granular imports and bootstrap/bootstrap-vue deps

Denys Mishunov requested to merge dmishunov-gitlab-ui-to-rule-it-all into master

This is a follow up of the conversation initiated in !51 (merged).

For the historical reasons, I'm copy/pasting the original comment here:

So, what are your concerns, Denys?

There are 2 major things I would like to discuss.

1. Importing gitlab-ui in general

In the SCSS, why not to do exactly the same we do in GitLab? Namely, do a single import:

@import '@gitlab/ui/src/scss/gitlab_ui';

Pros:

It will pull in everything contained in gitlab_ui.scss, gitlab_ui_variables.scss PLUS bootstrap and bootstrap-vue that are explicitly imported in global.scss. This will allow us to get rid of two files that do nothing except pulling in gitlab-ui modules and simplify the global.scss.

Cons:

The resulting bundle size will be a tad bigger (53.64KB gzipped for the whole CSS bundle vs. 22.16KB). However, here we're talking about 0 seconds delay in serving the bundle on anything faster than 256kbit/s connection. And on the slower connections, the download speed will be affected by 10ms at max that is not noticeable by any human being according to psychological research.

2. Explicitely installing bootstrap and bootstrap-vue

When we have gitlab-ui as a dependency, both packages are pulled in as the dependencies for gitlab-ui package anyway. But explicitly installing and pinning these to some versions we create a precedent that might result in unpredictable results in the UI when a gitlab-ui component, relying on a certain version of bootstrap (presumably older one) looks totally odd/broken because we introduced the newer version of bootstrap as a dependency. We, technically, override dependencies of gitlab-ui without any warranty that the components won't be broken.

🤔 do you think we can really remove those?

Yes, I suppose we can easily remove those dependencies from package.json and let gitlab-ui rule it all.

What's in this MR?

This MR suggests:

  1. Getting rid of the following dependencies:
  • bootstrap
  • bootstrap-vue

and instead, rely on the packages that are pulled in with @gitlab-ui dependency to avoid out-of-sync versions of the same packages.

  1. Getting rid of the granular SCSS imports from gitlab-ui, bootstrap and bootstrap-vue in favor of one single import + importing the utility classes, as suggested by @ohoral:
@import '@gitlab/ui/src/scss/gitlab_ui';
@import '@gitlab/ui/src/scss/utilities';

to follow the pattern from GitLab.

Bundle size concern.

Here are the screenshots of the resulting bundle size comparison:

Before After
Screenshot_2020-03-31_at_10.03.19 Screenshot_2020-03-31_at_11.19.12

The difference in 31.48KB equals to nearly zero download time increase even on a slow 3G connection.

Edited by Denys Mishunov

Merge request reports