Importing CSS from JS file breaks incremental build

[thierrygoldwaser]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

When importing a CSS file from gatsby-browser.js as described in https://www.gatsbyjs.com/docs/how-to/styling/built-in-css/, all files are generated with each build, even if no changes.

Therefore, it seems the import CSS directive is breaking the incremental build.

Similar issue reported: https://www.reddit.com/r/gatsbyjs/comments/z37o2o/is_the_webpackcompilationhash_supposed_to_change/

Reproduction Link

https://github.com/thierrygoldwaser/gatsby-incremental-build-ko

Steps to Reproduce

1. npm install
2. sh ./compute-build-diff.sh

(As described in https://www.gatsbyjs.com/docs/debugging-incremental-builds/, the compute-build-diff.sh script computes a diff between 2 consecutive builds.)

Expected Result

File build-diff.diff should be empty.

Actual Result

File build-diff.diff is not empty.

Note that if you remove the import directive from gatsby-browser.js and run the same script, the build diff is now empty. Which proves that the culprit is the import directive.

Environment

System:
    OS: macOS 13.1
    CPU: (8) arm64 Apple M1
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.18.0 - ~/.nvm/versions/node/v16.18.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v16.18.0/bin/npm
  Languages:
    Python: 2.7.18 - /Users/thierry/.pyenv/shims/python
  Browsers:
    Chrome: 109.0.5414.87
    Firefox: 108.0.1
    Safari: 16.2

Config Flags

No response

[LekoArts]

Hi, this is a duplicate of #33450

[thierrygoldwaser]

Hi @LekoArts thanks, indeed I had not noticed that only the first build was impacted.