Add Content Security Policy (CSP) nonce support for inline styles

[yuvrajnx]

Problem

react-color currently uses inline <style> tags in the Hue and Saturation components without CSP nonce support. This causes violations in applications with strict Content Security Policy that don't allow 'unsafe-inline'.

Error:

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

This prevents react-color from being used in enterprise applications and security-conscious environments that enforce strict CSP policies.

Proposed Solution

Add support for CSP nonce attributes on inline style tags by:

1. Creating a helper function to retrieve nonce from window.scriptNonce or a custom prop
2. Adding nonce attribute to <style> tags in Hue and Saturation components
3. Supporting both global window.scriptNonce and component-level nonce prop

Ref link
MDN: Content Security Policy
Webpack CSP Documentation