Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(gatsby): Turn off react/jsx-pascal-case in ESLint to fix Theme-UI warnings #24560

Conversation

ehowey
Copy link
Contributor

@ehowey ehowey commented May 28, 2020

Description

Turns off react/jsx-pascal-case in ESLint due to warnings in the console with Theme-UI and the <Styled> component. At the end of the day this isn't a big deal, but it does really clutter up the console when building sites with Theme-UI.

Looks like this:

warn ESLintError: 
/Users/erichowey/Coding/gatsby-theme-catalyst/themes/gatsby-theme-catalyst-helium/src/components/post-list.js
   26:11  warning  Imported JSX component h1 must be in PascalCase or SCREAMING_SNAKE_CASE  react/jsx-pascal-case
  130:19  warning  Imported JSX component h2 must be in PascalCase or SCREAMING_SNAKE_CASE  react/jsx-pascal-case
  138:21  warning  Imported JSX component a must be in PascalCase or SCREAMING_SNAKE_CASE   react/jsx-pascal-case
  142:19  warning  Imported JSX component p must be in PascalCase or SCREAMING_SNAKE_CASE   react/jsx-pascal-case
  159:19  warning  Imported JSX component p must be in PascalCase or SCREAMING_SNAKE_CASE   react/jsx-pascal-case
  169:21  warning  Imported JSX component p must be in PascalCase or SCREAMING_SNAKE_CASE   react/jsx-pascal-case
  173:19  warning  Imported JSX component a must be in PascalCase or SCREAMING_SNAKE_CASE   react/jsx-pascal-case

The JSX looks something like this, in case you are not familiar with it:

<Styled.p>Some text.</Styled.p>

This may be undesired due to the effect this would have on all users, I believe this was originally off because I didn't used to see these errors and then they suddenly started appearing about a week ago after upgrading Gatsby versions.

I just thought I would make a quick PR in case it helps resolve this issue.

Related to #24327

EDIT: Sorry it looks like my prettier config removed some commas in there, feel free to edit as needed.

@ehowey ehowey requested a review from jxnblk May 28, 2020 04:36
@ehowey ehowey requested a review from a team as a code owner May 28, 2020 04:36
@gatsbot gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label May 28, 2020
@LekoArts LekoArts removed the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label May 28, 2020
@pieh
Copy link
Contributor

pieh commented May 28, 2020

I think jsx-eslint/eslint-plugin-react#2638 (recent change to react/jsx-pascal-case rule) might be what changed here.

So previously <Styled.p> was really testing just Styled part (which is PascalCase). After that PR was merged and published - it now checks p (which is not PascalCase).

I think the rule is way too opinionated to stay by default, so turning it off in general seems like good idea

@laurieontech laurieontech merged commit ee00a6f into gatsbyjs:master May 28, 2020
@laurieontech
Copy link
Contributor

Thank you @ehowey!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants