From d913a6ff6d4d87fe6f0e5c2a1d564889475e38a1 Mon Sep 17 00:00:00 2001
From: Drew Hess <src@drewhess.com>
Date: Wed, 10 Apr 2024 21:56:15 +0100
Subject: [PATCH] chore: switch to ES modules

Sadly, quite a few of our tools don't support ES modules, so we need
to rename a few things to `.cjs`. Sigh.

Also, we don't need the `PkgConfig` plugin for Vite, which also a)
doesn't work with ES modules and b) isn't maintained anymore, anyway.

Signed-off-by: Drew Hess <src@drewhess.com>
---
 .eslintrc.js => .eslintrc.cjs |  0
 package.json                  |  2 ++
 pnpm-lock.yaml                | 20 ++++++++++++++++++++
 postcss.config.cjs            |  6 ++++++
 postcss.config.js             |  6 ------
 tsconfig.base.json            |  2 +-
 vite.config.ts                |  2 --
 7 files changed, 29 insertions(+), 9 deletions(-)
 rename .eslintrc.js => .eslintrc.cjs (100%)
 create mode 100644 postcss.config.cjs
 delete mode 100644 postcss.config.js

diff --git a/.eslintrc.js b/.eslintrc.cjs
similarity index 100%
rename from .eslintrc.js
rename to .eslintrc.cjs
diff --git a/package.json b/package.json
index 94ecc152..818bc173 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "node": "^18.6.0 || ^19.0 || ^20.0",
     "pnpm": "^8.5"
   },
+  "type": "module",
   "scripts": {
     "watch": "vite",
     "build": "vite build",
@@ -79,6 +80,7 @@
     "orval": "^6.26.0",
     "postcss": "^8.4.38",
     "postcss-import": "^16.1.0",
+    "postcss-load-config": "^5.0.3",
     "prettier": "^3.2.5",
     "storybook": "^7.5.1",
     "tailwindcss": "3.4.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 011542f1..df708403 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -182,6 +182,9 @@ devDependencies:
   postcss-import:
     specifier: ^16.1.0
     version: 16.1.0(postcss@8.4.38)
+  postcss-load-config:
+    specifier: ^5.0.3
+    version: 5.0.3(postcss@8.4.38)
   prettier:
     specifier: ^3.2.5
     version: 3.2.5
@@ -11179,6 +11182,23 @@ packages:
       yaml: 2.4.1
     dev: true
 
+  /postcss-load-config@5.0.3(postcss@8.4.38):
+    resolution: {integrity: sha512-90pBBI5apUVruIEdCxZic93Wm+i9fTrp7TXbgdUCH+/L+2WnfpITSpq5dFU/IPvbv7aNiMlQISpUkAm3fEcvgQ==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      jiti: '>=1.21.0'
+      postcss: '>=8.0.9'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+      postcss:
+        optional: true
+    dependencies:
+      lilconfig: 3.1.1
+      postcss: 8.4.38
+      yaml: 2.4.1
+    dev: true
+
   /postcss-nested@6.0.1(postcss@8.4.38):
     resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
     engines: {node: '>=12.0'}
diff --git a/postcss.config.cjs b/postcss.config.cjs
new file mode 100644
index 00000000..29237ec1
--- /dev/null
+++ b/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {} || null,
+    autoprefixer: {} || null,
+  },
+};
diff --git a/postcss.config.js b/postcss.config.js
deleted file mode 100644
index 12a703d9..00000000
--- a/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 8be4931d..3706751d 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -10,7 +10,7 @@
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": false,
     "skipLibCheck": false,
-    "esModuleInterop": false,
+    "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
diff --git a/vite.config.ts b/vite.config.ts
index 27e1bc1e..df1c12fb 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,7 +2,6 @@ import { defineConfig, loadEnv } from "vite";
 import svgr from "vite-plugin-svgr";
 import react from "@vitejs/plugin-react";
 import { checker } from "vite-plugin-checker";
-import PkgConfig from "vite-plugin-package-config";
 import tsconfigPaths from "vite-tsconfig-paths";
 import vitePluginFaviconsInject from "vite-plugin-favicons-inject";
 
@@ -22,7 +21,6 @@ export default ({ mode }) => {
       react(),
       svgr(),
       tsconfigPaths(),
-      PkgConfig(),
       // Can cause issues in development mode, and with Storybook builds. See:
       // https://github.com/JohnPremKumar/vite-plugin-favicons-inject#development-mode
       process.env.VITE_API_URL !== ""