Description
When React hoists style rules using <style precedence="..." href="...">{...rules}</style>
it does not accept arbitrary props. The reason is that while it looks like you are rendering a single tag here each tag with the same precedence will get grouped together in a single style tag in the serialized output. Really you are rendering a style rule more than a style element and so there is no natural place to put arbitrary props on this style tag since they might conflict. A trivial example is
<style precedence="default" href="123" data-x="red">{redRules}</style>
<style precedence="default" href="abc" data-x="blue">{blueRules}</style>
the resultant stylesheet will look like this
<style data-precedence="default" data-href="123 abc">
...redRules
...blueRules
</style>
we can't put both red and blue as the value of data-x
property so we simply omit it. Ideally with a warning.
However... nonce
is special.
With nonces they only make sense if you use the same value for all styles. Additionally if you are using a nonce for non-trivial CSP purposes then all styles should have the nonce otherwise they will be ignored. So there is no conflict in adopting the first nonce
value we see for a style tag that is hoisted.
Activity