Use the `node:` protocol in ServerStyleSheet.tsx

[hawkup]

Use Case

I'm trying to use ServerStyleSheet to render styles on Cloudflare Workers with styled-components. ServerStyleSheet relies on stream’s built-in Node.js modules, which aren't provided by default in the Cloudflare Workers' Node.js runtime API. To polyfill this API, I need to set compatibility flags. However, the Node.js runtime is accessible only under the node: prefix. It's unable to import from "stream" directly; instead, we need to use the node: prefix to make it available.

From the Cloudflare Worker documentation (https://developers.cloudflare.com/workers/runtime-apis/nodejs/)

Node.js APIs are available under the node: prefix, and this prefix must be used when importing modules, both in your code and the npm packages you depend on.

// Do this:
import { Buffer } from 'node:buffer';

// Do not do this:
import { Buffer } from 'buffer';

And the benefits of using the node: protocol.

• Makes it perfectly clear that the import is a Node.js builtin module. (Beginners don't always realize this)
• Makes the import identifier a valid absolute URL.
• Avoids conflicts for future Node.js builtin modules.

ref: https://github.com/nodejs/node/issues/38343#issue-864698633

Solution

Add the node: prefix to all import/require stream modules in packages/styled-components/src/models/ServerStyleSheet.tsx.

Concern

• The node: protocol is supported in Node.js starting from:
  • v16.0.0, v14.18.0 (ESM import and CommonJS require())
  • v14.13.1, v12.20.0 (only ESM import)
• It is supported in TypeScript @types/node version >= v16.0.0.

Additional

If you agree to add node: prefix, could you please consider releasing the same changes under styled-components version 5? I'm currently using primer/react, which still relies on styled-component version 5. And I'd be happy to contribute this if you want