[v2] Webpack V4 style-loader FOUC in development

Description

Since #6008 and #6009, CSS styles are no longer inlined in development (they are still inlined in production). In development, this causes a flash of unstyled content followed by a layout jump when the styles are applied.

Steps to reproduce

Create a Gatsby v2 site using CSS (rather than CSS-in-JS). In development, the styles will be applied via a link tag (causing a flash of unstyled content). In production, the styles are inlined, leading to the same smooth loading experience as in v1.

Expected result

To prevent developer confusion, the visual behavior of a Gatsby site should be the same in development and production. The timing of loading and applying CSS styles affects this consistency. V1 achieved this consistency by always inlining styles.

Actual result

When using CSS, V2 offers an inconsistent experience in development vs. production by switching between inlining and not-inlining CSS styles.

(If I’ve misunderstood any of this, please let me know!)

Environment

  System:
    OS: macOS High Sierra 10.13.5
    CPU: x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.7.0 - /usr/local/bin/node
    Yarn: 1.5.1 - /usr/local/bin/yarn
    npm: 6.1.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 67.0.3396.99
    Firefox: 60.0.2
    Safari: 11.1.1
  npmPackages:
    gatsby: next => 2.0.0-beta.9 
    gatsby-cli: next => 2.0.0-beta.2 
    gatsby-image: next => 2.0.0-beta.2 
    gatsby-plugin-favicon: ^2.1.1 => 2.1.1 
    gatsby-plugin-manifest: next => 2.0.2-beta.2 
    gatsby-plugin-netlify: next => 2.0.0-beta.2 
    gatsby-plugin-netlify-cache: ^0.1.0 => 0.1.0 
    gatsby-plugin-offline: next => 2.0.0-beta.2 
    gatsby-plugin-react-helmet: next => 3.0.0-beta.2 
    gatsby-plugin-robots-txt: ^1.0.2 => 1.0.2 
    gatsby-plugin-sharp: next => 2.0.0-beta.2 
    gatsby-plugin-sitemap: next => 2.0.0-beta.2 
    gatsby-plugin-webpack-bundle-analyzer: ^0.1.1 => 0.1.1 
    gatsby-source-filesystem: next => 2.0.1-beta.3 
    gatsby-transformer-sharp: next => 2.1.1-beta.2 
    gatsby-transformer-yaml: next => 2.1.1-beta.2 
  npmGlobalPackages:
    gatsby-cli: 2.0.0-beta.2

[Mesoptier]

Hi all! Not a Gatsby user here, but figured I’d chime in anyway since I have been dealing with a similar issue. According to this related issue on the style-loader package the FOUC can be fixed by disabling the sourceMap option for style-loader. (Or by enabling singleton, but I was still getting FOUC after doing so.)

[jlengstorf]

@sarneeh the page components get unmounted/remounted on each navigation, which is probably the culprit here.

I’d try this:

1. Remove the styles from the page (here: https://github.com/sarneeh/gatsby-issue-6211/blob/master/src/pages/index.js#L3)
2. Create a gatsby-browser.js in the project root and import them there instead:

   import './src/styles/index.css';
   

This will make the styles globally available and won’t unmount/remount them.