Vue: When adding and removing style rules like `background`, sub rules (`background-color`) are not re applied

[posva]

Version

2.5.13

Reproduction link

https://codesandbox.io/s/40opo3n4lw

Steps to reproduce

• Add background, set value to red, click _ADD_
• _see the box in red_
• Click on _REMOVE_
• Check the box

What is expected?

The box should be gray again

What is actually happening?

the box has no background-color

---

This bug was found by @MatWaligora in discord

The problem is that when we update styles, we do not reapply background-color and other properties because they were already applied but, in the browser, if you apply background, it will modify the other style.backgroundColor, style.backgroundPosition, etc, . So we think styles do not need to be reapplied but because setting background have some side effects we need to reapply all other background- properties. It's probably the same with other rules like border

[posva]

A possible way to fix: Whenever a property like background, border or border-right is removed, remove any property starting with that name from oldStyle to force adding the style again

[phanan]

Hm… why? The way I see it, we're removing the background property. Since background can be a shorthand for other (sub)properties like -image, -color, all these are removed as well, and it is expected. If you don't want them to be removed, then apply and remove the individual properties instead. There are a LOT of CSS properties/shorthands like background (off the top of my head: font, border, grid, flexbox stuff…) and it's really out of Vue's scope to deal with them IMO.

[MatWaligora]

@phanan this is exactly the problem, even though the model still contains the (sub)properties they are ignored during style reappliment. For my case this is a bug, because I'm doing kind of WYSIWYG editor and the user is able to apply CSS styles (as an object) which is then merged with base values thus it's possible to have an object with both background and background-color properties at once.

[posva]

@MatWaligora I think you should add back the pre tag with all the styles being applied. It makes things clearer

[phanan]

I'm slowly getting the idea. But still, can we reduce this into a simple fiddle? From what I can tell, we can reproduce the issue without the need of a full-blown SFC app.

[MatWaligora]

Ok I refactored the reproduction project to something smaller: https://codesandbox.io/s/z2zk7k208p

[phanan]

OK I don't have enough time to play with the sandbox right now but it looks like something key-related to me. If you change the tag of either element (to prevent Vue from reusing DOM) the problem will go away.

[MatWaligora]

Yeah but it's not a solution to the problem.

[yyx990803]

This is a wontfix. It's impractical to handle all the possible shorthand variations in the diffing algorithm. The solution is: do not use shorthand properties in inline styles.

If you really have to, e.g. you are allowing the user to edit the css arbitrarily, then the workaround is giving the element in question a key that equivalents to the hash of its inline styles. This forces the element to be replaced fresh when its inline styles change.