Scope all of our CSS in the browser extension

Created by: felixfbecker

We currently import CSS in the browser extension from shared/ that gets added to the global CSS, on Firefox even on all pages. Some of this CSS has high chance to conflict, like .toggle, and breaks other sites (e.g. #8489 (closed), #5889 (closed)).

We experimented with solutions like shadow DOM in the past (#2358 (closed)), but they don't work well with React and some libraries.

SCSS supports @import within a selector, which scopes all imported selectors to that selector. We can use this to scope all imports to a common base class we assign to all our mount points:

.sourcegraph-element {
  @import '../../shared/src/Toggle.scss';
  @import 'bootstrap';
  // ...
}

Action items:

• Assign a defined CSS class to all mount points
• Change all imports and definitions in the browser extension content script styles to be nested under that class