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

Created on 27 Jan 2020 · 13Comments · Source: vercel/next.js

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

Source

explodingcamera

Most helpful comment

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?

ckomop0x on 18 Mar 2020

👍20 😕1

All 13 comments

This is expected, as Next.js cannot know if you are using the CSS behavior or not. There's no bug to be fixed here, but if you think it can be improved, we welcome a PR.

Timer on 27 Jan 2020

Thank you for the quick response. I feel like it's a bug if it breaks existing behavior from multiple next.js examples in a minor release, I'll try to formulate a PR how this can be improved.

explodingcamera on 27 Jan 2020

Can you please explain the breaking behavior? If anything is breaking we're happy to fix it, but this is development only with no change in application behavior.

Timer on 27 Jan 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?

ckomop0x on 18 Mar 2020

👍20 😕1

Should I open a new issue/proposal?

ckomop0x on 18 Mar 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?

krisu-pl on 27 Mar 2020

👍6 👀1 😕1

@krisu-pl I had to customize the <Head> and <Main> components in _document.js, here's how I did it: https://webcloud.se/blog/2020-03-12-nextjs-without-client-side-react/#part-2-killing-the-elephant

danielstocks on 8 Apr 2020

👍1

@Timer if this is expected behavior, how can we disable

without amending _documents.js?

HugoDelatte on 14 Apr 2020

👍3

I'm also running into this. We're using Next with Puppeteer's PDF functionality... but in dev mode it's always generating blank PDFs due to that bit of CSS.

Ugly workaround for now: adding <style>body { display: block !important }</style> to the _document.tsx so it overrides it...

lcvbeek on 6 May 2020

👍3

@lcvbeek, @HugoDelatte I've solved this with this option inside next.config.js. As I remember it was the advice from @framini.

const config = {
  ...
  experimental: {
    ...
    css: false,
  },
  ...

ckomop0x on 6 May 2020

👍1

Thanks @ckomop0x, good to know that's an option. For now I did want to start using the new global CSS support, so I'll leave my workaround in place for now.

lcvbeek on 6 May 2020

It's a shame, the FOUC hiding trick makes it impossible to check out the pre-JS "uncanny valley" of one's app in dev-mode.

klarstrup on 17 May 2020

In https://github.com/explodingcamera/next-plugin-styled-components I've just resorted to add the css to override this through global styles in styled-components (to not require a custom _document).

explodingcamera on 26 May 2020

Was this page helpful?

0 / 5 - 0 ratings