`usePress` style insertion is blocked and logging an error when a strict CSP directive is in effect

[pleunv]

Provide a general summary of the issue here

#8200 was fixed by inserting a style node into the DOM (see here. The problem with this approach is that this breaks anywhere a Content Security Policy is applied that does not allow unsafe-inline. This will more often than not be the case. The result is a block on the style insertion and a console error:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-…'". Either the 'unsafe-inline' keyword, a hash ('sha256-…'), or a nonce ('nonce-...') is required to enable inline execution.

🤔 Expected Behavior?

Ideally an alternative solution for #8200 is found that does not require insertion of style nodes and thus does not cause the aforementioned error. At the very least, the current solution should support nonces but that's generally not always very straightforward to set up from a library consumer point of view as it requires a way to communicate the nonce to the runtime code.

😯 Current Behavior

usePress is doing style insertion here:

https://github.com/adobe/react-spectrum/blob/77b3442e4150116f3d35995b5a98b582d9e6f231/packages/%40react-aria/interactions/src/usePress.ts#L829-L842

This operation is blocked in browsers when a CSP directive is applied that does not allow style-src: unsafe-inline, which is generally the case.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

I attempted to set up a repro but because of how codesandbox operates under the hood, attempting to configure a CSP directive with a strict style-src completely breaks the preview, unfortunately. Alternatively you can try this out locally by adding the following meta tag in the index.html:

<meta http-equiv="Content-Security-Policy" content="style-src 'self'" />

Version

1.9.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response