Gatsby: [v2] CSS (via Sass) inlined in different locations between develop and build

Created on 5 Jul 2018 · 14Comments · Source: gatsbyjs/gatsby

Description

Using typography.js and gatsby-plugin-sass (and associated libraries of each), the css is "blobbed" after typography in develop and inlined before typography in build. This means the look of the website changes from develop to build. Images below (obviously more drastic with more css being moved around).

develop:
develop

build:
build

Steps to reproduce

Super basic repro available here.

Expected result

The look website end result in v1 matched what I am seeing in develop in v2 so I would expect that typography would be listed in the <head> before the inlined css.

Actual result

The opposite of expected.

Environment

Current environment below, but tested with both yarn and npm on Windows locally. I noticed the issue after a Netlify deploy preview (so Linux and Yarn).

  System:
    OS: Windows 10
    CPU: x64 Intel(R) Core(TM) i7 CPU         930  @ 2.80GHz
  Binaries:
    Yarn: 1.7.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.0.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
  npmPackages:
    gatsby: next => 2.0.0-beta.17
    gatsby-plugin-sass: next => 2.0.0-beta.3
    gatsby-plugin-typography: next => 2.2.0-beta.2

File contents (if changed)

See repro repo. Essentially my-hello-world with both plugins added.

help wanted bug

Source

jbolda

👍5

Most helpful comment

Alright, now that my PR has been merged I'm going to look at adding a fix to the Typography plugin.

octalmage on 17 Aug 2018

❤1 🎉1

All 14 comments

I’m experiencing the same issue on my site. Ultimately what I had to do to resolve it was to create a custom html.js and move the Typography.js styles to the top.

I’m not sure how this could be resolved in Gatsby core. Should Gatsby core manage the sort order of head elements? Should their be a priority for setHeadCompoments? It’s kind of an ugly problem.

octalmage on 17 Jul 2018

There's probably a better way to handle this, I just wanted it fixed. Here's the commit where I fixed the issue:

https://github.com/octalmage/jason.stallin.gs/pull/48/commits/90445ca43c73ce21de6abb6d7d776f573fddd0ea#diff-58826c9c508b82875d8f9a9872d19e2dR1

octalmage on 18 Jul 2018

👍1

@octalmage fyi, I upgraded to beta.42 (going off memory here, was newest ~8 hours ago). The upgrade fixed this issue, but now I have a FOUC. I was waiting to post until I had updated the repro, but this feels like it is related to #6211 which I've been keeping an eye on. I suspect it's an issue with how core is interacting with typography.

jbolda on 18 Jul 2018

@jbolda I was having FOUC too, which ended up still being related to Typography loading after everything else. The fix I posted above resolved it, and now I'm happy! It's a hack though, so it would be great if this get fixed in Gatsby core.

octalmage on 18 Jul 2018

FYI, I'm working on a new API to allow users to fix this:

https://github.com/gatsbyjs/gatsby/compare/master...octalmage:topics/replace-head-components?expand=1

octalmage on 19 Jul 2018

Alright, now that my PR has been merged I'm going to look at adding a fix to the Typography plugin.

octalmage on 17 Aug 2018

❤1 🎉1

This seems to be a problem with all CSS. Development and production order the css in different ways, even with regular import's of css files. Try importing bootstrap and some other css file for a layout or component. It'll come out correctly in develop but possibly not in production.

There really needs to be some sort of standardised solution to CSS ordering within Gatsby. Is there any reason why it can't just keep the order of the import statements?

akoolenbourke on 29 Aug 2018

👍1

Yeah I wonder if this could be the issue:

https://github.com/gatsbyjs/gatsby/blob/b70dd5acc031115296584f879aa52cca62b5dd9c/packages/gatsby/cache-dir/static-entry.js#L232

octalmage on 31 Aug 2018

Yeahj i think we need to do something smarter for the inlining...like look what html-plugin is doing: https://github.com/jantimon/html-webpack-plugin/blob/master/lib/chunksorter.js

jquense on 11 Sep 2018

@jquense woah cool! Yeah, that definitely seems useful.

It wouldn't solve the typography.js issue though as that's added by gatsby-plugin-typography which doesn't run through webpack.

KyleAMathews on 11 Sep 2018

i was thinking of my css woes :P ;)

jquense on 11 Sep 2018

Fixed the link in my comment, Gatsby goes through and sorts preloaded items to the top. This could be causing styles to be loaded in different orders between development and production.

https://github.com/gatsbyjs/gatsby/blob/b70dd5acc031115296584f879aa52cca62b5dd9c/packages/gatsby/cache-dir/static-entry.js#L232

octalmage on 17 Sep 2018

This bug popped up in https://github.com/mjordancodes/portfolio/tree/link-typography-problem with Typography.js inlining in different order and introducing mystery bugs for @mjordancodes.

jlengstorf on 3 Nov 2018

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!