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

Warn about conflicting style values during updates #14181

Merged
merged 1 commit into from Nov 9, 2018

Conversation

sophiebits
Copy link
Collaborator

@sophiebits sophiebits commented Nov 9, 2018

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 #6348.

@sophiebits
Copy link
Collaborator Author

@sophiebits sophiebits commented Nov 9, 2018

@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.

@sizebot
Copy link

@sizebot sizebot commented Nov 9, 2018

Details of bundled changes.

Comparing: 2dd4ba1...399ac96

react-dom

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-dom.development.js +1.2% +1.3% 709.41 KB 718.15 KB 163.99 KB 166.13 KB UMD_DEV
react-dom.development.js +1.2% +1.3% 704.72 KB 713.46 KB 162.61 KB 164.76 KB NODE_DEV
ReactDOM-dev.js +1.3% +1.4% 725.35 KB 734.86 KB 163.71 KB 165.93 KB FB_WWW_DEV

Generated by 🚫 dangerJS

Copy link
Collaborator

@bvaughn bvaughn left a comment

Oh hey, this bug.

* {font: 'foo', fontVariant: 'bar'} -> {font: 'foo'}
* becomes .style.fontVariant = ''
*/
export function validateShorthandPropertyCollisionInDev(
Copy link
Collaborator

@bvaughn bvaughn Nov 9, 2018

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.

Copy link
Collaborator Author

@sophiebits sophiebits Nov 9, 2018

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'}} />,
Copy link
Collaborator

@bvaughn bvaughn Nov 9, 2018

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.
bvaughn
bvaughn approved these changes Nov 9, 2018
@sophiebits sophiebits merged commit 8ae867e into facebook:master Nov 9, 2018
1 check passed
sophiebits added a commit to sophiebits/react that referenced this issue Nov 10, 2018
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.
sophiebits added a commit that referenced this issue Nov 10, 2018
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.
@gaearon gaearon mentioned this pull request Nov 13, 2018
acdlite added a commit to acdlite/react that referenced this issue Nov 15, 2018
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.
acdlite added a commit that referenced this issue Nov 15, 2018
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.
jetoneza pushed a commit to jetoneza/react that referenced this issue Jan 23, 2019
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.
jetoneza pushed a commit to jetoneza/react that referenced this issue Jan 23, 2019
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.
jetoneza pushed a commit to jetoneza/react that referenced this issue Jan 23, 2019
…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.
n8schloss pushed a commit to n8schloss/react that referenced this issue Jan 31, 2019
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.
n8schloss pushed a commit to n8schloss/react that referenced this issue Jan 31, 2019
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.
n8schloss pushed a commit to n8schloss/react that referenced this issue Jan 31, 2019
…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.
sophiebits added a commit to sophiebits/react that referenced this issue Feb 9, 2020
Originally added in facebook#14181; disabled in facebook#14245. Intention was to enable it in React 16.7 but we forgot.
threepointone pushed a commit that referenced this issue Feb 10, 2020
Originally added in #14181; disabled in #14245. Intention was to enable it in React 16.7 but we forgot.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants