web: import `@reach/ui` global styles once

Created by: valerybugakov

Context

Importing the same set of global styles into different CSS modules results in styles duplication. SCSS loader cannot reuse @import statements between files because of the mutable nature of SCSS — order of evaluation matters, so every @import statement is evaluated independently.

Example

// DashboardMenu.module.scss
@import '~@reach/menu-button/styles.css';

// CardMenu.module.scss
@import '~@reach/menu-button/styles.css';

menu-button/styles.css will be included in the CSS bundle twice. The last occurrence will have a higher priority in applying CSS rules because of the order, which might cause bugs.

Such an issue was spotted in VersionContextDropdown styles. Some @reach styles were redefined in VersionContextDropdown.scss. Later the same @reach/ui styles were imported in the CSS module, which overwrote the changes in VersionContextDropdown.scss.

Solution

Import global third-party styles only in global styles entry points like:

1. client/branded/src/global-styles/index.scss
2. client/web/src/SourcegraphWebApp.scss

Screenshots

Before

After