Everything after the html rule is being rendered by createGlobalStyles. I believe they should be rendered in the style tag first, before all component styles. Loading it last, would cause its rules to overwrite component rules (see highlighted .cooVxd rules).

If we follow ITCSS rules (which is a pretty good rule) global rules should be overwritten by component rules.

This is during development and not production. However I believe there is still a chance of name clashing and causing hard-to-debug use cases.

Environment

System:

• OS: macOS High Sierra 10.13.6
• CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
• Memory: 74.02 MB / 16.00 GB
• Shell: 3.2.57 - /bin/bash

Binaries:

• Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
• Yarn: 1.17.3 - /usr/local/bin/yarn
• npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm

npmPackages:

• babel-plugin-styled-components: ^1.10.7 => 1.10.7
• styled-components: ^5.1.0 => 5.1.0

Expected Behavior (beautified & trimmed)

/* createGlobalStyle */
html {
  background-color: gray;
}
.cooVxd {
  padding-left: 50px;
}
body {
  background-color: yellow;
}

/* Component styles */
.cooVxd {
  padding-left: 15px;
  padding-right: var(--test);
  /* Trimmed */
}
.fDNorw {
  padding-left: 15px;
  /* Trimmed */
}

Actual Behavior (beautified & trimmed)

Component styles loads before Global styles.

/* Component styles */
.cooVxd {
  padding-left: 15px;
  padding-right: var(--test);
  /* Trimmed */
}
.fDNorw {
  padding-left: 15px;
  /* Trimmed */
}

/* createGlobalStyle */
html {
  background-color: gray;
}
.cooVxd {
  padding-left: 50px;
}
body {
  background-color: yellow;
}