From 40de3adc627e578d5f8c4054d1fe0faa55c9e855 Mon Sep 17 00:00:00 2001
From: Steve Taylor <mail@stevetaylor.io>
Date: Thu, 7 Jul 2022 02:16:30 +1000
Subject: [PATCH] fix: Support ESM in Node.js through conditional exports

---
 packages/styled-components/macro/package.json      |  4 ++--
 packages/styled-components/native/package.json     |  4 ++--
 packages/styled-components/package.json            | 10 ++++++++--
 packages/styled-components/primitives/package.json |  4 ++--
 packages/styled-components/rollup.config.js        | 10 +++++-----
 5 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/packages/styled-components/macro/package.json b/packages/styled-components/macro/package.json
index 99a2079de..9e8d47ebc 100644
--- a/packages/styled-components/macro/package.json
+++ b/packages/styled-components/macro/package.json
@@ -3,6 +3,6 @@
   "private": true,
   "types": "../dist/index.d.ts",
   "main": "../dist/styled-components-macro.cjs.js",
-  "module": "../dist/styled-components-macro.esm.js",
-  "jsnext:main": "../dist/styled-components-macro.esm.js"
+  "module": "../dist/styled-components-macro.esm.mjs",
+  "jsnext:main": "../dist/styled-components-macro.esm.mjs"
 }
diff --git a/packages/styled-components/native/package.json b/packages/styled-components/native/package.json
index 51712e42c..f0f6ef52e 100644
--- a/packages/styled-components/native/package.json
+++ b/packages/styled-components/native/package.json
@@ -3,6 +3,6 @@
   "private": true,
   "types": "./dist/native/index.d.ts",
   "main": "./dist/styled-components.native.cjs.js",
-  "jsnext:main": "./dist/styled-components.native.esm.js",
-  "module": "./dist/styled-components.native.esm.js"
+  "jsnext:main": "./dist/styled-components.native.esm.mjs",
+  "module": "./dist/styled-components.native.esm.mjs"
 }
diff --git a/packages/styled-components/package.json b/packages/styled-components/package.json
index c5168f49d..d04fc72e7 100644
--- a/packages/styled-components/package.json
+++ b/packages/styled-components/package.json
@@ -4,10 +4,16 @@
   "description": "Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress",
   "types": "dist/index.d.ts",
   "main": "dist/styled-components.cjs.js",
-  "module": "dist/styled-components.esm.js",
+  "module": "dist/styled-components.esm.mjs",
   "react-native": "native/dist/styled-components.native.cjs.js",
+  "exports": {
+    ".": {
+      "import": "./dist/styled-components.esm.mjs",
+      "require": "./dist/styled-components.cjs.js"
+    }
+  },
   "browser": {
-    "./dist/styled-components.esm.js": "./dist/styled-components.browser.esm.js",
+    "./dist/styled-components.esm.mjs": "./dist/styled-components.browser.esm.mjs",
     "./dist/styled-components.cjs.js": "./dist/styled-components.browser.cjs.js"
   },
   "sideEffects": [
diff --git a/packages/styled-components/primitives/package.json b/packages/styled-components/primitives/package.json
index 6cdb99793..2b4bd6145 100644
--- a/packages/styled-components/primitives/package.json
+++ b/packages/styled-components/primitives/package.json
@@ -3,6 +3,6 @@
   "private": true,
   "types": "./dist/primitives/index.d.ts",
   "main": "./dist/styled-components-primitives.cjs.js",
-  "module": "./dist/styled-components-primitives.esm.js",
-  "jsnext:main": "./dist/styled-components-primitives.esm.js"
+  "module": "./dist/styled-components-primitives.esm.mjs",
+  "jsnext:main": "./dist/styled-components-primitives.esm.mjs"
 }
diff --git a/packages/styled-components/rollup.config.js b/packages/styled-components/rollup.config.js
index fb1d34705..35b9ec140 100644
--- a/packages/styled-components/rollup.config.js
+++ b/packages/styled-components/rollup.config.js
@@ -104,7 +104,7 @@ const standaloneProdConfig = {
 const serverConfig = {
   ...configBase,
   output: [
-    getESM({ file: 'dist/styled-components.esm.js' }),
+    getESM({ file: 'dist/styled-components.esm.mjs' }),
     getCJS({ file: 'dist/styled-components.cjs.js' }),
   ],
   plugins: configBase.plugins.concat(
@@ -119,7 +119,7 @@ const serverConfig = {
 const browserConfig = {
   ...configBase,
   output: [
-    getESM({ file: 'dist/styled-components.browser.esm.js' }),
+    getESM({ file: 'dist/styled-components.browser.esm.mjs' }),
     getCJS({ file: 'dist/styled-components.browser.cjs.js' }),
   ],
   plugins: configBase.plugins.concat(
@@ -138,7 +138,7 @@ const nativeConfig = {
       file: 'native/dist/styled-components.native.cjs.js',
     }),
     getESM({
-      file: 'native/dist/styled-components.native.esm.js',
+      file: 'native/dist/styled-components.native.esm.mjs',
     }),
   ],
 };
@@ -147,7 +147,7 @@ const primitivesConfig = {
   ...configBase,
   input: './src/primitives/index.ts',
   output: [
-    getESM({ file: 'primitives/dist/styled-components-primitives.esm.js' }),
+    getESM({ file: 'primitives/dist/styled-components-primitives.esm.mjs' }),
     getCJS({
       file: 'primitives/dist/styled-components-primitives.cjs.js',
     }),
@@ -162,7 +162,7 @@ const primitivesConfig = {
 const macroConfig = Object.assign({}, configBase, {
   input: './src/macro/index.ts',
   output: [
-    getESM({ file: 'dist/styled-components-macro.esm.js' }),
+    getESM({ file: 'dist/styled-components-macro.esm.mjs' }),
     getCJS({ file: 'dist/styled-components-macro.cjs.js' }),
   ],
   plugins: configBase.plugins.concat(