styles flickering in dev with tailwind + css modules #12448

tafelito · 2020-05-03T18:07:14Z

Bug report

Describe the bug

I'm using tailwindcss with css modules and I notice that the first time the page loads, all my styles are not loaded. Trying to figure it put what was happening, I run the tailwindcss example and added a style from a css module and it happens there too, even when built for prod.

To Reproduce

Run the example from https://github.com/zeit/next.js/tree/canary/examples/with-tailwindcss

Add a index.module.css file with some style

add the styles form the css module in the index.js page

Expected behavior

Without the use of the css modules, all styles are loaded fine the first time, without flickering. Same behavior is expected using css modules

Screenshots

System information

OS: macOS
Browser (if applies) [e.g. chrome, safari]
Version of Next.js: v9.3.6
Version of Node.js: v13.12.0
Version of tailwindcss: v1.4.4

The text was updated successfully, but these errors were encountered:

Pytal · 2020-05-07T12:24:12Z

I suspect this may have something to do with the automatic code splitting of css modules 🤔

mzygmunt · 2020-05-08T10:12:31Z

Probably related to #10268

dani97 · 2020-05-27T14:40:04Z

I have used plain css modules for components and styles apply after some ms.

Adrianjs42 · 2020-05-27T14:46:35Z

I have used plain css modules for components and styles apply after some ms.

According to https://stackoverflow.com/a/42969608/943337 i just added an empty script tag and my problem of a sidebar which was popping up at first load, is now solved.

vercel/next-plugins#455 (comment)

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { GA_TRACKING_ID } from '../utils/anayltics';
class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html lang="de">
        <Head>
        </Head>
        <body>
          <Main />
          <NextScript />
          {/* Empty script tag as chrome bug fix, see https://stackoverflow.com/a/42969608/943337 */}
          <script> </script>
        </body>
      </Html>
    );
  }
}

export default MyDocument;

dani97 · 2020-05-28T05:08:43Z

I have used plain css modules for components and styles apply after some ms.

According to https://stackoverflow.com/a/42969608/943337 i just added an empty script tag and my problem of a sidebar which was popping up at first load, is now solved.

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { GA_TRACKING_ID } from '../utils/anayltics';
class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html lang="de">
        <Head>
        </Head>
        <body>
          <Main />
          <NextScript />
          {/* Empty script tag as chrome bug fix, see https://stackoverflow.com/a/42969608/943337 */}
          <script> </script>
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Thanks @Adrianjs42 the side bar popping in stopped in chrome.

webdeb · 2020-05-31T11:55:53Z

Also related
#13058

fadonascimento · 2020-06-03T16:17:57Z

There is a workaround to resolve this problem
Create a custom "_document.js" and add the class "no-fouc" in the Html component
Create a custom "_app.js" and add the following code in the "componentDidMount"

const removeFouc = (foucElement) => {
      foucElement.className = foucElement.className.replace('no-fouc', 'fouc')
    }
 removeFouc(document.documentElement)

Add add this styles in the global styles:

.no-fouc {
  visibility: hidden;
 opacity: 0;
}

.fouc {
 visibility: visible;
 opacity: 1;
}

We previously used to remove our FOUC helper inside of the style injection to ensure content was shown as fast as possible. This behavior, however, was problematic for a few reasons: 1. Large JavaScript chunks would take longer than an animation frame to parse, causing FOUC 1. Rendering would sometimes complete before an animation frame, causing improper effects To fix the latter, we started removing the no FOUC helper **before** rendering, however, we never fixed the former by removing the dead code. There's not a great way to test this because the FOUC is so fast and flaky, however, this code really shouldn't exist and isn't likely to be re-added (regress). Also, we already have FOUC tests that occasionally flake, probably due to this. Fixes #12448 Fixes #13058 Fixes #11195 Fixes #10404

Timer · 2020-06-22T14:14:45Z

This should be fixed in next@^9.4.5-canary.15! Please upgrade and let us know.

Prottoy2938 · 2020-06-24T05:29:49Z

@Timer , I have installed next@^9.4.5-canary.18. Now the CSS flickering doesn't appear in the development mode, but it stays the same on the production version. The production version still has the bug.

Note that I'm using material-ui + css modules

Heres a version of the app that I've been working on facing this issue: https://cluster-11-lwj6nmcgy.vercel.app/ .

casperle · 2020-07-06T11:33:10Z

@Prottoy2938 Same here. I made a comment to this issue #13058 (comment)

timneutkens · 2020-07-06T11:54:48Z

@Timer , I have installed next@^9.4.5-canary.18. Now the CSS flickering doesn't appear in the development mode, but it stays the same on the production version. The production version still has the bug.

Note that I'm using material-ui + css modules

Heres a version of the app that I've been working on facing this issue: cluster-11-lwj6nmcgy.vercel.app .

Seems this your case is unrelated to css modules / tailwind and more so related to forgetting to implement pre-rendering of material-ui: #7322 (comment)

Prottoy2938 · 2020-07-06T14:23:34Z

@casperle , In my case the problem was because I was doing server side rendering. I followed this documentation from material-ui and fixed the issue

talaikis · 2020-07-06T15:27:57Z

With v9.4.5-canary.28 not flickering in dev and flickering in production.

We previously used to remove our FOUC helper inside of the style injection to ensure content was shown as fast as possible. This behavior, however, was problematic for a few reasons: 1. Large JavaScript chunks would take longer than an animation frame to parse, causing FOUC 1. Rendering would sometimes complete before an animation frame, causing improper effects To fix the latter, we started removing the no FOUC helper **before** rendering, however, we never fixed the former by removing the dead code. There's not a great way to test this because the FOUC is so fast and flaky, however, this code really shouldn't exist and isn't likely to be re-added (regress). Also, we already have FOUC tests that occasionally flake, probably due to this. Fixes vercel#12448 Fixes vercel#13058 Fixes vercel#11195 Fixes vercel#10404

Timer self-assigned this May 4, 2020

Timer added this to the 9.3.7 milestone May 4, 2020

Timer modified the milestones: 9.3.7, 9.4.1, 9.4.2 May 11, 2020

tafelito mentioned this issue May 19, 2020

FOUC using both global CSS and CSS modules #11195

Closed

Timer modified the milestones: 9.4.2, 9.4.3 May 20, 2020

timneutkens added css labels May 25, 2020

Timer modified the milestones: 9.4.3, 9.4.4 May 28, 2020

Timer added type: next kind: bug and removed css labels Jun 3, 2020

Timer modified the milestones: 9.4.5, 9.x.x Jun 9, 2020

Timer changed the title ~~styles flickering with tailwind + css modules~~ styles flickering in dev with tailwind + css modules Jun 9, 2020

Timer modified the milestones: 9.x.x, iteration 3 Jun 15, 2020

Timer added point: 2 and removed type: needs investigation labels Jun 22, 2020

Timer mentioned this issue Jun 22, 2020

Do not remove no-FOUC styles too early #14448

Merged

kodiakhq bot closed this as completed in #14448 Jun 22, 2020

giacomorebonato mentioned this issue Dec 25, 2020

Fixes flickering on first render for NextJS + Emotion ben-rogerson/twin.examples#22

Merged

This comment has been minimized.

Sign in to view

vercel locked as resolved and limited conversation to collaborators Jan 7, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

styles flickering in dev with tailwind + css modules #12448

styles flickering in dev with tailwind + css modules #12448

tafelito commented May 3, 2020 •

edited

Pytal commented May 7, 2020 •

edited

mzygmunt commented May 8, 2020

dani97 commented May 27, 2020

Adrianjs42 commented May 27, 2020 •

edited

dani97 commented May 28, 2020

webdeb commented May 31, 2020

fadonascimento commented Jun 3, 2020 •

edited

Timer commented Jun 22, 2020

Prottoy2938 commented Jun 24, 2020 •

edited

casperle commented Jul 6, 2020

timneutkens commented Jul 6, 2020

Prottoy2938 commented Jul 6, 2020

talaikis commented Jul 6, 2020

This comment has been minimized.

styles flickering in dev with tailwind + css modules #12448

styles flickering in dev with tailwind + css modules #12448

Comments

tafelito commented May 3, 2020 • edited

Bug report

Describe the bug

To Reproduce

Expected behavior

Screenshots

System information

Pytal commented May 7, 2020 • edited

mzygmunt commented May 8, 2020

dani97 commented May 27, 2020

Adrianjs42 commented May 27, 2020 • edited

dani97 commented May 28, 2020

webdeb commented May 31, 2020

fadonascimento commented Jun 3, 2020 • edited

Timer commented Jun 22, 2020

Prottoy2938 commented Jun 24, 2020 • edited

casperle commented Jul 6, 2020

timneutkens commented Jul 6, 2020

Prottoy2938 commented Jul 6, 2020

talaikis commented Jul 6, 2020

This comment has been minimized.

tafelito commented May 3, 2020 •

edited

Pytal commented May 7, 2020 •

edited

Adrianjs42 commented May 27, 2020 •

edited

fadonascimento commented Jun 3, 2020 •

edited

Prottoy2938 commented Jun 24, 2020 •

edited