[Looking for help] I'm building my Gatsby site and CSS won't behave, help!

Okay, so here’s the deal.

I’m moving a landing page created by one of our external contractors (just HTML and CSS) to Gatsby because why not. The site looks amazing when running gatsby develop but after running gatsby build some of the CSS is broken.

What I’ve managed to debug with help from other folks is the fact that my css pre-build looks like this:

--title-font-sizing: 2.8rem/4rem;
font: var(--title-font-sizing) Muli, Lato, sans-serif;

which gets converted to:

font: var(--title-font-sizing),Muli, Lato, sans-serif;

after the build process. Notice the comma before Muli.

My package.json looks like this, I think this site is as basic as it gets:

{
    "private": true,
    "scripts": {
        "build": "gatsby build",
        "develop": "gatsby develop",
        "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
        "start": "npm run develop",
        "serve": "gatsby serve",
        "clean": "gatsby clean"
    },
    "devDependencies": {
        "prettier": "^1.19.1",
        "gatsby": "^2.18.3",
        "gatsby-plugin-prefetch-google-fonts": "^1.4.3",
        "react": "^16.12.0",
        "react-dom": "^16.12.0"
    }
}
1 Like

your css minification on prod is adding a comma before ,muli
4.6rem/5.8rem,Muli is invalid… 4.6rem/5.8rem Muli is valid
I doubt it’s literally a gatsby issue! seems like this is the bug if you’re using cssnano: https://github.com/cssnano/cssnano/issues/713 and here it is being fixed on April 29th: https://github.com/cssnano/cssnano/pull/740/files

Perhaps the Gatsby starter you’re using has an outdated version of cssnano.

1 Like

Thanks for the answer @mike.sherov!

I’m using https://github.com/gatsbyjs/gatsby-starter-hello-world - I’ll file an issue over there tomorrow!