Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
jbolda opened this issue Jul 5, 2018 · 14 comments
Closed

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

jbolda opened this issue Jul 5, 2018 · 14 comments
Labels
help wanted Issue with a clear description that the community can help with. type: bug An issue or pull request relating to a bug in Gatsby

Comments

@jbolda
Copy link
Contributor

jbolda commented Jul 5, 2018 •
edited
Loading

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.
@jbolda jbolda added the type: bug An issue or pull request relating to a bug in Gatsby label Jul 5, 2018
@jbolda jbolda changed the title CSS (via Sass) inlined in different locations between develop and build [v2] CSS (via Sass) inlined in different locations between develop and build Jul 5, 2018
@m-allanson m-allanson added the help wanted Issue with a clear description that the community can help with. label Jul 6, 2018
@octalmage
Copy link
Contributor

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 octalmage mentioned this issue Jul 17, 2018
Merged
@octalmage
Copy link
Contributor

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

octalmage/jason.stallin.gs@90445ca#diff-58826c9c508b82875d8f9a9872d19e2dR1

@jbolda
Copy link
Contributor Author

jbolda commented Jul 17, 2018

@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.

@octalmage
Copy link
Contributor

@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
Copy link
Contributor

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 octalmage mentioned this issue Jul 25, 2018
Merged
@octalmage
Copy link
Contributor

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

@akoolenbourke
Copy link

akoolenbourke commented Aug 29, 2018 •
edited
Loading

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?

@octalmage
Copy link
Contributor

octalmage commented Aug 31, 2018 •
edited
Loading

Yeah I wonder if this could be the issue:

gatsby/packages/gatsby/cache-dir/static-entry.js

Line 232 in b70dd5a

.sort((s1, s2) => (s1.rel == `preload` ? -1 : 1)) // given priority to preload

@jquense
Copy link
Contributor

jquense commented Sep 11, 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

@KyleAMathews
Copy link
Contributor

@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.

@jquense
Copy link
Contributor

jquense commented Sep 11, 2018

i was thinking of my css woes :P ;)

@octalmage
Copy link
Contributor

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.

gatsby/packages/gatsby/cache-dir/static-entry.js

Line 232 in b70dd5a

.sort((s1, s2) => (s1.rel == `preload` ? -1 : 1)) // given priority to preload

@m-allanson m-allanson mentioned this issue Sep 18, 2018
Closed
@jlengstorf
Copy link
Contributor

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.

@kakadiadarpan kakadiadarpan mentioned this issue Nov 6, 2018
Closed
@gatsbot gatsbot bot added the stale? Issue that may be closed soon due to the original author not responding any more. label Jan 27, 2019
@gatsbot
Copy link

gatsbot bot commented Jan 27, 2019

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!

@jbolda jbolda added not stale and removed stale? Issue that may be closed soon due to the original author not responding any more. labels Jan 28, 2019
@KyleAMathews KyleAMathews mentioned this issue Mar 5, 2019
Merged
DSchau pushed a commit that referenced this issue Mar 5, 2019
@KyleAMathews @DSchau
fix(gatsby-plugin-typography): sort typography style tag first to avo…
5caf95e 
…id overwriting issues (#12295)

Fixes #12295
Fixes #6302
Fixes #9911
Fixes #1994
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
help wanted Issue with a clear description that the community can help with. type: bug An issue or pull request relating to a bug in Gatsby
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@KyleAMathews @octalmage @jlengstorf @jquense @m-allanson @jbolda @LekoArts @akoolenbourke