Scope @sourcegraph/code-host-integration styles to prevent conflict with native stylesheet

Created by: souldzin

Description

The npm package used for integrations like in GitLab includes a css/style.bundle.css. This stylesheet is automatically injected into the HTML by the Sourcegraph integration.bundle.js.

It looks like all the selectors in the Sourcegraph stylesheet are globally scoped and include some pretty generic names like .file-header. It's just a matter of time before a code host's stylesheet and this one clash.

What's the worst case?

If the styles conflict, the Sourcegraph styles will take precedence which could break the code host's UI.

Proposal

Maybe we can scope these integration styles under a specific element? Something like:

diff --git a/client/browser/src/app.scss b/client/browser/src/app.scss
index a466d5f8d0..68f5dd5142 100644
--- a/client/browser/src/app.scss
+++ b/client/browser/src/app.scss
@@ -1,3 +1,4 @@
+.sourcegraph-container {
 @import '../../branded/src/global-styles/colors';
 
 // Bootstrap configuration before Bootstrap is imported
@@ -59,3 +60,4 @@ $theme-colors-light: (
 @import './shared/code-hosts/shared/HoverOverlay.scss';
 @import './shared/code-hosts/shared/ViewOnSourcegraphButton';
 @import './shared/code-hosts/shared/nativeTooltips';
+}