Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Next adds unnecessary CSS when using css-in-js solutions in dev mode

See original GitHub issue

Bug report

Describe the bug

When using something like styled-components, next now adds

<style data-next-hide-fouc="true">body{display:none}</style>

to the head

To Reproduce

View the source code of sites generated by the styled-components example.

Expected behavior

Don’t add any css when not required

Additional context

Has been added with 9.2.0’s new css feature, only happens in dev mode. The location of the buggy code: https://github.com/zeit/next.js/blob/2fe743581471279497b53ed692ff77c01be73e93/packages/next/pages/_document.tsx#L397-L419

Issue Analytics

State:
Created 4 years ago
Comments:21 (4 by maintainers)

Top GitHub Comments

31reactions

ckomop0xcommented, Mar 18, 2020

Hi @Timer.

We have a lot of white screens in dev because of this “feature” … Thanks to: <style data-next-hide-fouc="true">body{display:none}</style>

If you make some features that brake the flow with such painful behaviour, maybe you can also add a flag to have the possibility to switch it off?

10reactions

krisu-plcommented, Mar 27, 2020

We’ve disabled client side JS so the page loads faster, but now it stays blank in dev mode. Is there a way to disable this?

Top Results From Across the Web

Why We're Breaking Up with CSS-in-JS

So it recalculates the style rules. Then React renders the next component, and then that component discovers a new rule and it happens...

andreipfeiffer/css-in-js: A thorough analysis of all the ...

A thorough analysis of all the current CSS-in-JS solutions with SSR & TypeScript support ... We're using Next.js as a SSR framework for...

Basic Features: Built-in CSS Support

Next.js supports including CSS files as Global CSS or CSS Modules, using `styled-jsx` for CSS-in-JS, or any other CSS-in-JS solution! Learn more here....

The best styling options for Next.js

Built by Vercel, the founder of Next.js, Styled-JSX allows developers to write CSS in their JavaScript code. There is no setup necessary, and...

Comparing Styling Methods In Next.js

With Next.js, one of the things you need to know is how to integrate different CSS ... Changes to the index page after...