core: Bump package versions and fix related TS errors (#294)

Co-authored-by: Brijesh Bittu <[email protected]>

apps/pigment-css-next-app/next.config.js

@@ -1,7 +1,7 @@
 /* eslint-env node */
 // eslint-ignore-next-line import/no-unresolved
 const { withPigment } = require('@pigment-css/nextjs-plugin');
-const { experimental_extendTheme: extendTheme } = require('@mui/material/styles');
+const { extendTheme } = require('@mui/material/styles');
 
 /**
  * @typedef {import('@pigment-css/nextjs-plugin').PigmentOptions} PigmentOptions

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

@@ -10,18 +10,18 @@
   },
   "dependencies": {
     "@pigment-css/react": "workspace:^",
-    "@mui/material": "^5.16.6",
-    "@mui/material-nextjs": "^5.16.6",
+    "@mui/material": "^6.1.6",
+    "@mui/material-nextjs": "^6.1.6",
     "local-ui-lib": "workspace:^",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "next": "latest"
+    "next": "15.0.2"
   },
   "devDependencies": {
     "@pigment-css/nextjs-plugin": "workspace:^",
-    "@types/node": "^20.5.7",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.2.19",
+    "@types/node": "^18.19.63",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "eslint": "^8.57.0",
     "typescript": "^5.4.4"
   },

apps/pigment-css-next-app/src/app/page.tsx

@@ -1,7 +1,6 @@
 import Image from 'next/image';
 import { styled, css } from '@pigment-css/react';
 import Stack from '@pigment-css/react/Stack';
-import Chip from '@mui/material/Chip';
 import styles from './page.module.css';
 
 declare global {
@@ -205,17 +204,6 @@ export default function Home() {
           </h2>
           <p>Instantly deploy your Next.js site to a shareable URL with Vercel.</p>
         </a>
-        <Chip
-          sx={{
-            color: 'red',
-            backgroundColor: 'blue',
-            '&:hover': {
-              color: 'blue',
-              backgroundColor: 'red',
-            },
-          }}
-          label="Hello"
-        />
       </div>
     </Main>
   );

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

@@ -10,31 +10,31 @@
   },
   "dependencies": {
     "@pigment-css/react": "workspace:^",
-    "@mui/utils": "next",
-    "@mui/base": "next",
-    "@mui/lab": "next",
-    "@mui/material": "next",
-    "@mui/system": "next",
-    "@mui/icons-material": "next",
-    "clsx": "^2.1.0",
+    "@mui/utils": "6.1.6",
+    "@mui/base": "5.0.0-beta.61",
+    "@mui/lab": "6.0.0-beta.14",
+    "@mui/material": "6.1.6",
+    "@mui/system": "6.1.6",
+    "@mui/icons-material": "6.1.6",
+    "clsx": "^2.1.1",
     "local-ui-lib": "workspace:^",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-error-boundary": "^4.0.13",
-    "react-router": "^6.22.3",
-    "react-router-dom": "^6.22.3"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-error-boundary": "^4.1.2",
+    "react-router": "^6.27.0",
+    "react-router-dom": "^6.27.0"
   },
   "devDependencies": {
-    "@babel/preset-react": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.1",
+    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-typescript": "^7.26.0",
     "@pigment-css/vite-plugin": "workspace:^",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^4.2.1",
-    "postcss": "^8.4.38",
+    "@vitejs/plugin-react": "^4.3.3",
+    "postcss": "^8.4.47",
     "postcss-combine-media-query": "^1.0.1",
-    "vite": "5.2.8",
-    "vite-plugin-pages": "^0.32.1"
+    "vite": "5.4.10",
+    "vite-plugin-pages": "^0.32.3"
   },
   "nx": {
     "targets": {

package.json

@@ -49,33 +49,33 @@
     "globby": "^14.0.1"
   },
   "devDependencies": {
-    "@argos-ci/core": "^2.0.0",
-    "@babel/cli": "^7.24.1",
-    "@babel/core": "^7.24.4",
-    "@babel/node": "^7.23.9",
-    "@babel/plugin-transform-react-constant-elements": "^7.24.1",
-    "@babel/plugin-transform-runtime": "^7.24.3",
-    "@babel/preset-env": "^7.24.4",
-    "@babel/preset-react": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.1",
-    "@mui/internal-docs-utils": "^1.0.4",
-    "@mui/internal-markdown": "^1.0.1",
-    "@mui/internal-scripts": "^1.0.3",
-    "@mui/internal-test-utils": "1.0.0-dev.20240529-082515-213b5e33ab",
+    "@argos-ci/core": "^2.10.0",
+    "@babel/cli": "^7.25.9",
+    "@babel/core": "^7.26.0",
+    "@babel/node": "^7.26.0",
+    "@babel/plugin-transform-react-constant-elements": "^7.25.9",
+    "@babel/plugin-transform-runtime": "^7.25.9",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-typescript": "^7.26.0",
+    "@mui/internal-docs-utils": "^1.0.15",
+    "@mui/internal-markdown": "^1.0.19",
+    "@mui/internal-scripts": "^1.0.26",
+    "@mui/internal-test-utils": "1.0.19",
     "@mui/monorepo": "github:mui/material-ui#a25a365a4c66738f358ecd745bf3727c0ca9d5b6",
-    "@next/eslint-plugin-next": "^14.1.4",
-    "@octokit/rest": "^20.1.0",
-    "@playwright/test": "1.43.0",
+    "@next/eslint-plugin-next": "^15.0.2",
+    "@octokit/rest": "^21.0.2",
+    "@playwright/test": "1.48.2",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash": "^4.17.0",
     "@types/mocha": "^10.0.6",
-    "@types/node": "^18.19.30",
-    "@types/react": "^18.3.3",
+    "@types/node": "^18.19.63",
+    "@types/react": "^18.3.12",
     "@types/yargs": "^17.0.32",
     "@typescript-eslint/eslint-plugin": "^7.5.0",
     "@typescript-eslint/parser": "^7.5.0",
     "babel-plugin-istanbul": "^6.1.1",
-    "babel-plugin-module-resolver": "^5.0.0",
+    "babel-plugin-module-resolver": "^5.0.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "chalk": "^5.3.0",
     "cpy-cli": "^5.0.0",
@@ -105,7 +105,7 @@
     "nx": "^18.2.3",
     "nyc": "^15.1.0",
     "postcss-styled-syntax": "^0.6.4",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.3",
     "pretty-quick": "^4.0.0",
     "process": "^0.11.10",
     "react-docgen": "^5.4.3",
@@ -114,8 +114,8 @@
     "serve": "^14.2.1",
     "stylelint": "^16.3.1",
     "stylelint-config-standard": "^36.0.0",
-    "tsup": "^8.0.2",
-    "tsx": "^4.7.2",
+    "tsup": "^8.3.5",
+    "tsx": "^4.19.2",
     "typescript": "^5.4.4",
     "unist-util-visit": "^2.0.3",
     "yargs": "^17.7.2"
@@ -125,26 +125,26 @@
     "pnpm": "9.7.1"
   },
   "resolutions": {
-    "@babel/core": "^7.24.4",
-    "@babel/code-frame": "^7.24.2",
+    "@babel/core": "^7.26.0",
+    "@babel/code-frame": "^7.26.2",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-numeric-separator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/plugin-transform-destructuring": "npm:@minh.nguyen/plugin-transform-destructuring@^7.5.2",
-    "@babel/plugin-transform-runtime": "^7.24.3",
-    "@babel/preset-env": "^7.24.4",
-    "@babel/preset-react": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.1",
-    "@babel/runtime": "^7.24.4",
-    "@babel/types": "^7.24.0",
+    "@babel/plugin-transform-destructuring": "^7.25.9",
+    "@babel/plugin-transform-runtime": "^7.25.9",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-typescript": "^7.26.0",
+    "@babel/runtime": "^7.26.0",
+    "@babel/types": "^7.26.0",
     "@definitelytyped/header-parser": "^0.2.8",
     "@definitelytyped/typescript-versions": "^0.1.1",
     "@definitelytyped/utils": "^0.1.5",
-    "@types/node": "^18.19.30",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "18.2.24"
+    "@types/node": "^18.19.63",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "18.3.1"
   },
   "nyc": {
     "include": [

packages/pigment-css-nextjs-plugin/src/virtual-css-loader.js

@@ -1,6 +1,6 @@
 export const loader = function virtualFileLoader() {
   const callback = this.async();
   const resourceQuery = this.resourceQuery.slice(1);
-  const { source } = JSON.parse(decodeURIComponent(resourceQuery));
-  return callback(null, source.replaceAll('__IMP__', '!important'));
+  const { source } = JSON.parse(decodeURIComponent(decodeURI(atob(resourceQuery))));
+  return callback(null, source);
 };

packages/pigment-css-react/package.json

@@ -31,39 +31,39 @@
     "typescript": "tsc --noEmit -p ."
   },
   "dependencies": {
-    "@babel/core": "^7.24.4",
-    "@babel/helper-module-imports": "^7.24.3",
-    "@babel/helper-plugin-utils": "^7.24.0",
-    "@babel/parser": "^7.24.4",
-    "@babel/types": "^7.24.0",
-    "@emotion/css": "^11.11.2",
-    "@emotion/is-prop-valid": "^1.2.2",
-    "@emotion/react": "^11.11.4",
-    "@emotion/serialize": "^1.1.4",
-    "@emotion/styled": "^11.11.5",
-    "@mui/system": "^6.0.0-alpha.6",
-    "@mui/utils": "^6.0.0-alpha.6",
+    "@babel/core": "^7.26.0",
+    "@babel/helper-module-imports": "^7.25.9",
+    "@babel/helper-plugin-utils": "^7.25.9",
+    "@babel/parser": "^7.26.2",
+    "@babel/types": "^7.26.0",
+    "@emotion/css": "^11.13.4",
+    "@emotion/is-prop-valid": "^1.3.1",
+    "@emotion/react": "^11.13.3",
+    "@emotion/serialize": "^1.3.2",
+    "@emotion/styled": "^11.13.0",
+    "@mui/system": "^6.1.6",
+    "@mui/utils": "^6.1.6",
     "@wyw-in-js/processor-utils": "^0.5.4",
     "@wyw-in-js/shared": "^0.5.4",
     "@wyw-in-js/transform": "^0.5.4",
-    "clsx": "^2.1.0",
+    "clsx": "^2.1.1",
     "cssesc": "^3.0.0",
     "csstype": "^3.1.3",
     "lodash": "^4.17.21",
-    "stylis": "^4.3.1",
+    "stylis": "^4.3.4",
     "stylis-plugin-rtl": "^2.1.1"
   },
   "devDependencies": {
-    "@babel/plugin-syntax-jsx": "^7.24.1",
-    "@mui/types": "7.2.14",
+    "@babel/plugin-syntax-jsx": "^7.25.9",
+    "@mui/types": "7.2.19",
     "@types/babel__core": "^7.20.5",
     "@types/babel__helper-module-imports": "^7.18.3",
     "@types/babel__helper-plugin-utils": "^7.10.3",
     "@types/chai": "^4.3.14",
     "@types/cssesc": "^3.0.2",
     "@types/lodash": "^4.17.0",
     "@types/mocha": "^10.0.6",
-    "@types/node": "^18.19.31",
+    "@types/node": "^18.19.63",
     "@types/prop-types": "^15.7.12",
     "@types/react": "^18.3.3",
     "@types/stylis": "^4.2.5",

packages/pigment-css-react/src/index.ts

@@ -1,6 +1,6 @@
 export * from './base';
 export { default as styled, type StyledComponent } from './styled';
-export { default as sx } from './sx';
+export { default as sx, type SxProp } from './sx';
 export { default as keyframes } from './keyframes';
 export { generateAtomics, atomics } from './generateAtomics';
 export { default as css } from './css';

packages/pigment-css-react/src/processors/css.ts

@@ -9,7 +9,7 @@ import type {
 } from '@wyw-in-js/processor-utils';
 import type { Replacements, Rules } from '@wyw-in-js/shared';
 import { ValueType } from '@wyw-in-js/shared';
-import type { CSSInterpolation } from '@emotion/css';
+import type { CSSInterpolation } from '@emotion/serialize';
 import deepMerge from 'lodash/merge';
 import BaseProcessor from './base-processor';
 import type { IOptions } from './styled';

packages/pigment-css-react/src/processors/generateAtomics.ts

@@ -7,7 +7,7 @@ import {
 } from '@wyw-in-js/processor-utils';
 import { ValueType, type ExpressionValue, type Replacements, type Rules } from '@wyw-in-js/shared';
 
-import { CSSInterpolation } from '@emotion/css';
+import type { CSSInterpolation } from '@emotion/serialize';
 import BaseProcessor from './base-processor';
 import type { IOptions } from './styled';
 import {

packages/pigment-css-react/src/processors/globalCss.ts

@@ -8,7 +8,7 @@ import type {
 } from '@wyw-in-js/processor-utils';
 import { serializeStyles, Interpolation } from '@emotion/serialize';
 import { type Replacements, type Rules, ValueType } from '@wyw-in-js/shared';
-import type { CSSInterpolation } from '@emotion/css';
+import type { CSSInterpolation } from '@emotion/serialize';
 import { validateParams } from '@wyw-in-js/processor-utils';
 import BaseProcessor from './base-processor';
 import type { IOptions } from './styled';

packages/pigment-css-react/src/processors/keyframes.ts

@@ -8,7 +8,7 @@ import type {
 } from '@wyw-in-js/processor-utils';
 import { serializeStyles, Interpolation } from '@emotion/serialize';
 import { type Replacements, type Rules, ValueType } from '@wyw-in-js/shared';
-import type { CSSInterpolation } from '@emotion/css';
+import type { CSSInterpolation } from '@emotion/serialize';
 import { validateParams } from '@wyw-in-js/processor-utils';
 import BaseProcessor from './base-processor';
 import type { IOptions } from './styled';

packages/pigment-css-react/src/styled.d.ts

@@ -35,7 +35,7 @@ export interface CreateStyledComponent<
 > {
   (
     styles: TemplateStringsArray,
-    ...args: Array<(options: ThemeArgs) => Primitve | Primitve | React.ComponentClass>
+    ...args: Array<((options: ThemeArgs) => Primitve) | Primitve | React.ComponentClass>
   ): StyledComponent<OuterProps> & (Component extends string ? BaseDefaultProps : Component);
 
   /**

packages/pigment-css-react/src/utils/processCssObject.ts

@@ -1,4 +1,4 @@
-import type { CSSObject } from '@emotion/css';
+import type { CSSObject } from '@emotion/serialize';
 import { css, cache } from './emotion';
 import type { PluginCustomOptions } from './cssFnValueToVariable';
 

packages/pigment-css-unplugin/package.json

@@ -30,12 +30,12 @@
     "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}'"
   },
   "dependencies": {
-    "@babel/core": "^7.24.4",
+    "@babel/core": "^7.26.0",
     "@pigment-css/react": "workspace:^",
     "@wyw-in-js/shared": "^0.5.4",
     "@wyw-in-js/transform": "^0.5.4",
     "babel-plugin-define-var": "^0.1.0",
-    "unplugin": "^1.7.1"
+    "unplugin": "^1.15.0"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",

packages/pigment-css-unplugin/src/index.ts

@@ -325,11 +325,15 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => {
         // subsequent builds. So we use a placeholder CSS file with the actual CSS content
         // as part of the query params.
         if (isNext) {
-          const data = `${meta.placeholderCssFile}?${encodeURIComponent(
-            JSON.stringify({
-              filename: id.split(path.sep).pop(),
-              source: cssText.replaceAll('!important', '__IMP__'),
-            }),
+          const data = `${meta.placeholderCssFile}?${btoa(
+            encodeURI(
+              encodeURIComponent(
+                JSON.stringify({
+                  filename: id.split(path.sep).pop(),
+                  source: cssText,
+                }),
+              ),
+            ),
           )}`;
           return {
             // CSS import should be the last so that nested components produce correct CSS order injection.