bug: Nonce not being added to styles

[AliKdhim87]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.12.6

Current Behavior

I encountered an issue where the nonce attribute is not being added to the <style> elements in the rendered HTML output of a web application built using Next.js 14.1.3 and Stencil Core version 4.12.6. Despite attempting to use the setNonce function provided by StencilJS as described in the documentation, the nonce attribute is not reflected in the final rendered HTML.

Error Message (Observed in Browser):

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

Expected Behavior

The nonce attribute should be added to all <style> elements in the rendered HTML output, ensuring compliance with Content Security Policy (CSP) requirements.

System Info

- Browser: Google Chrome, Mozilla Firefox, Safari, Brave
- Technology Stack:
  - Next.js version: 14.1.3
  - Stencil Core version: 4.12.6

Steps to Reproduce

1. Implement the setNonce function to dynamically set the nonce attribute on <style> elements.
2. Verify that the meta tag with the nonce attribute exists in the HTML document.
3. Ensure that the nonce value is correctly set and available in the runtime environment.
4. Inspect the rendered HTML output to confirm the presence of the nonce attribute on <style> elements.
5. Test across different environments, including various browser versions.
6. Check for any error messages related to CSP violations or nonce handling in the browser console.
7. Review the documentation and community resources for any known issues or best practices regarding nonce handling.

Code Reproduction URL

https://github.com/AliKdhim87/configure-csp-nextjs-with-stenciljs

Additional Information

Screenshots:

[tanner-reits]

Hey @AliKdhim87!

Thanks for the issue! Do you know if this is a problem without Next.js in the equation? The reproduction feels a bit complicated at the moment, so it would be great if we could strip out some aspects to help isolate the issue!