Hot reloading CSS broken when component lives in wrapPageElement

Description

I’m using Styled Components (and the gatsby plugin for it) but I can confirm this is an issue with CSS modules as well.

Hot reloading of CSS works great when you are editing a component on a page.

However if you use the wrapPageElement or wrapRootElement API in gatsby-browser.js and have a styled component that lives in that layout, it’s reloads the whole page - losing at state you might have.

export function wrapPageElement({ element, props }) {
  return <Layout {...props}>{element}</Layout>;
}

So for example, if I have a Layout component:

export default function Layout({ children }) {
  return (
    <>
      <div>
          <Nav></Nav>
          {children}
      </div>
    </>
  );
}

And then either in Layout.js directry, or inside of another component - like Nav - I have my styled component:

const NavStyles = styled.nav`
  background: green;
`;

Now if I change green to blue. The whole page reloads.

If I were to move that Nav component out of Layout.js and into a page like pages/index.js, it hot reloads fine without reloading the page.

Environment

This happens in both Firefox and Chrome

System: OS: macOS 10.15.2 CPU: (16) x64 Intel® Core™ i9-9880H CPU @ 2.30GHz Shell: 3.2.57 - /bin/bash Binaries: Node: 13.9.0 - /usr/local/bin/node Yarn: 1.22.0 - /usr/local/bin/yarn npm: 6.13.7 - /usr/local/bin/npm Languages: Python: 2.7.15 - /usr/local/bin/python Browsers: Chrome: 81.0.4044.122 Firefox: 59.0.1 Safari: 13.0.4 npmGlobalPackages: gatsby: 2.15.14

[gaearon]

Is there a plan to switch to Fast Refresh by default? React Hot Loader is extremely fragile and I hope we can phase it out asap.

[blainekasten]

@gaearon I’m absolutely tracking all of this 😃 Here’s our rough plan of action:

• take part in stabilizing the refresh plugin ecosystem and keep it incorporated with gatsby
• Gatsby V3 will raise the bar for minimum react version, which allows us to make fast-refresh the default dev experience
• continue to support hot-loader until preact is compatible with fast-refresh

Since fast-refresh should fix these rough edges for us, I don’t think it’s worth our effort fixing this in hot-loader as it will eventually be fully replaced.