ci: fix visual_gitlab_integration job

Intro

One of important challenges with gitlab-ui is making sure that our new and shiny components play well with old and not-so-fancy existing gitlab CSS. It is important for us to know, that we're defining our styles precise enough to override any known or unknown "bootstrap-around" legacy styles. This challenge was brilliantly solved by visual_gitlab_integration job which tests, that screenshot of our components remains intact even when gitlab CSS is included.

GitLab consumes gitlab-ui styles as SCSS @import. This allows us (for example) to customize color palette and right now we're using this - with a11y work being in progress our gitlab-ui and gitlab palette is out-of-sync - while gitlab-ui is trying to use new proper palette, main application obviously needs some time to pickup this changes

Chicken and egg paradox

Original approach was to include CSS from main repository along with existing gitlab-ui styles. But our main repository styles also embed gitlab-ui, which means that we actually apply gitlab-ui styles twice: once from gitlab-ui repository and once from main repository. This leads to multiple hard-to-track inconsistencies which we were struggling to solve in !1277 (merged) !1280 (merged) !1282 (closed) (praise to @mrincon and @pgascouvaillancourt for all these efforts)

Additionally, color palette change makes this solution very problematic, since now colors in main repository and this one differ, results in so many failed tests

Suggested solution

A general idea is that we want to field-test our components with environment, similar to real gitlab project as much as possible. So basically what we want to do is as simple is:

• build new GitLab css with fresh copy of gitlab-ui
• test our components with newly built CSS only

As always, there are some nuances. In the build step we need to "restore" original gitlab-ui palette, or our "gitlab-ish" storyshots will not match "pure" one due to colors change. Our GitLab CSS is built with Ruby, and embedding Ruby-flavored step into the pipeline seems to add a significant complexity to entire flow. So, suggested approach is:

1. Pull GitLab and build new CSS

Luckily, gitlab is using ruby-sassc which is just a binding to libsass. We are utilizing node-sass which is just the binding around the same library. Additionally it provides nice hooks allowing us:

• provide "stubs" to missing third-party library CSS
• to "hijack" import of @gitlab/ui SCSS file redirecting it to the current folder
• process importing of framework/variables and restore original gitlab-ui colors
• Provide missing functions (for example image-url which is part of Rails assets pipeline)

2. Make sure that our gitlab_visual_integration job includes only built CSS

style-loader provides nice insert: function, which we turn just to no-op when we're running gitlab_visual_integration

Limitations

This solution rely on following things to work:

• third-party CSS except bootstrap should not affect our gitlab-ui components (ATM it is dropzone, select2 and font-awesome (I don't want to do full npm install in main gitlab repo, since it will take significant time to complete)
• only framework/variables file in main repo should redefine variables
• we're replacing all image assets, invoked with image-url with empty 1x1 PNG