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

[React 19] precedence prop is not respected when used on style element #29225

Closed
souporserious opened this issue May 23, 2024 · 6 comments
Closed
Labels

Comments

@souporserious
Copy link

Summary

Setting the precedence prop on a style element with a unique href does not seem to have any affect and the style elements will be ordered based on where they were in the React tree.

CodeSandbox Demo

I expected the style tags to be grouped and ordered based on precedence. This PR shows an example of the output when used with an atomic class name approach.

@eps1lon
Copy link
Collaborator

eps1lon commented May 23, 2024

Simplified repro: https://codesandbox.io/p/sandbox/magical-oskar-8gnqgd?file=%2Fsrc%2Findex.js%3A23%2C60

@souporserious Can you check if the same happens with renderToString and renderToPipeableStream?

@souporserious
Copy link
Author

@eps1lon
Copy link
Collaborator

eps1lon commented May 23, 2024

@gnoff
Copy link
Collaborator

gnoff commented May 23, 2024

@souporserious we had an error in our docs. the precedence value is arbitrary and can be anything. React infers no special meaning from the value used but instead just assumes that earlier precedence values are "lower" precedence and later ones are "higher" precedence

If you name your precedences like "low" and "high" and you want that to be reflected in how React treats them then React must encounter "low" first and "high" second

In the repro the order is flipped from the meaning of the words used which makes it seem like React is not respecting the precedence value.

Keep in mind that many folks might name their precedences like "reset", "utilties", "content", "important" or whatever. so it isn't always going to be an ordinal work like "low" "medium" "high".

Next.js uses "nextjs" and doesnt' try to compose styles with different precedences, opting to use the hierarchy of the pp to ensure that later styles override earlier ones

@gnoff
Copy link
Collaborator

gnoff commented May 23, 2024

Fixing docs here: reactjs/react.dev#6908

@eps1lon
Copy link
Collaborator

eps1lon commented May 24, 2024

Fixed:

Thank you for the clarification in the docs! This makes much more sense now 😄
-- reactjs/react.dev#6908 (comment)

@eps1lon eps1lon closed this as completed May 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants