Inconsistent CSS Styling Between gatsby develop and build

[hogutier]

Description

My portfolio site was running perfectly yesterday on Netlify. This morning, I updated some images from png to svg and locally they all look good locally on Chrome. However, after deploying again to Netlify, the buttons/formatting of text across the site look different/bad. I didn't touch any of the code in the other areas where I see the styling difference.

Steps to reproduce

1. Use gatsby develop locally and go to localhost:8000 to view the site
2. Use gatsby build
3. Compare both sites and the styling will be lost on gatsby build

Comparing the css on the gatsby develop vs gatsby build, the code is definitely different. It seems the build uses the default styling from the starter. The gatsby develop uses the styling I created.

Expected result

Both sites in gatsby develop and gatsby build should look the same in the browser

Actual result

Both sites look different

Environment

System:
OS: macOS 10.14.3
CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 8.9.4 - /usr/local/bin/node
npm: 5.7.1 - /usr/local/bin/npm
Browsers:
Chrome: 72.0.3626.119
Safari: 12.0.3
npmPackages:
gatsby: ^2.1.23 => 2.1.23
gatsby-image: ^2.0.31 => 2.0.31
gatsby-plugin-crisp-chat: ^2.1.0 => 2.1.0
gatsby-plugin-google-analytics: ^2.0.16 => 2.0.16
gatsby-plugin-manifest: ^2.0.22 => 2.0.22
gatsby-plugin-react-helmet: ^3.0.8 => 3.0.8
gatsby-plugin-remove-serviceworker: ^1.0.0 => 1.0.0
gatsby-plugin-sharp: ^2.0.25 => 2.0.25
gatsby-plugin-typography: ^2.2.8 => 2.2.8
gatsby-source-filesystem: ^2.0.23 => 2.0.23
gatsby-transformer-sharp: ^2.1.15 => 2.1.15
npmGlobalPackages:
gatsby-cli: 2.4.7

[KyleAMathews]

Are all your packages updated to the latest version?

[DSchau]

Also if you're able a reproduction would be very much appreciated!

[hogutier]

Yes, my packages are updated to the latest version. Here's what I did to make sure I did this correctly:

1. npm outdated
2. manually updated package.json to the latest versions shown
3. ran "npm update"
4. ran "npm install"

[hogutier]

To reproduce the issue, all you need to do is:

1. git clone https://github.com/hogutier/Portfolio_Horacio.git
2. cd into porfolio_horacio
3. npm install
4. gatsby develop
5. look at the site with Chrome on localhost:8000
6. compare what you see on step 5 with my live site at https://www.horaciog.com (you will notice that my live site has a bunch of styling issues (different sized buttons, a different font and issues with
7. styling on the about page and you will continue to see this throughout the different sections of the page)

Do these steps to reproduce help? I'm happy to provide whatever else you need. Thank you!

[DSchau]

@hogutier I've PR'ed some fixes to this PR.

gatsby-plugin-typography injects a style tag. This is injected first (which allows for easier overriding by user-land CSS, or a CSS reset). However, the css reset (which was in layout.css) is conflicting with the gatsby-plugin-typography CSS, particularly you had an html selector that was setting font-size to 10px. Removing the CSS reset (which really isn't needed anyways) restores the behavior/style that you'd expect.

This doesn't manifest itself in development (which is certainly non-ideal and we'll work on this!) because the sort order of the style tags is different (typography.js comes last).

I'm going to close this as answered, but very much not closing the central theme of this issue, which is that the sort order of CSS still could use some tender love and care.

Thanks for using Gatsby 💜

[KyleAMathews]

@hogutier @DSchau also PRed a change to typography.js to ensure that during development, the typography.js styles are also at the top so they don't override your own styles.

[blainekasten]

#25729