fix: skip calling setAttribute on unchanged attr in diffProps

[juliecheng]

There’s a bug (?) in Chrome where dynamically added CSS rules (via insertRule) get dropped if you call stylesheet.setAttribute('type', 'text/css') and the type is already text/css. Firefox does not drop these rules if the stylesheet already has type="text/css" and you try to set the attr again.

Note: this is specifically for when the stylesheet already has type="text/css" and we try to call setAttribute('type', 'text/css'). Calling stylesheet.setAttribute('some-other-attr', ‘foo') does not drop the styles.

Here is a script you can paste into the Chrome’s browser console to see the styles getting dropped

// Create a style element in document body
const style = document.createElement('style');
style.setAttribute('type', 'text/css');
document.body.appendChild(style);

// Add CSS rules via insertRule
style.sheet.insertRule('body { background-color: lightblue; }', 0);
style.sheet.insertRule('.test { color: red; font-weight: bold; }', 0);

// Log the initial state (should be 2)
console.log('CSS rules before setAttribute:', style.sheet.cssRules.length);

// Update attribute on the style element
style.setAttribute('type', 'text/css');

// Log the final state (should still be 2 but it'll be 0)
console.log('CSS rules after setAttribute:', style.sheet.cssRules.length);

if (style.sheet.cssRules.length === 0) {
  console.log('CSS rules were dropped');
}