Next.js: Additional style on reload, css prop, styled-components

[dmitweb]

Bug report

Describe the bug

When i change styles in css prop and reload page i get error "Warning: Prop className did not match.". In head style section i see two same styles (old and new). Problem only on client side.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Change styles in css prop
2. Refresh page (error in console on client)

Expected behavior

Console without error about className

Screenshots

On screenshot we can see 3 classes in style tag, but in code we have only 2.

System information

• OS: Windows
• Browser: Chrome
• Version of Next.js: 7.0.2

Additional context

I also updated packages to latest versions.
Git repo with bug: https://github.com/dmitweb/with-styled-components-app-bug

[ztanner]

The babel plugin configuration in .babelrc is missing the { "ssr": true } setting. I've created a PR to fix this in the example. Read more here: https://www.styled-components.com/docs/tooling#serverside-rendering

[dmitweb]

@ztanner @timneutkens issue still didn't solved. I have already tried this before submit issue. Please check again. Error still exists.
Steps to reproduce the behavior:

1. Add css={'padding: 20px;'} to <Title>
2. Refresh page
3. Change padding: 20px; to padding: 10px; (hot reload)
4. Refresh page and see error

[ztanner]

Sorry, you're right - I misread the docs, as SSR is actually enabled by default. I'll keep looking at this.

[dmitweb]

Hey @timneutkens, can you please reopen issue, maybe somebody will help with error

[kusold]

Having the same issue. Would this apply to NextJS?

Note
⚠️ The plugin call order in your .babelrc file matters. If you're using the env property in your babel configuration, then putting this plugin into the plugins array won't suffice. Instead it needs to be put into each env's plugins array to maintain it being executed first. See this for more information.

https://www.styled-components.com/docs/tooling#babel-plugin

[dmitweb]

@kusold it dosn't help, u can use emotion as workaround, same func without issue