gatsby-plugin-sass: importing scss file in one page imports stying globally for all pages during development

[kimbaudi]

Description

During development (gatsby develop) css styling should only be applied to pages where I explicitly import .scss file. However, importing .scss file to a single page also applies css styling globally to all other pages that do not import scss file.

Steps to reproduce

1. gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world

2. npm i gatsby-plugin-sass sass

3. configure gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-sass`,
      options: {
        implementation: require("sass"),
        includePaths: ["src/scss"],
      },
    },
  ],
}

4. add .scss file(s) under src/scss folder

h1 {
  font-family: 'Nunito';
}

5. create 2 pages (index.js and foo.js), but only import .scss file in one (foo.js)

index.js

import React from "react"

export default function Home() {
  return <h1>Hello world!</h1>
}

foo.js

import React from "react"
import "../scss/style.scss"

export default function Foo() {
  return <h1>Hello foo!</h1>
}

6. run gatsby develop

Expected result

What should happen?

css styling should only be applied to the page importing .scss (foo.js).
css styling should not be applied to the page without the .scss import (index.js)

What happened.

css styling was applied to pages without .scss import (index.js)

Environment

System:
OS: Windows 10 10.0.18363
CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
Binaries:
Node: 14.15.0 - C:\Program Files\nodejs\node.EXE
npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 86.0.4240.198
Edge: Spartan (44.18362.449.0)
npmPackages:
gatsby: ^2.25.3 => 2.25.3
gatsby-plugin-sass: ^2.5.1 => 2.5.1
npmGlobalPackages:
gatsby-cli: 2.12.117

gatsby-site.zip

[LekoArts]

Thank you for opening this!

This is expected behavior as per #11072 - we don't code-split CSS as it will result in unforeseen implications. If you're okay with those you can (like mentioned in #21728) override the webpack config, e.g. this plugin does it: https://github.com/staffe/gatsby-plugin-split-css

We're marking this issue as answered and closing it for now but please feel free to comment here if you would like to continue this discussion. We also recommend heading over to our communities if you have questions that are not bug reports or feature requests. We hope we managed to help and thank you for using Gatsby!

[kimbaudi]

we don't code-split CSS as it will result in unforeseen implications

But this leads to another unforseen implication:
importing css/scss files to a single page component will apply styling to other page components during development mode.

This is a problem that many developers will face when they realize that there production site styling is different from their site during development. see this comment

we need some guarantee that our website during development will look the same as it would on production. But currently as it stands, Gatsby might falsely apply css/scss styling to pages during development and give developers the illusion that css styling has been applied to a page in production, when it has not.

this is something that gatsby users need to be aware of. this is a dangerous side-effect and bad developer experience because you get css styling on a page in dev mode when you haven't even imported css/scss file to that page.

[kimbaudi]

BTW, gatsby-plugin-split-css does not resolve the issue of css styling being applied to pages without explicitly importing css/scss file during development. I've attached an example gatsby project using gatsby-plugin-split-css: gatsby-site.zip.

[amalitsky]

BTW, gatsby-plugin-split-css does not resolve the issue of css styling being applied to pages without explicitly importing css/scss file during development.

Hi and thanks for opening this issue. Have you figured proper solution since then? Thanks

[kimbaudi]

I'm not sure about a proper solution, but I've moved a lot of my styling from global scss into styled components using @emotion. I just accept that there is a global scss file and there is no way to split css.

[amalitsky]

Actually, gatsby-plugin-split-css does work for me. It prevents ALL styles to be bundled up into one huge css files which then inevitably ends up inlined in every html file generated.

I still have some "global" (imported by gatsby-browser.ts) css inlined in every page and styles relevant to the page.

Personally I don't want (nor expect) my styles to be inlined but I don't think that we have a choice.