[v2] Webpack V4 style-loader FOUC in development

[ooloth]

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

[m-allanson]

Hmm I'm actually not sure how Gatsby decides whether to inline CSS or not. I agree that having the styles inlined for gatsby develop seems sensible.

[KyleAMathews]

#6009 was just a change to production not development. Do you have a reproduction? I just ran the using-css-modules example and the styles loaded instantly.

[ooloth]

Thanks for the replies! Gatsby is the best. :)

Thanks for clarifying about #6009. Nevertheless, I notice styles are no longer inlined in development in v2 (I guess this happened in a different PR). Was there a reason for changing this behavior?

Here is a repo reproducing the style loading issues: https://github.com/ooloth/gatsby-v2-css-test. The repo uses a single global CSS file (as I usually do), rather than CSS modules. I prefer a Tachyons/Tailwinds/PurgeCSS CSS approach as it gives me the fastest dev workflow.

In development, each time you refresh the demo site, you should see a FOUC followed by a big layout jump. This did not occur in v1.

In production, these issues disappear, so it seems like inlining CSS in development again is all that's needed.

[ooloth]

In addition to the FOUC, there are some worse styling issues in development when using global CSS with v2 as well (e.g. certain styles sometimes not applying at all; plugins like react-headroom sometimes calculating their dimensions incorrectly, etc).

However, the FOUC is the easiest issue to demonstrate and may be enough to warrant the inline CSS fix on its own.

[KyleAMathews]

Investigated the problem a bit. Found a few plugins which try to solve the issue:

• https://github.com/shepherdwind/css-hot-loader
• https://www.npmjs.com/package/extract-css-chunks-webpack-plugin

Also this thread:

• Hot Reload plan? webpack-contrib/mini-css-extract-plugin#34

If someone would like to create a PR fixing this problem, that'd be great!

[jquense]

I'm a bit confused about what changed from v1, the dev flow doesn't use extract text right? All dev css is handled via style-loader which is the same as v1, and the flash of unstyled content with style-loader is a frustrating but multi-year long-standing issue with webpack.

I guess overall I'm just interested why it seems to be worse now?

[ooloth]

@jquense. The issue actually didn't occur in Gatsby v1. The reason it happens in v2 seems to be that v2 loads CSS via a link tag in development (rather than inlining it), while v1 inlined CSS in both development and production.

I'm not sure why this change occurred in v2 (maybe a side effect of the move from extract-text-plugin to mini-css-extract-plugin for webpack v4?), but the lack of inlining in development seems to be the behavior change that created this issue in v2.

The docs contain the following code comment on the "Custom webpack config" page:

// We don't need to add the matching ExtractText plugin
// because gatsby already includes it and makes sure its only
// run at the appropriate stages, e.g. not in development 

The "e.g. not in development" part of that comment suggests an awareness that CSS is not being inlined in development in v2 (if I'm understanding it correctly). Unfortunately, this makes it difficult for those using traditional CSS to know which styling issues in development are bugs and which will disappear in production when inlining occurs.

Hope that helps!

[jquense]

I'm not sure what you mean by "inlined" in v1, here. the configuration for css for dev is exactly the same for v2 as v1. That flow is style-loader -> css-loader. How the styles are added in devlopement has always (as far as i can see) been handled directly by webpack. Css was only inlined in production in the default html gatsby provided in v1.

[jquense]

btw i'm not trying to discount the issue here, just understand it!

[ooloth]

Thanks for diving in, @jquense!

I totally understand that the webpack treatment of CSS doesn't appear to have changed. The reason for the new behavior is a mystery to me as well and doesn't appear to have been intentional.

Css was only inlined in production in the default html gatsby provided in v1.

In my experience building a half dozen Gatsby v1 sites, CSS was always inlined in development (by "inlined", I mean the CSS was output within a style tag, rather than linked to externally via a link tag).

Here is how CSS is loaded in development on a Gatsby v1 site I recently launched (notice the style tag):

Here is how CSS is loaded in development on a Gatsby v2 site I'm working on (notice the link tag):

Thanks!

[KyleAMathews]

The link tag in v2 is the same thing as it's a base64 blob. The question is why did the styles get added before the initial render in v1 and after in v2.

[ooloth]

Thanks for clarifying!