In development, all CSS from a site is pulled in on every page due to the lack of code splitting

Description

I’ve encountered two CSS-related oddities that occur when using gatsby develop and not gatsby build. This seems to be (partly) related to #9911 but that issue remains closed so I’m re-reporting the problems here.

Problem 1: a page displayed under gatsby develop shows a bootstrap spinner but, under gatsby build, it does not.

Problem 2: a page displayed under gatsby develop changes colours when a completely unrelated line in a completely unrelated file is commented out & the file saved.

Steps to reproduce

Both problems can be reproduced with https://github.com/pcolmer/gatsby-bug-poc. After cloning the repo, you need to mkdir src/markdownpages as the directory is missing from the repo and I can’t get it added to the repo.

Problem 1:

1. gatsby develop
2. Go to http://localhost:8000/ - you see a fairly bland page.
3. Go to http://localhost:8000/test - you see a bootstrap spinner in the middle of the top of the page.
4. Ctrl+C to stop Gatsby.
5. gatsby build
6. gatsby serve -p 8000

Repeat steps 2 & 3. Step 2 should look the same. For step 3, you should see the text “Loading…” in the top left corner of the page, because the bootstrap CSS isn’t getting loaded.

Problem 2:

1. Switch to the branch “possible-fix”.
2. gatsby develop
3. Go to http://localhost:8000/

Notice that I’ve added a nav bar and that the background is blue.

Open components/loading.js, comment out line 2 (import "../styles/minimal.scss") and save it. Gatsby rebuilds the site … and the nav bar’s background changes to green, which is the colour it should be.

Expected result

For problem 1, the spinner should never be displayed because the page is not loading the bootstrap CSS. The branch possible-fix applies a CSS change to the test page to correct that error. However, the fact that the spinner displays under gatsby develop misleads the developer into thinking that everything is OK.

For problem 2, the banner should be green.

Actual result

For problem 1, the spinner is displayed during gatsby develop but not during gatsby build/gatsby serve

For problem 2, the banner is blue until a CSS-related line in an unrelated file is commented out.

Environment

  System:
    OS: Linux 4.19 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Core(TM) i5-6300U CPU @ 2.40GHz
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 12.18.1 - ~/.nvm/versions/node/v12.18.1/bin/node
    npm: 6.14.7 - ~/.nvm/versions/node/v12.18.1/bin/npm
  Languages:
    Python: 3.8.2 - /usr/bin/python
  npmPackages:
    gatsby: ^2.24.47 => 2.24.47
    gatsby-cli: ^2.12.87 => 2.12.87
    gatsby-plugin-react-helmet: ^3.3.10 => 3.3.10
    gatsby-plugin-react-helmet-canonical-urls: ^1.4.0 => 1.4.0
    gatsby-plugin-sass: ^2.3.12 => 2.3.12
    gatsby-source-filesystem: ^2.3.19 => 2.3.24
    gatsby-transformer-remark: ^2.8.25 => 2.8.28
  npmGlobalPackages:
    gatsby-cli: 2.12.84

[pcolmer]

Just a heads-up to the Gatsby team: I have no intention of letting this issue die through inactivity. I’ve taken the time and trouble to provide a simple reproduction of the problem. The problem is clearly within Gatsby itself.

THIS NEEDS FIXING!

[pcolmer]

@KyleAMathews now that it has been acknowledged that this issue needs to be fixed, is it really necessary for the bot to regularly mark this as a stale issue?

I will keep on commenting in order to stop the issue being closed but it just adds to my level of frustration …