Gatsby: Styles missing from build when using gatsby-plugin-sass with CSS modules

[RobertBolender]

I can try a git bisect in the morning, was just wondering if someone already knows what's going on:

After updating Gatsby with yarn upgrade from 1.9.219 to 1.9.231, I'm noticing that my CSS styling is a bit wonky after a build with yarn build. Notably, I don't see any problems with yarn develop.

The primary thing I'm missing is this rule, although I'm not sure where it came from originally:

*, :after, :before {
  box-sizing: border-box;
}

That's not the only thing different, but it's about 90% of what I'm noticing.

Is there any recent change that would prevent this rule from being added to builds but not deploys?

[chrisk2020]

Possibly related #4418

I'm noticing that my styles from css modules are not being inserted on build. (This is the case on netlify, but also is if I run build and then serve the public folder locally - which would indicate it's perhaps not a netlify specific issue in ref to: #4418) Develop runs and compiles styles fine.

After upgrading two warings appear:

warning gatsby > [email protected]: 🙌  Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update! 
warning gatsby-plugin-sharp > imagemin-webp > cwebp-bin > bin-wrapper > download > gulp-decompress > [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5

[RobertBolender]

Also noting here that clearing the .cache directory did not resolve the problem.

[chrisk2020]

I traced the issues I was having to changes in this commit #4379 to gatsby plugin sass.

I locked the version back down to

    "gatsby-plugin-sass": "1.0.19",

and build works again.

[KyleAMathews]

/cc @erquhart

[RobertBolender]

Looking through the recent releases and tags, I don't see when gatsby-plugin-sass was released as 1.0.19 or 1.0.20, the last one I found was 1.0.18 on February 28th: c6ef251.

[RobertBolender]

Can confirm that I don't have CSS issues if I lock down gatsby-plugin-sass to 1.0.19.
Nice catch @chrisk2020 :+1:

[erquhart]

@awesomebob @chrisk2020 can either of you provide steps to reproduce?

[RobertBolender]

One thing that could be relevant is that I have removed gatsby-plugin-postcss-sass as per #2328 (comment)

I could work on a minimal repo to reproduce.

[erquhart]

If you can put a repro together I'll work on a fix.

[RobertBolender]

@erquhart

https://github.com/awesomebob/gatsby-i4457

I found that the box-sizing rule that I'm missing is from the default Gatsby /src/layouts/index.css, which seems to have no effect once I have imported an scss file of my own.

Downgrading gatsby-plugin-sass to 1.0.19 appeared to solve the issue in my main repo, but I have not been able to reproduce this "fix" in the minimal repo.

[erquhart]

Opened #4495 to address.