Nested Styled components breaks react-refresh with '$RefreshReg$ is not defined'

[ntucker]

Environment

• Linaria version: 3-beta.13
• Bundler (+ version): webpack
• @pmmmwh/react-refresh-webpack-plugin: 0.5.1
• react-refresh: 0.10.0
• Node.js version: 12.22.1
• OS: Ubuntu 20.04

Description

When using linaria and @pmmmwh/react-refresh-webpack-plugin, referring to a react styled component triggers the following error:

home/ntucker/src/anansi/examples/linaria/src/MenuItem.tsx: An unexpected runtime error occurred during dependencies evaluation: 
/home/ntucker/src/anansi/examples/linaria/src/MenuItem.tsx:37
$RefreshReg$(_c, "MenuItemContainer");
^

ReferenceError: $RefreshReg$ is not defined

Note this used to work in beta-4. I haven't traced down which version it first starts having trouble with yet.

Have isolated this to @linaria/shaker. Just setting that package version to beta.4 fixes this

Reproducible Demo

const MenuItemContainer = styled.div`
  width: 32px;
`

const IconContainer = styled.div`
  ${MenuItemContainer}:hover & {
    background-color: #f2f4f7;
  }
`

export default ({ children }) => {
  return (
    <MenuItemContainer>
      <IconContainer>{children}</IconContainer>
    </MenuItemContainer>
  )
}

For full runnable configuration:

• checkout https://github.com/ntucker/anansi
• yarn
• cd examples/linaria
• yarn start

[ntucker]

Confirmed @linaria/shake@3.0.0-beta.4 is last working version. beta.5 breaks. This suggests 6907e22 is related? (from release notes)

[ntucker]

How do I remove complete repro label? I provided one

[Anber]

Hi @ntucker
Thank you for the report!

This suggests 6907e22 is related?

It is related. I've reverted changes and added another way to support enums.

[ntucker]

Planning on releasing a new version? 🙏