From e1c0ebc23bab80e689eea2c5de8a6d36bc87842d Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijesh42@gmail.com>
Date: Mon, 9 Dec 2024 20:10:29 +0530
Subject: [PATCH] Fix typescript issue

---
 .codesandbox/ci.json                          |  4 +++-
 .../pigment-css-nextjs-plugin/package.json    |  2 +-
 .../pigment-css-nextjs-plugin/tsconfig.json   |  3 +--
 packages/pigment-css-theme/tsconfig.json      | 18 +----------------
 packages/pigment-css-unplugin/package.json    |  2 +-
 .../pigment-css-unplugin/tsconfig.build.json  |  5 +----
 packages/pigment-css-unplugin/tsconfig.json   | 10 +---------
 packages/pigment-css-utils/package.json       |  3 +++
 .../pigment-css-utils/tsconfig.build.json     |  8 +++++++-
 packages/pigment-css-utils/tsconfig.json      | 20 +------------------
 packages/pigment-css-vite-plugin/package.json |  2 +-
 .../pigment-css-vite-plugin/tsconfig.json     |  7 +------
 tsconfig.json                                 | 18 ++++++++++++-----
 webpackBaseConfig.js                          |  2 ++
 14 files changed, 37 insertions(+), 67 deletions(-)

diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
index 353cbc74..c0c0acd0 100644
--- a/.codesandbox/ci.json
+++ b/.codesandbox/ci.json
@@ -3,9 +3,11 @@
   "installCommand": "install:codesandbox",
   "node": "18",
   "packages": [
+    "packages/pigment-css-nextjs-plugin",
     "packages/pigment-css-react",
+    "packages/pigment-css-theme",
     "packages/pigment-css-unplugin",
-    "packages/pigment-css-nextjs-plugin",
+    "packages/pigment-css-utils",
     "packages/pigment-css-vite-plugin"
   ],
   "sandboxes": [
diff --git a/packages/pigment-css-nextjs-plugin/package.json b/packages/pigment-css-nextjs-plugin/package.json
index 7ccd6f82..21252bcf 100644
--- a/packages/pigment-css-nextjs-plugin/package.json
+++ b/packages/pigment-css-nextjs-plugin/package.json
@@ -25,7 +25,7 @@
     "watch": "tsup --watch --tsconfig tsconfig.build.json",
     "copy-license": "node ../../scripts/pigment-license.mjs",
     "build": "tsup --tsconfig tsconfig.build.json",
-    "typecheck": "tsc --noEmit -p ."
+    "typescript": "tsc --noEmit -p ."
   },
   "dependencies": {
     "@pigment-css/unplugin": "workspace:^"
diff --git a/packages/pigment-css-nextjs-plugin/tsconfig.json b/packages/pigment-css-nextjs-plugin/tsconfig.json
index ad4f42a8..a9b99264 100644
--- a/packages/pigment-css-nextjs-plugin/tsconfig.json
+++ b/packages/pigment-css-nextjs-plugin/tsconfig.json
@@ -1,8 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "resolveJsonModule": true,
-    "target": "ES2015"
+    "skipLibCheck": true
   },
   "include": ["src/**/*.ts"],
   "exclude": ["./tsup.config.ts"]
diff --git a/packages/pigment-css-theme/tsconfig.json b/packages/pigment-css-theme/tsconfig.json
index 7794cc4c..5682dcf5 100644
--- a/packages/pigment-css-theme/tsconfig.json
+++ b/packages/pigment-css-theme/tsconfig.json
@@ -1,21 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "target": "ES2015",
-    "allowJs": true,
-    "lib": ["ES2017", "ES2021.String", "DOM"],
-    "composite": true,
-    "noEmit": false,
-    "resolveJsonModule": true,
-    "types": ["node", "mocha"],
-    "jsx": "react-jsx"
-  },
-  "include": [
-    "src/**/*.tsx",
-    "src/**/*.js",
-    "src/**/*.ts",
-    "tests/**/*.spec.ts",
-    "tests/**/*.spec.tsx"
-  ],
+  "include": ["src/**/*.js", "src/**/*.ts", "tests/**/*.spec.ts"],
   "exclude": ["./tsup.config.ts"]
 }
diff --git a/packages/pigment-css-unplugin/package.json b/packages/pigment-css-unplugin/package.json
index 846d08ec..11ffa663 100644
--- a/packages/pigment-css-unplugin/package.json
+++ b/packages/pigment-css-unplugin/package.json
@@ -25,7 +25,7 @@
     "watch": "tsup --watch --tsconfig tsconfig.build.json",
     "copy-license": "node ../../scripts/pigment-license.mjs",
     "build": "tsup --tsconfig tsconfig.build.json",
-    "typecheck": "tsc --noEmit -p .",
+    "typescript": "tsc --noEmit -p .",
     "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/pigment-css-unplugin/**/*.test.{js,ts,tsx}'",
     "test:ci": "cd ../../ && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov --report-dir=./coverage/pigment-css-unplugin mocha 'packages/pigment-css-unplugin/**/*.test.{js,ts,tsx}'"
   },
diff --git a/packages/pigment-css-unplugin/tsconfig.build.json b/packages/pigment-css-unplugin/tsconfig.build.json
index 9bb90e12..80b6a0a8 100644
--- a/packages/pigment-css-unplugin/tsconfig.build.json
+++ b/packages/pigment-css-unplugin/tsconfig.build.json
@@ -1,9 +1,6 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "composite": false,
-    "paths": {
-      "@babel/core": ["./node_modules/@babel/core"]
-    }
+    "composite": false
   }
 }
diff --git a/packages/pigment-css-unplugin/tsconfig.json b/packages/pigment-css-unplugin/tsconfig.json
index b11b8a61..a9b99264 100644
--- a/packages/pigment-css-unplugin/tsconfig.json
+++ b/packages/pigment-css-unplugin/tsconfig.json
@@ -1,15 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "resolveJsonModule": true,
-    "target": "ES2022",
-    "lib": ["ES2021", "DOM"],
-    "paths": {
-      "@babel/core": ["./node_modules/@babel/core"],
-      "@pigment-css/react": ["./packages/pigment-css-react/src"],
-      "@pigment-css/react/*": ["./packages/pigment-css-react/src/*"]
-    },
-    "types": ["node", "mocha", "chai"]
+    "skipLibCheck": true
   },
   "include": ["src/**/*.ts"],
   "exclude": ["./tsup.config.ts"]
diff --git a/packages/pigment-css-utils/package.json b/packages/pigment-css-utils/package.json
index c5f7d64f..3da095c1 100644
--- a/packages/pigment-css-utils/package.json
+++ b/packages/pigment-css-utils/package.json
@@ -91,6 +91,9 @@
       "build": {
         "outputs": [
           "{projectRoot}/build"
+        ],
+        "dependsOn": [
+          "^build"
         ]
       }
     }
diff --git a/packages/pigment-css-utils/tsconfig.build.json b/packages/pigment-css-utils/tsconfig.build.json
index 58bde1b8..0754eed4 100644
--- a/packages/pigment-css-utils/tsconfig.build.json
+++ b/packages/pigment-css-utils/tsconfig.build.json
@@ -3,5 +3,11 @@
   "compilerOptions": {
     "composite": false
   },
-  "exclude": ["./tsup.config.ts", "src/**/*.d.ts", "tests"]
+  "exclude": ["./tsup.config.ts", "src/**/*.d.ts", "tests"],
+
+  "references": [
+    {
+      "path": "../pigment-css-theme/tsconfig.build.json"
+    }
+  ]
 }
diff --git a/packages/pigment-css-utils/tsconfig.json b/packages/pigment-css-utils/tsconfig.json
index d4e79d5d..00ad5535 100644
--- a/packages/pigment-css-utils/tsconfig.json
+++ b/packages/pigment-css-utils/tsconfig.json
@@ -1,18 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "target": "ES2015",
-    "allowJs": true,
-    "lib": ["ES2017", "ES2021.String"],
-    "composite": true,
-    "noEmit": false,
-    "resolveJsonModule": true,
-    "types": ["node", "mocha"],
-    "jsx": "react-jsx",
-    "paths": {
-      "@babel/parser": ["./node_modules/@babel/parser/typings/babel-parser.d.ts"]
-    }
-  },
   "include": [
     "src/**/*.tsx",
     "src/**/*.js",
@@ -20,10 +7,5 @@
     "tests/**/*.spec.ts",
     "tests/**/*.spec.tsx"
   ],
-  "exclude": ["./tsup.config.ts"],
-  "references": [
-    {
-      "path": "../pigment-css-theme"
-    }
-  ]
+  "exclude": ["./tsup.config.ts"]
 }
diff --git a/packages/pigment-css-vite-plugin/package.json b/packages/pigment-css-vite-plugin/package.json
index bbbde65f..f8b71f68 100644
--- a/packages/pigment-css-vite-plugin/package.json
+++ b/packages/pigment-css-vite-plugin/package.json
@@ -25,7 +25,7 @@
     "watch": "tsup --watch",
     "copy-license": "node ../../scripts/pigment-license.mjs",
     "build": "tsup",
-    "typecheck": "tsc --noEmit -p ."
+    "typescript": "tsc --noEmit -p ."
   },
   "dependencies": {
     "@babel/core": "^7.26.0",
diff --git a/packages/pigment-css-vite-plugin/tsconfig.json b/packages/pigment-css-vite-plugin/tsconfig.json
index b7872967..cecf2581 100644
--- a/packages/pigment-css-vite-plugin/tsconfig.json
+++ b/packages/pigment-css-vite-plugin/tsconfig.json
@@ -1,12 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "target": "ES2022",
-    "paths": {
-      "@babel/core": ["./node_modules/@babel/core"],
-      "@pigment-css/react": ["./packages/pigment-css-react/src"],
-      "@pigment-css/react/*": ["./packages/pigment-css-react/src/*"]
-    }
+    "skipLibCheck": true
   },
   "include": ["src/**/*"],
   "exclude": ["./tsup.config.ts"]
diff --git a/tsconfig.json b/tsconfig.json
index 8cde21c6..5c4728e4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,10 +1,11 @@
 {
   "compilerOptions": {
     "module": "esnext",
-    "target": "es5",
-    "lib": ["es2020", "dom"],
+    // aligning with Node18 recommendation: https://www.npmjs.com/package/@tsconfig/node18
+    "target": "es2022",
+    "lib": ["es2020", "dom", "ES2021.String"],
     "jsx": "preserve",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noEmit": true,
@@ -17,16 +18,23 @@
       "@pigment-css/nextjs-plugin": ["./packages/pigment-css-nextjs-plugin/src"],
       "@pigment-css/nextjs-plugin/*": ["./packages/pigment-css-nextjs-plugin/src/*"],
       "@pigment-css/react": ["./packages/pigment-css-react/src"],
+      "@pigment-css/react/utils": ["./packages/pigment-css-react/src/utils"],
+      "@pigment-css/react/internal": ["./packages/pigment-css-react/src/internal"],
       "@pigment-css/react/*": ["./packages/pigment-css-react/src/*"],
+      "@pigment-css/unplugin": ["./packages/pigment-css-unplugin/src"],
       "@pigment-css/vite-plugin": ["./packages/pigment-css-vite-plugin/src"],
       "@pigment-css/vite-plugin/*": ["./packages/pigment-css-vite-plugin/src/*"],
       "@mui-internal/api-docs-builder": ["./node_modules/@mui/monorepo/packages/api-docs-builder"],
       "@mui-internal/api-docs-builder/*": [
         "./node_modules/@mui/monorepo/packages/api-docs-builder/*"
-      ]
+      ],
+      "@pigment-css/theme": ["./packages/pigment-css-theme/src"],
+      "@pigment-css/theme/*": ["./packages/pigment-css-theme/src/*"],
+      "@pigment-css/utils": ["./packages/pigment-css-utils/src"],
+      "@pigment-css/utils/*": ["./packages/pigment-css-utils/src/*"]
     },
     // Otherwise we get react-native typings which conflict with dom.lib.
-    "types": ["node", "react"]
+    "types": ["node", "react", "mocha"]
   },
   "exclude": ["**/.*/", "**/build", "**/node_modules", "docs/export"]
 }
diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js
index 81ba4200..8a88e561 100644
--- a/webpackBaseConfig.js
+++ b/webpackBaseConfig.js
@@ -9,6 +9,8 @@ module.exports = {
   resolve: {
     modules: [__dirname, 'node_modules'],
     alias: {
+      '@pigment-css/theme': path.resolve(__dirname, './packages/pigment-css-theme/src'),
+      '@pigment-css/utils': path.resolve(__dirname, './packages/pigment-css-utils/src'),
       '@pigment-css/react': path.resolve(__dirname, './packages/pigment-css-react/src'),
       docs: path.resolve(__dirname, './docs'),
       '@mui-internal/api-docs-builder': path.resolve(