styleMap has a different behavior on the update

Which package(s) are affected?

Lit Core (lit / lit-html / lit-element / reactive-element)

Description

The second render is not the same even if style key doesn't change.

html`<p style=${styleMap({[`--cell-color-id-${CSS.escape('my id')}`]: 'red'})}>

This example will render style="--cell-color-id-my\ id: red;" on first render, and style="--cell-color-id-my\\\ id: red;" on second.

I think the problem is that the first render set the variable without escaping. The second render escape the variable resulting in a duplication

Reproduction

https://lit.dev/playground/#project=W3sibmFtZSI6InNpbXBsZS1ncmVldGluZy5qcyIsImNvbnRlbnQiOiJpbXBvcnQge2h0bWwsIGNzcywgTGl0RWxlbWVudH0gZnJvbSAnbGl0JztcbmltcG9ydCB7c3R5bGVNYXB9IGZyb20gJ2xpdC9kaXJlY3RpdmVzL3N0eWxlLW1hcC5qcyc7XG5cblxuZXhwb3J0IGNsYXNzIFNpbXBsZUdyZWV0aW5nIGV4dGVuZHMgTGl0RWxlbWVudCB7XG4gIHN0YXRpYyBzdHlsZXMgPSBjc3NgcCB7IGNvbG9yOiAgfWA7XG5cbiAgc3RhdGljIHByb3BlcnRpZXMgPSB7XG4gICAgY29sb3I6IHt0eXBlOiBTdHJpbmd9XG4gIH07XG5cblxuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCk7XG4gICAgdGhpcy5jb2xvciA9ICdyZWQnO1xuICAgIFxuICAgIHNldFRpbWVvdXQoKCkgPT4gdGhpcy5jb2xvciA9ICdibHVlJywgNTAwMClcbiAgfVxuXG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gaHRtbGA8cCBzdHlsZT0ke3N0eWxlTWFwKHtbYC0tY2VsbC1jb2xvci1pZC0ke0NTUy5lc2NhcGUoJ215IGlkJyl9YF06IHRoaXMuY29sb3J9KX0-XG4gICAgICAgIEhlbGxvLCBcbiAgICAgICAgPHNwYW4gc3R5bGU9JHtzdHlsZU1hcCh7J2NvbG9yJzogYHZhcigtLWNlbGwtY29sb3ItaWQtJHtDU1MuZXNjYXBlKCdteSBpZCcpfSlgfSl9PiR7dGhpcy5jb2xvcn08L3NwYW4-IFxuICAgIDwvcD5gO1xuICB9XG59XG5jdXN0b21FbGVtZW50cy5kZWZpbmUoJ3NpbXBsZS1ncmVldGluZycsIFNpbXBsZUdyZWV0aW5nKTtcbiJ9LHsibmFtZSI6ImluZGV4Lmh0bWwiLCJjb250ZW50IjoiPCFET0NUWVBFIGh0bWw-XG48aGVhZD5cbiAgPHNjcmlwdCB0eXBlPVwibW9kdWxlXCIgc3JjPVwiLi9zaW1wbGUtZ3JlZXRpbmcuanNcIj48L3NjcmlwdD5cbjwvaGVhZD5cbjxib2R5PlxuICA8c2ltcGxlLWdyZWV0aW5nIG5hbWU9XCJXb3JsZFwiPjwvc2ltcGxlLWdyZWV0aW5nPlxuPC9ib2R5PlxuIn0seyJuYW1lIjoicGFja2FnZS5qc29uIiwiY29udGVudCI6IntcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwibGl0XCI6IFwiXjMuMC4wXCIsXG4gICAgXCJAbGl0L3JlYWN0aXZlLWVsZW1lbnRcIjogXCJeMi4wLjBcIixcbiAgICBcImxpdC1lbGVtZW50XCI6IFwiXjQuMC4wXCIsXG4gICAgXCJsaXQtaHRtbFwiOiBcIl4zLjAuMFwiXG4gIH1cbn0iLCJoaWRkZW4iOnRydWV9XQ

Workaround

Instead of use CSS.escape, we can't replace unsupported char with another such as '_'. Problem, i must think of every single char that must be replaced and It can causes issue with uniq => 'my id' and 'my_id' are equals.

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

3.2.1

Browser/OS/Node environment

Browser : Chrome 132.0.6834.83