Gatsby: Build bundling all the css in whole application on each page's internal styles

[piyushkantm]

Description

I've used the starter project. In the project, there are two pages:

1. index
2. page-2 (has import of demo.js)

There is a demo.js which imports demo.module.css

Now this demo-module css in being returned in html of index page also even when it doesn't import that components and doesn't need the css of demo.module.css

This results in fairly large page size in applications with lots of custom components

Steps to reproduce

1. clone https://github.com/piyushkantm/gatsby-demo
2. gatsby build
3. check http://localhost:9000 and http://localhost:9000/page-2 (preferably via postman to disable Javascript)
4. the following internal css is present in both pages (Needed only by page-2):

.demo-module--red--3lAHA {
            color: red
        }

Expected result

in http://localhost:9000, demo-module--red--3lAHA should not be present

Actual result

in http://localhost:9000, demo-module--red--3lAHA is present

Environment

  System:
    OS: macOS 10.15.2
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.16.3 - /usr/local/bin/node
    Yarn: 1.19.1 - ~/.npm-global/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 79.0.3945.130
    Firefox: 72.0.2
    Safari: 13.0.4
  npmPackages:
    gatsby: ^2.18.4 => 2.19.12
    gatsby-image: ^2.2.34 => 2.2.40
    gatsby-plugin-manifest: ^2.2.30 => 2.2.41
    gatsby-plugin-offline: ^3.0.24 => 3.0.34
    gatsby-plugin-react-helmet: ^3.1.16 => 3.1.22
    gatsby-plugin-sharp: ^2.3.4 => 2.4.5
    gatsby-source-filesystem: ^2.1.39 => 2.1.48
    gatsby-transformer-sharp: ^2.3.6 => 2.3.14
  npmGlobalPackages:
    gatsby-cli: 2.8.14

[piyushkantm]

Hey Guys, anyone can help me with this? This seems an issue with Gatsby and causing problems if you want to apply different styles on body on different pages.

[wardpeet]

Hi @piyushkantm,

Your git repo is unavailable, it's probably marked private.

[piyushkantm]

@wardpeet Hi,

My apologies, I have made it public now.

[piyushkantm]

Hi @wardpeet Could you get a chance to look into this issue. If not, I would request you to please take a look at this.

This is an issue which is directly effecting the performance of the website (By increasing the size of the HTML pages)

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[piyushkantm]

@wardpeet Hey man. This is marked as stale and awaiting author response. I know that you must have other higher priorities task to do but would really appreciate if you atleast acknowledge the issue.

Appreciate your time.

[wardpeet]

Hey,

We've just updated our bundling in [email protected], which improves javascript bundling. CSS is sadly still the same but I added a TODO that we need to look at this for css-modules because it's scoped to a file.

I'm not 100% sure this would work but what happened if you create this function inside your gatsby-node.js

exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
  if (stage === "build-javascript") {
    const webpackConfig = getConfig()

    delete webpackConfig.optimization.splitChunks.cacheGroups.styles

    actions.replaceWebpackConfig(webpackConfig)

[danabrit]

@piyushkantm Can you please confirm whether the suggestion above resolved your issue? Thank you!

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜