Hot reloading doesn't work with Gatsby when files are separated

[SeokminHong]

Environment

• Linaria version: 2.0.0-rc.3
• Bundler (+ version): gatsby@^2.24.9 (webpack@~4.43.0)
• Node.js version: 14.13.0
• OS: Ubuntu-20.04 (WSL2)

Description

Hi, I faced a bug when I tried to implement theming. I had implemented the class names approach for it.

// styles/theme.js
const colors = {
  // Editing colors triggers hot reloading
  light: { text: "black", background: "#fff" },
  dark: { text: "white", background: "#000" },
}

const theming = cb =>
  Object.keys(colors).reduce(
    (acc, name) =>
      Object.assign(acc, {
        [`html.${name} &`]: cb(colors[name]),
      }),
    {}
  )

export { theming }

// styles/global.js
export const globals = css`
  :global() {
    body {
      margin: 0;
      ${theming(c => ({
        backgroundColor: c.background,
        color: c.text,
      }))};
    }
  }

When I edited the color properties for theming, hot reloading worked properly. However, if I moved the implementation of the theme's color into separate files, it didn't work.

// styles/themes/light.js
export default {
  // Editing colors doesn't trigger hot reloading
  text: "black",
  background: "#fff",
}

// styles/themes/dark.js
export default {
  text: "white",
  background: "#000",
}

// styles/theme.js
import lightTheme from "./themes/light"
import darkTheme from "./themes/dark"

const colors = {
  light: lightTheme,
  dark: darkTheme,
}
...

Reproducible Demo

I made a repository to reproduce the bug.

https://github.com/SeokminHong/bug-repro-gatsby-linaria-hmr-bug