Fix typescript issue

.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": [

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:^"

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"]

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"]
 }

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}'"
   },

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
   }
 }

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"]

packages/pigment-css-utils/package.json

@@ -91,6 +91,9 @@
       "build": {
         "outputs": [
           "{projectRoot}/build"
+        ],
+        "dependsOn": [
+          "^build"
         ]
       }
     }

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"
+    }
+  ]
 }

packages/pigment-css-utils/tsconfig.json

@@ -1,29 +1,11 @@
 {
   "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",
     "src/**/*.ts",
     "tests/**/*.spec.ts",
     "tests/**/*.spec.tsx"
   ],
-  "exclude": ["./tsup.config.ts"],
-  "references": [
-    {
-      "path": "../pigment-css-theme"
-    }
-  ]
+  "exclude": ["./tsup.config.ts"]
 }

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",

packages/pigment-css-vite-plugin/tsconfig.build.json

@@ -1,9 +1,6 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "composite": false,
-    "paths": {
-      "@babel/core": ["./node_modules/@babel/core"]
-    }
+    "composite": false
   }
 }

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"]

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"]
 }

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(