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

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

[wardpeet]

Hey,

We’ve just updated our bundling in gatsby@2.20.7, 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)

[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! 💪💜