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.

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

Styles missing from build when using gatsby-plugin-sass with CSS modules #4457

Closed
awesomebob opened this Issue Mar 9, 2018 · 11 comments

Comments

Projects
None yet
4 participants
@awesomebob
Copy link
Contributor

awesomebob commented Mar 9, 2018

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

This comment has been minimized.

Copy link

chrisk2020 commented Mar 9, 2018

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 > babel-preset-es2015@6.24.1: 🙌  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 > gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
@awesomebob

This comment has been minimized.

Copy link
Contributor Author

awesomebob commented Mar 9, 2018

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

@chrisk2020

This comment has been minimized.

Copy link

chrisk2020 commented Mar 9, 2018

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

This comment has been minimized.

Copy link
Contributor

KyleAMathews commented Mar 9, 2018

/cc @erquhart

@awesomebob

This comment has been minimized.

Copy link
Contributor Author

awesomebob commented Mar 9, 2018

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.

@awesomebob

This comment has been minimized.

Copy link
Contributor Author

awesomebob commented Mar 9, 2018

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

@erquhart

This comment has been minimized.

Copy link
Member

erquhart commented Mar 9, 2018

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

@erquhart erquhart changed the title Recent CSS changes, related to box-sizing, only on build? Styles missing from build when using gatsby-plugin-sass with CSS modules Mar 9, 2018

@awesomebob

This comment has been minimized.

Copy link
Contributor Author

awesomebob commented Mar 9, 2018

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

This comment has been minimized.

Copy link
Member

erquhart commented Mar 9, 2018

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

@awesomebob

This comment has been minimized.

Copy link
Contributor Author

awesomebob commented Mar 9, 2018

@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

This comment has been minimized.

Copy link
Member

erquhart commented Mar 12, 2018

Opened #4495 to address.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment