Skip to content

Add fetchpriority to props #3093

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.

Sign up for GitHub

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

Merged
merged 4 commits into from
Sep 21, 2024
Merged

Add fetchpriority to props #3093

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7eb35a9
Added fetchpriority to props
DustinBrett Aug 15, 2023
e923c0f
Add fetchPriority as well
DustinBrett Aug 20, 2023
3c1f018
Create eighty-garlics-dance.md
Andarist Sep 21, 2024
1714368
Update .changeset/eighty-garlics-dance.md
Andarist Sep 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/eighty-garlics-dance.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@emotion/is-prop-valid": patch
---

Adds `fetchpriority` and `fetchPriority` to the list of allowed props.
2 changes: 2 additions & 0 deletions packages/is-prop-valid/src/props.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,8 @@ const props = {
draggable: true,
encType: true,
enterKeyHint: true,
fetchpriority: true,
Copy link

@oliviertassinari oliviertassinari Sep 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this even valid?

Suggested change
fetchpriority: true,

Copy link
Contributor Author

@DustinBrett DustinBrett Sep 11, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It depends what you mean by valid, but I would say likely yes. I use this and it does indeed function and have an effect in browsers. The links I provided in the description also use it this way.

image

Also checking the way this list is used, it seemed to me that both versions should be added as I saw nothing to turn the camel case version into lower case.

Copy link

@oliviertassinari oliviertassinari Sep 11, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess the handling of uppercase vs. lowercase confuses me a bit in @emotion/is-prop-valid.

References:

Maybe we should actually .toLowerCase() when determining if a prop should be forwarded or not.

Copy link
Contributor Author

@DustinBrett DustinBrett Sep 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ya it's possible converting to lower case could be useful. I didn't see many duplicates. For my use case with Styled Components, it currently passes without the capitol. So I think it would be needed for this PR to stop my warning. The camel case version is not one I've had to use with React yet.

Copy link
Member

@Andarist Andarist Sep 19, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should stick to the camelCase here and follow React's suite.

Copy link
Contributor Author

@DustinBrett DustinBrett Sep 19, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The issue is that the camelCase only solution is not supported with the latest Next.js w/React. Only in React 19 will they be moving to camelCase for this property. If I change to using camelCase on elements within my codebase I get an error, as do others which is mentioned in the links that @oliviertassinari posted a year ago.

image

fetchPriority: true,
form: true,
formAction: true,
formEncType: true,
Expand Down