[pigment-css][demo] Remove app specific pnpm workspace

and revert to using project workspace.
Also fix a minor typing issue in the Vite app.

apps/README.md

@@ -0,0 +1,9 @@
+# Pigment CSS apps
+
+To test Pigment CSS demo apps, you can directly run -
+
+`pnpm nx run @app/vite-app:preview` to start vite demo or `pnpm nx run @app/next-app:preview` to start nextjs demo after building automatically.
+
+To start either of the apps in dev mode, just run -
+
+`pnpm nx run @app/vite-app:dev` or `pnpm nx run @app/next-app:dev`

apps/pigment-css-next-app/package.json

@@ -9,26 +9,34 @@
     "clean": "rimraf .next"
   },
   "dependencies": {
-    "@pigment-css/react": "file:../../packages/pigment-css-react",
-    "@mui/utils": "file:../../packages/mui-utils/build",
-    "@mui/base": "file:../../packages/mui-base/build",
-    "@mui/material": "file:../../packages/mui-material/build",
-    "@mui/system": "file:../../packages/mui-system/build",
-    "@mui/material-nextjs": "file:../../packages/mui-material-nextjs/build",
-    "@mui/icons-material": "file:../../packages/mui-icons-material/build",
+    "@pigment-css/react": "workspace:^",
+    "@mui/utils": "workspace:^",
+    "@mui/base": "workspace:^",
+    "@mui/material": "workspace:^",
+    "@mui/system": "workspace:^",
+    "@mui/material-nextjs": "workspace:^",
+    "@mui/icons-material": "workspace:^",
     "@emotion/cache": "latest",
     "local-ui-lib": "workspace:^",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "next": "latest"
   },
   "devDependencies": {
-    "@pigment-css/unplugin": "file:../../packages/pigment-css-unplugin",
-    "@pigment-css/nextjs-plugin": "file:../../packages/pigment-css-nextjs-plugin",
+    "@pigment-css/nextjs-plugin": "workspace:^",
     "@types/node": "^20.5.7",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "eslint": "^8.56.0",
     "typescript": "^5.3.3"
+  },
+  "nx": {
+    "targets": {
+      "preview": {
+        "dependsOn": [
+          "^build"
+        ]
+      }
+    }
   }
 }

apps/pigment-css-vite-app/package.json

@@ -9,12 +9,12 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@pigment-css/react": "file:../../packages/pigment-css-react",
-    "@mui/utils": "file:../../packages/mui-utils/build",
-    "@mui/base": "file:../../packages/mui-base/build",
-    "@mui/material": "file:../../packages/mui-material/build",
-    "@mui/system": "file:../../packages/mui-system/build",
-    "@mui/icons-material": "file:../../packages/mui-icons-material/build",
+    "@pigment-css/react": "workspace:^",
+    "@mui/utils": "workspace:^",
+    "@mui/base": "workspace:^",
+    "@mui/material": "workspace:^",
+    "@mui/system": "workspace:^",
+    "@mui/icons-material": "workspace:^",
     "clsx": "^2.1.0",
     "local-ui-lib": "workspace:^",
     "react": "^18.2.0",
@@ -26,13 +26,22 @@
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@pigment-css/vite-plugin": "file:../../packages/pigment-css-vite-plugin",
+    "@pigment-css/vite-plugin": "workspace:^",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "@vitejs/plugin-react": "^4.2.1",
     "postcss": "^8.4.35",
     "postcss-combine-media-query": "^1.0.1",
     "vite": "5.0.12",
     "vite-plugin-pages": "^0.32.0"
+  },
+  "nx": {
+    "targets": {
+      "preview": {
+        "dependsOn": [
+          "^build"
+        ]
+      }
+    }
   }
 }

apps/pigment-css-vite-app/vite-env.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="vite/client" />
-/// <reference types="vite-plugin-pages/client" />
+/// <reference types="vite-plugin-pages/client-react" />

apps/pigment-css-vite-app/vite.config.ts

@@ -1,3 +1,4 @@
+import * as path from 'node:path';
 import { defineConfig, splitVendorChunkPlugin } from 'vite';
 import reactPlugin from '@vitejs/plugin-react';
 import Pages from 'vite-plugin-pages';
@@ -14,6 +15,7 @@ theme.getColorSchemeSelector = (colorScheme) => {
 const { css: rootCss } = theme.generateCssVars();
 const { css: lightCss } = theme.generateCssVars('light');
 const { css: darkCss } = theme.generateCssVars('dark');
+// @ts-expect-error @TODO - Fix this
 theme.generateCssVars = (colorScheme) => {
   if (colorScheme === 'dark') {
     return {
@@ -35,6 +37,7 @@ export default defineConfig({
   plugins: [
     reactPlugin({ include: /\.(mdx|js|jsx|ts|tsx)$/ }),
     pigment({
+      // @ts-expect-error @TODO - Fix this
       theme,
       transformLibraries: ['local-ui-lib', '@mui/material'],
       sourceMap: true,
@@ -54,6 +57,15 @@ export default defineConfig({
         find: /^@mui\/icons-material\/(.*)/,
         replacement: '@mui/icons-material/esm/$1',
       },
+      {
+        find: /^@pigment-css\/react$/,
+        // There is a weird issue on the CI where Vite/Rollup isn't able to resolve
+        // the path for pigment-css/react in this monodrep. This is a temporary workaround. It does not
+        // affect local development or end-user projects.
+        replacement: path.resolve(
+          path.join(process.cwd(), 'node_modules/@pigment-css/react/build/index.mjs'),
+        ),
+      },
     ],
   },
 });