gatsby build results in different CSS to that of gatsby develop

[ylorenzana]

gatsby v1.1.45
node v9.8.0

When I run gatsby build, some styles from my global stylesheet (using emotion with injectGlobal) aren't rendering, specifically, the font-size property set to 62.5% in the html selector. I noticed this last night when deploying my site. I thought maybe there was some conflict in the css with specificity because I also use a normalize stylesheet (from npm), but this wasn't the case.

Site is based off of the gatsby-starter-blog-no-styles

Steps:
gatsby build
gatsby serve

Expected:
production build to look the same as my dev build

Actual:
prod. build has a very large font size—I use rem so pretty much everything in my site is 40% bigger

My global styles module:

import { injectGlobal } from 'emotion';

injectGlobal`
  html {
    font-size: 62.5%;
  }
  body {
    font-family: 'Ubuntu', sans-serif;    
    font-size: 1.8rem;
    font-weight: 400;    
    background:#FCFCFC;
    color: #393E46;
    line-height: 1.5;   
    box-sizing: border-box;
    a {
      text-decoration: none;
      border-bottom: 0.15rem solid transparent;
      color: #2C3E50;
      transition: all 0.25s ease-out;
    }
    a:hover {
      border-bottom: 0.15rem solid #2C3E50;
    }
    h1 {
      color: #2C3E50;
    }
    h2, h3, h4{
     color: #222; 
    }
    .content-wrapper {
      min-height: 100vh;
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: minmax(30vh, auto) minmax(50vh, auto) minmax(8vh, auto);
      grid-gap: 2rem 1rem;
      margin: 0;
      align-items: start;
      justify-items: center;
    }
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }`
;

edit: fixed backticks for code block

[ryanditjia]

It seems your Gatsby version is outdated. Can you try upgrading all of your packages (including the Emotion-related ones) and see if the problem persists?

[ylorenzana]

Updated all of my packages. Problem persists! Any other suggestions?

[ryanditjia]

Can you send a repo? Or a link to the built version of the site.

[ylorenzana]

https://github.com/ylorenzana/blog
deployed with netlify: https://condescending-goldberg-0625de.netlify.com/hello-world/

[calebsylvest]

Trash the .cache, node_modules and package-lock.json directories and file. Then run npm install again. I just cloned you repo and got it set up locally and quickly deployed with Surge (see here https://elderly-shape.surge.sh/) and all seems to be working.

👉 Check out this past issue to see if it pertains to your problem: #4816

[ylorenzana]

@calebsylvest I'll give that a try and I'll get back to you. I took a look at your deploy, and it's showing the same problem as before. The font-size property is not being set in the html selector as it should be. Compare the gatsby develop and gatsby build versions of the site, and you'll see how much larger everything is on the production build.

A screenshot of the inspector on your deploy, note there is no font-size property being set:

[ylorenzana]

hmm this is odd. I trashed what you suggested, but when I did, it broke the project. Running npm install would return errors, here's a screenshot of a part of the output:

Restoring the package-lock.json and the cache folder fixed the install problem. I was able to get the project up and running again, but the problem with the css continues.

[bradennapier]

@ylorenzana are you using gatsby-plugin-offline ? that plugin doesnt work (it will break your css). Specifically the cached versions of the site remove classes from the content for some reason I can't define.

Other ran into this too and someone from the team told me the plugin doesnt work. In my case you can see that for some reason when content is served from cache the "BodyGrid" class is missing and it breaks my rendering. There are other odd cases like this throughout.

Generally if I clear the app cache and destroy the service worker the app will work on the next reload - then break again after that.

[ylorenzana]

@bradennapier my project was based on the gatsby-starter-blog package, apparently, it includes that plugin in the gatsby-config—I'll remove it from the config for the time being. Perhaps it should be mentioned in the README.md of the starter repo? Thanks for the tip!

I moved around the css in my global stylesheet, and removed an empty selector I had forgotten about. This for some reason fixed the problem I was having, and the font-size is now being set properly for the production build. I'm not familiar with the bundling process of the prod build to have any idea of why this was happening, but thanks to everyone who took their time to help!

[bradennapier]

Yea I also used that and i would not assume its fixed unless you remove offline ;-) just got done with 3 hours of dealing with it again when i added it back today haha

[RohitRox]

Having same issue.
Gatsby build applies different class name but I can see in React inspector proper class being applied.

System:
    OS: macOS High Sierra 10.13.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.14.2 - ~/.nvm/versions/node/v10.14.2/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.14.2/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 59.0.1
    Safari: 12.0.3
  npmPackages:
    gatsby: ^2.0.107 => 2.0.107
    gatsby-image: ^2.0.20 => 2.0.25
    gatsby-plugin-google-analytics: ^2.0.9 => 2.0.9
    gatsby-plugin-manifest: ^2.0.9 => 2.0.12
    gatsby-plugin-offline: ^2.0.16 => 2.0.19
    gatsby-plugin-react-helmet: ^3.0.2 => 3.0.4
    gatsby-plugin-react-svg: ^2.0.0-beta1 => 2.0.0-beta1
    gatsby-plugin-sass: ^2.0.7 => 2.0.7
    gatsby-plugin-sharp: ^2.0.16 => 2.0.16
    gatsby-remark-copy-linked-files: ^2.0.8 => 2.0.8
    gatsby-remark-external-links: ^0.0.4 => 0.0.4
    gatsby-remark-images: ^3.0.1 => 3.0.1
    gatsby-source-filesystem: ^2.0.12 => 2.0.12
    gatsby-transformer-remark: ^2.1.15 => 2.1.15
    gatsby-transformer-sharp: ^2.1.9 => 2.1.9
  npmGlobalPackages:
    gatsby-cli: 2.4.6

[nugoo1]

Same issue here. I didnt change anything, atleast I think. Now its just broken on deployment. Looks great on development mode, very frustrating. Probably will look at earlier commits to isolate thr problem.

[masiamj]

Any updates on this? Experiencing the same issue.

[nugoo1]

Change ur code to look like this.

height: calc(100% - #{$body_padding})

[kpennell]

Having the same problem....super hard to figure out.

[chandlervdw]

Same issue — I've found that in some situations, it can be related to utilizing react fragments or not. But there are other situations where it just makes no sense why a certain class isn't getting applied.

[DekiGk]

I had similar issue while conditionally trying to load a component based on the cookie value. Of course, this did not work as you have SSR on production (not sure why it works in dev mode though). Anyway, what I ended up doing is wrapping my check inside useEffect and checking which component to render once React takes over (rehydrates) on the client. You can use componentDidMount() for class components. After I implemented this, everything works as expected.

[pmarxbraun]

Hi,

I'm running into same issue here
My font are different in local vs server.

@ylorenzana what did you do exactly ?
Thanks

[ghost]

Someone please help

[amchampoux]

Same here! Any update on this?