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 拆分到两个文件中，一切都很正常

[crtl]

I am using a helper function to create and wrap styled function components and it worked using create-react-app but using vite I have to reload for every change.

import {FC} from "react";
import styled from "styled-components";


/**
 * Creates a function component and wraps it in styled-component to enable styling
 * and generates a new displayName for returned component if provided component has one.
 * Usage:
 * ```
 * const MyComponent = createStyledFC<{}>((props) => {
 *     return <div {...props}></div>;
 * })`
 *   background: blue;
 *
 *   .my-styled {
 *       color: red;
 *   }
 * `;
 * ```
 * @param component
 * @param displayName Optional display name for component
 */
export function createStyledFC<T = {}>(component: FC<T & {className?: string}>, displayName?: string) {

    const comp = styled(component as FC<T & {className?: string}>)

    const _displayName = displayName || component.displayName;

    if (_displayName) {
        component.displayName = _displayName;
        (comp as any).displayName = `Styled${_displayName}`;
    }

    return comp;
}

[sapphi-red]

I confirmed this still does not work. (Vite 4.0.2 + plugin-react 3.0.0)
TestMyHoc.jsx now works but Test.jsx still doesn't work.
https://stackblitz.com/edit/vitejs-vite-gdqpfv?file=package.json,src%2FTestMyHoc.jsx,src%2FTest.jsx