fix: Set style properties directly in mutation

[chargome]

This PR sets style attributes directly instead of rewriting the full style attribute. That avoids users running into runtime CSP errors when they have not configured unsafe-inline in their CSP.

fixes #145
relates to #10481

[mydea]

Q: Is this safe? Could styles not include colons in other places? Not 100% sure, just want to double check!

[chargome]

That will probably be an issue sooner or later, you're right

[chargome]

I have tried several options on injecting these styles (with nonces), like using a shadow dom, an iframe or just a style tag but all of these were still triggering the csp error.

The only option that really worked were setting the attributes directly using javascript, which is most likely too brittle and expensive to do.

The only other alternative that kinda worked was:

• creating a style tag on the unattached document
• setting a nonce on that tag, adding inline styles as a class inside the style tag
• creating a span, setting the classname we have defined in the style tag
• using window.getComputedStyle(span)to get the styles and then get the properties from that

but this alters values (e.g. color: red becomes an rgb value), so also not really suitable I think

[visualjerk]

Unsure, if this is viable in your case, but some libraries offer a nonce option on initialization which is added to each injected style element.

Example from emotion