styled-components: Components returned from functions are broken in production

Summary

I have a function that takes CSS input and returns a button component. Please see the listing at https://github.com/dminkovsky/next-styled-broken-prod/blob/master/pages/index.js. In devlopment, the component works. In production, the component only produces one result.

I have reproduced this in Next.JS default production build settings. Not sure if it affects other “production” configurations.

System:

• OS: macOS Mojave 10.14.6
• CPU: (4) x64 Intel® Core™ i7-5557U CPU @ 3.10GHz
• Memory: 2.48 GB / 16.00 GB
• Shell: 4.4.23 - /usr/local/bin/bash

Binaries:

• Node: 13.4.0 - /usr/local/bin/node
• Yarn: 1.21.1 - /usr/local/bin/yarn
• npm: 6.13.4 - /usr/local/bin/npm

npmPackages:

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

Reproduction

Clone https://github.com/dminkovsky/next-styled-broken-prod and install dependencies.

Steps to reproduce

1. yarn run dev and go to localhost:3000, observe dev result:

1. yarn run build && yarn run start and go to localhost:3000, observe prod result:

Expected Behavior

Dev and prod builds should be the same.

Actual Behavior

Dev and prod builds are different.