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

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"],
      },
    },
  ],
}

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

h1 {
  font-family: 'Nunito';
}

1. 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>
}

1. 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® Core™ 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

[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]

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.