-
Notifications
You must be signed in to change notification settings - Fork 48.2k
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
Warn about conflicting style values during updates #14181
Conversation
@bvaughn This is probably one of the only bugs that both you (#8689) and I (#6348 (comment)) have both run into. 😂 Hope this warning helps. |
baa89c8
to
84bcf8c
Compare
Details of bundled changes.Comparing: 2dd4ba1...399ac96 react-dom
Generated by 🚫 dangerJS |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh hey, this bug.
* {font: 'foo', fontVariant: 'bar'} -> {font: 'foo'} | ||
* becomes .style.fontVariant = '' | ||
*/ | ||
export function validateShorthandPropertyCollisionInDev( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Seems like this could get noisy if we don't do any kind of de-duping. I wonder if this is something you considered and ruled out?
Guess de-duping would have a small impact on tests too.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I thought about it but I don't think this will be very common, it is a bad bug, and it is pretty easy to fix – so I think it's OK not to.
|
||
expect(() => | ||
ReactDOM.render( | ||
<div style={{font: 'qux', fontStyle: 'baz'}} />, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ugh, this is subtle. Had to read these tests a couple times. Nice to have a warning for it.
This is one of the most insidious quirks of React DOM that people run into. Now we warn when we think an update is dangerous. We still allow rendering `{background, backgroundSize}` with unchanging values, for example. But once you remove either one or change `background` (without changing `backgroundSize` at the same time), that's bad news. So we warn. Fixes facebook#6348.
84bcf8c
to
399ac96
Compare
I figured out a simpler way to do facebook#14181. It does allocate some but I think that's OK. Time complexity might even be better since we avoid the nested loops the old one had.
I figured out a simpler way to do #14181. It does allocate some but I think that's OK. Time complexity might even be better since we avoid the nested loops the old one had.
Disables the recently introduced (facebook#14181) warning for shorthand CSS property collisions by wrapping in a feature flag. Let's hold off shipping this until at least the next minor.
Disables the recently introduced (#14181) warning for shorthand CSS property collisions by wrapping in a feature flag. Let's hold off shipping this until at least the next minor.
This is one of the most insidious quirks of React DOM that people run into. Now we warn when we think an update is dangerous. We still allow rendering `{background, backgroundSize}` with unchanging values, for example. But once you remove either one or change `background` (without changing `backgroundSize` at the same time), that's bad news. So we warn. Fixes facebook#6348.
I figured out a simpler way to do facebook#14181. It does allocate some but I think that's OK. Time complexity might even be better since we avoid the nested loops the old one had.
…ok#14245) Disables the recently introduced (facebook#14181) warning for shorthand CSS property collisions by wrapping in a feature flag. Let's hold off shipping this until at least the next minor.
This is one of the most insidious quirks of React DOM that people run into. Now we warn when we think an update is dangerous. We still allow rendering `{background, backgroundSize}` with unchanging values, for example. But once you remove either one or change `background` (without changing `backgroundSize` at the same time), that's bad news. So we warn. Fixes facebook#6348.
I figured out a simpler way to do facebook#14181. It does allocate some but I think that's OK. Time complexity might even be better since we avoid the nested loops the old one had.
…ok#14245) Disables the recently introduced (facebook#14181) warning for shorthand CSS property collisions by wrapping in a feature flag. Let's hold off shipping this until at least the next minor.
Originally added in facebook#14181; disabled in facebook#14245. Intention was to enable it in React 16.7 but we forgot.
This is one of the most insidious quirks of React DOM that people run into. Now we warn when we think an update is dangerous.
We still allow rendering
{background, backgroundSize}
with unchanging values, for example. But once you remove either one or changebackground
(without changingbackgroundSize
at the same time), that's bad news. So we warn.Fixes #6348.