Console warnings with Theme-UI Styled component in Gatsby version 2.31.0

[Kev-Y-Huang]

Description

On gatsby version 2.31.0, I am getting console warnings about PascalCase that was raised in bug number 24327 and seemingly addressed in pull request 24560. At some point, the react/jsx-pascal-case rule was changed and so the fix was reverted in 28689.

The console warnings are different for this bug insofar that <Styled.p> tag raises no errors but <Styled.h1> does where as for the previous bug, it seemed that all Styled components raised warnings.

Steps to reproduce

1. Clone https://github.com/Kev-Y-Huang/theme-ui-styled-bug
2. Run gatsby develop
3. Check console

Expected result

Should expect no console warnings to occur.

Actual result

Environment

System:
    OS: Windows 10 10.0.18363
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Binaries:
    Node: 12.13.0 - C:\Program Files\nodejs\node.EXE
    npm: 6.12.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
    Chrome: 88.0.4324.104
    Edge: Spartan (44.18362.449.0)
npmPackages:
    gatsby: ^2.31.1 => 2.31.1
npmGlobalPackages:
    gatsby-cli: 2.12.65

[LekoArts]

Hi, thanks for the issue!

Please report this as a bug at https://github.com/yannickcr/eslint-plugin-react - going forward we'll want this rule to be enabled as it warns against an incorrect pattern (generally speaking) that makes Fast Refresh behave incorrectly. It expects components to be in PascalCase. Although it's unfortunate that the rule has some false positives, this should be fixed upstream instead of us deactivating the rule again.

In the meantime you could set your own ESLint config or deactivate the rule in the individual file. Thanks!