Environment

System:

• OS: macOS 10.14.5
• CPU: (12) x64 Intel® Core™ i7-8850H CPU @ 2.60GHz
• Memory: 489.05 MB / 16.00 GB
• Shell: 3.2.57 - /bin/bash

Binaries:

• Node: 10.15.1
• Yarn: 1.16.0
• npm: 6.9.0

npmPackages:

• styled-components: ^5.0.0-beta.8 => 5.0.0-beta.8

Reproduction

I have 2 global styles, however on production only the second one loads. (The class names appear fo the first, but no styles are applied.)

import { createGlobalStyle } from 'styled-components/macro';

const GlobalStyling = createGlobalStyle`
html {
  height: 100%;
}

:global(#root) {
  min-height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;

  max-width: 100vw;
}

button {
  cursor: pointer;
}

main, section {
  display: block;
}

hr {
    margin: 48px 0;
    border-bottom: 1px solid gray;
    border-top: none;
    border-left: none;
    border-right: none;
  }

*:focus {
  outline: 1px solid blue;
}
}`

const GlobalFontStyling = createGlobalStyle`...`;

ReactDOM.render(
  <div>
    <GlobalStyling />
    <GlobalFontStyling />
    <ErrorBoundary>...
   </ErrorBoundary
  </div>,
  document.getElementById('root')
);

Expected Behavior

Styles from both global styles will appear

Actual Behavior

Only styles from GlobalFontStyling appear.