React Hot Reload - Styled Component/Emotion

[danieloprado]

Describe the bug

Hot reload won't update the css created by styled, just after a full reload.

Reproduction

Just try to change any css's prop inside a styled:
https://github.com/eduzz/template-react/tree/vite

System Info

System:
    OS: macOS 11.6
    CPU: (4) x64 Intel(R) Core(TM) i5-5350U CPU @ 1.80GHz
    Memory: 490.79 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.0.1 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.1.0 - /usr/local/bin/npm
    Watchman: 2021.10.18.00 - /usr/local/bin/watchman
  Browsers:
    Edge: 94.0.992.50
    Safari: 15.0
  npmPackages:
    @vitejs/plugin-react: 1.0.6 => 1.0.6 
    vite: 2.6.11 => 2.6.11

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[danieloprado]

Based on this comment I discovery a workaround:

const Component = styled(({ className }) => { // <~ wrap the component here, not in export
 return <div className={className}>hi!</div>
})`
    background: red;
`

This is not a good workaround because it looses the syntax highlighting but it may give some idea how to fix this problem.

[danieloprado]

The real problem is not with styled, is with any HOC.

const Component = ({ className }) => {
 return <div className={className}>hi!</div>
}

const myHOC = (Component, className) => {
 return  (props) => <Component {...props} className={className} />
}

export default myHoc(Component, 'test-class-1') // <~ try to change, no effect.

The Fast Refresh (from react/refresh) only re-run the variable Component (the first capitalized),
if I change the capitalized letters, it worked!

const component = ({ className }) => {
 return <div className={className}>hi!</div>
}

const MyHOC = (Component, className) => {
 return  (props) => <Component {...props} className={className} />
}

export default MyHoc(Component, 'test-class-1') // <~ try to change, no effect.

I don't know if there is any fix for that. 😥

Example:

example.mp4

[danieloprado]

Maybe related to facebook/react#20417 and facebook/react#21104

[gaearon]

The Fast Refresh (from react/refresh) only re-run the variable Component (the first capitalized),

That's expected. React component names must always start with a capital letter. This convention is assumed by some other tooling as well so you need to follow it.

[danieloprado]

@patak-js please reopen we still discussing it haha
@gaearon it was the workaround that I found to try to understand the behaviour.

The problem is with this very common syntax:

const Component =({ className }) => {
 return <div className={className}>hi!</div>
}

export default styled(Component)`
    background-color: red;
`

When you try to change the background-color it does not refresh current value. But when you change the content inside the component (like adding a text), the text is added but the background still the same as before. The fast refresh only refreshes the Component not the styled (or any HOC values)

[patak-dev]

Does this work with Webpack and not with Vite @danieloprado? Could you create a minimal reproduction that showcases the issue in Vite? Maybe using StackBlitz https://vite.new/react?

[danieloprado]

Here: https://stackblitz.com/edit/vitejs-vite-k3bzhu?file=src/Test.jsx

Try to change the background-color or try to change the parameter of the TestMyHoc. TestMyHocWorking is an example where refresh is working as expected, I think is because is not a call assignment.

[danieloprado]

I've just update the code with more examples.

[danieloprado]

Here an example with rect-sctipts: https://stackblitz.com/edit/react-ptscnt?file=src%2FTest.jsx

[oyb81076]

// Button.tsx
export default function Button(): React.ReactElement | null {
  return (
     <SButton>Text</SButton>
  );
}
const SButton = styled.button`color: green;`;
export const ButtonGroups = styled.button`
color: blue;
`;

当Button和ButtonGroups在一个文件里面的时候,
修改SButton的样式热更新正常，修改ButtonGroups的样式，不会触发热更新.
如果把ButtonGroups 和 Button 拆分到两个文件中，一切都很正常