The nonce attr is not added to the <style> tag during SSR since v5.2.1+

[stepchowfun]

Environment

System:

• OS: macOS 11.5.2
• CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
• Memory: 83.88 MB / 16.00 GB
• Shell: 5.8 - /usr/local/bin/zsh

Binaries:

• Node: 16.7.0 - ~/.nvm/versions/node/v16.7.0/bin/node
• npm: 7.20.3 - ~/.nvm/versions/node/v16.7.0/bin/npm

npmPackages:

• styled-components: ^5.3.1 => 5.3.1

Steps to reproduce

This is affecting a project I'm working on, but unfortunately that project is not easy to set up. But it's easy to confirm this issue by looking in styled-components' generated dist folder. Any of the generated js files (styled-components.cjs.js is the one I'm using) reveals the problem. This function:

export default function getNonce() {
  return typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;
}

...is transpiled into:

function(){return"undefined"!=typeof window&&void 0!==window.__webpack_nonce__?window.__webpack_nonce__:null}

Specifically, the problem is that __webpack_nonce__ becomes window.__webpack_nonce__, and window does not exist server-side. So the returned nonce is null instead of the actual nonce.

The end result is that the browser rejects the style tag (due to CSP), and you get a page of unstyled content.

If it helps, I believe the bug was introduced by #3308. I can confirm that the bug does not exist in v5.2.0, but it does exist in v5.2.1 and every 5.x.x version since.

Expected Behavior

When __webpack_nonce__ is set on the global object, the <style> tag generated by server-side rendering looks like this:

<style nonce="T3e7m/F76YzluqD0I1VF3Q==" data-styled="true" data-styled-version="5.3.1">

Actual Behavior

Whether or not __webpack_nonce__ is set on the global object, the <style> tag generated by server-side rendering looks like this:

<style data-styled="true" data-styled-version="5.3.1">

[quantizor]

@stepchowfun want to take a stab at fixing this?

[stepchowfun]

Unfortunately, I don't have the bandwidth.