Skip to content
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
RobertBolender opened this issue Mar 9, 2018 · 11 comments
Closed
Assignees

Comments

@RobertBolender
Copy link
Collaborator

@RobertBolender RobertBolender 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
Copy link

@chrisk2020 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
@RobertBolender
Copy link
Collaborator Author

@RobertBolender RobertBolender commented Mar 9, 2018

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

@chrisk2020
Copy link

@chrisk2020 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
Copy link
Contributor

@KyleAMathews KyleAMathews commented Mar 9, 2018

/cc @erquhart

@RobertBolender
Copy link
Collaborator Author

@RobertBolender RobertBolender 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.

@RobertBolender
Copy link
Collaborator Author

@RobertBolender RobertBolender 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
Copy link
Collaborator

@erquhart 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
@RobertBolender
Copy link
Collaborator Author

@RobertBolender RobertBolender 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
Copy link
Collaborator

@erquhart erquhart commented Mar 9, 2018

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

@RobertBolender
Copy link
Collaborator Author

@RobertBolender RobertBolender 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
Copy link
Collaborator

@erquhart 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
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants