gymnast uses css-in-js to provide its customization options. This means that consumers with strict Content Security Policies may need to whitelist reflex's behavior in order to allow it to inject style tags directly onto the page.

You can work around this with a nonce attribute. gymnast will look for a globally exposed value at window.__webpack_nonce__ to apply as a nonce attribute to the style tag it injects. This authorizes the injected style tag as "safe" content on the page.

๐Ÿ“˜

why __webpack_nonce__

While you don't have to use webpack to consume gymnast, webpack provides an undocumented nonce feature. gymnast is treating this as the "standard" approach for applying nonce attributes to injected content. It is also the same approach styled-components, another popular css-in-js library, uses to apply nonce attributes.