Skip to content
Snippets Groups Projects

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

Closed Warren Gifford requested to merge vb/fix-reach-ui-styles-duplication into main

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

Screenshot 2021-08-17 at 10 25 25

After

Screenshot 2021-08-17 at 10 25 52

Merge request reports

Loading
Loading

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
Please register or sign in to reply
Loading