Nx: Next.js: Broken styles when using styled-components

[zynchro]

Prerequisites

• [x] [...prerequisites]
• [x] Scoured StackOverflow

Expected vs Current Behavior

Simply put;
SASS = styling works beautifully.
styled-components = styling broken on initial page load, but applies on HMR.

Failure Information

Steps to Reproduce

1. Install via npx create-nx-workspace@latest sass --preset=next
   Selecting SASS for styling
   
   (note: styled-components unavailable here)

2. Remove the scss default
   

3. Add another app, selecting styled-components
   

4. Serve and check the apps

| nx serve styled-components | nx serve sass |
| - | - |
| | |

Context

• nx report

  @nrwl/angular : Not Found
  @nrwl/cli : 8.7.0
  @nrwl/cypress : 8.7.0
  @nrwl/eslint-plugin-nx : 8.7.0
  @nrwl/express : Not Found
  @nrwl/jest : 8.7.0
  @nrwl/linter : 8.7.0
  @nrwl/nest : Not Found
  @nrwl/next : 8.7.0
  @nrwl/node : Not Found
  @nrwl/react : 8.7.0
  @nrwl/schematics : Not Found
  @nrwl/tao : 8.7.0
  @nrwl/web : 8.7.0
  @nrwl/workspace : 8.7.0
  typescript : 3.4.5

• environment

node: v12.12.0
npm: 6.11.3

• 3rd-party libraries: none

• use case that failed: check above reproduction steps ☝️

• repro: https://github.com/zynchro/nx-issue-repro-styled-components

Failure Logs

[enjdusan]

I have the exact same problem. Styles from styled components are missing after initial load, but they are applied after HMR.

[david0723]

Same issue here

[david0723]

I found a solution here https://spectrum.chat/next-js/general/quick-question-about-styled-components-ssr~7fb88ab0-037d-49e4-acac-ad52ef347de8

[enjdusan]

My issue was that server and client had a different classNames. I found a solution here:
https://github.com/zeit/next.js/issues/7423

[jaysoo]

It's possible if you override the document class and provide the babel plugins.

See example here: https://github.com/jaysoo/react-ssr-example/tree/master/apps/next-app

Going to close this issue since there is a solution, but we might look at enhancing the generated code when styled-components is chosen. Cheers!

[zenVentzi]

Am I supposed to see styled-components as an option because I don't? In this case, is it okay to add ti manually myself? I'm new to nx, how is that going to affect working with the nx commands?