Gatsby: Weird CSS behaviour with gatsby develop

Created on 13 Aug 2020 · 17Comments · Source: gatsbyjs/gatsby

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:

gatsby develop
Go to http://localhost:8000/ - you see a fairly bland page.
Go to http://localhost:8000/test - you see a bootstrap spinner in the middle of the top of the page.
Ctrl+C to stop Gatsby.
gatsby build
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:

Switch to the branch "possible-fix".
gatsby develop
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

needs core review SSG* bug

Source

pcolmer

👍5

Most helpful comment

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 on 8 Oct 2020

👍5

All 17 comments

I've done some further digging into this ... the problem where the spinner appears in develop but not in build seems to be down to the retrieval of blob:http://localhost:8000/1083e78e-a3fd-43c4-86dc-3f57e39fa4d1 which seems to be a mega-CSS bundle provided by gatsby develop, and it includes the bootstrap CSS even though the test page isn't retrieving it.

With the colour changing problem, there are two blobs getting pulled in and the second blob is the one that defines the blue colour instead of the green colour. greping the code for the colour references shows that the green (correct) colour is defined in src/styles/theme.scss while the blue (incorrect) colour is defined in node_modules/bootstrap/dist/css/bootstrap.css confirming that, again, gatsby develop appears to be pulling in all CSS files it can find, even if they aren't referenced.

pcolmer on 17 Aug 2020

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

github-actions[bot] on 6 Sep 2020

😕1

I definitely do want to keep this open until it is resolved.

I've created clear repro steps that show distinct differences in the behaviour between gatsby develop and gatsby build and it is very frustrating that there are these differences. It makes it really hard to figure out what to do to fix this when, ultimately, gatsby itself is getting in my way.

pcolmer on 6 Sep 2020

In my case, gatsby-plugin-minify was making this problem, which led the production build to reload all styles after a page was loaded completely in the production build.

hayyaun on 17 Sep 2020

Hiya!

This issue has gone quiet. Spooky quiet. 👻

Thanks for being a part of the Gatsby community! 💪💜

github-actions[bot] on 8 Oct 2020

Time for a copy/paste of my reply from September 6th.

I definitely do want to keep this open until it is resolved.

I've created clear repro steps that show distinct differences in the behaviour between gatsby develop and gatsby build and it is very frustrating that there are these differences. It makes it really hard to figure out what to do to fix this when, ultimately, gatsby itself is getting in my way.

pcolmer on 8 Oct 2020

THIS NEEDS FIXING!

pcolmer on 8 Oct 2020

👍5

similar issue as @pcolmer