core: Bump package versions and fix related TS errors

There is also a small change in how we do conversion for !important. Currently, we do it by replacing ! with __IMP__ and then reconverting back. In this PR, I have changed that to just encode and decode to and from base64. So we don't need special handling for ! character
brijeshb42 · Nov 1, 2024 · f05fabf · f05fabf
1 parent 624e608
commit f05fabf
Show file tree

Hide file tree

Showing 12 changed files with 1,191 additions and 548 deletions.
diff --git a/packages/pigment-css-nextjs-plugin/src/virtual-css-loader.js b/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);
 };
diff --git a/packages/pigment-css-react/package.json b/packages/pigment-css-react/package.json
@@ -31,31 +31,31 @@
     "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",

diff --git a/packages/pigment-css-react/src/index.ts b/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';

diff --git a/packages/pigment-css-react/src/processors/css.ts b/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';

diff --git a/packages/pigment-css-react/src/processors/generateAtomics.ts b/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 {

diff --git a/packages/pigment-css-react/src/processors/globalCss.ts b/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';

diff --git a/packages/pigment-css-react/src/processors/keyframes.ts b/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';

diff --git a/packages/pigment-css-react/src/styled.d.ts b/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);
 
   /**

diff --git a/packages/pigment-css-unplugin/package.json b/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",

diff --git a/packages/pigment-css-unplugin/src/index.ts b/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.

diff --git a/packages/pigment-css-vite-plugin/package.json b/packages/pigment-css-vite-plugin/package.json
@@ -28,16 +28,16 @@
     "typecheck": "tsc --noEmit -p ."
   },
   "dependencies": {
-    "@babel/core": "^7.24.4",
-    "@babel/preset-typescript": "^7.24.1",
+    "@babel/core": "^7.26.0",
+    "@babel/preset-typescript": "^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"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",
-    "vite": "^5.2.8"
+    "vite": "^5.4.10"
   },
   "peerDependencies": {
     "vite": "^4.0.0 || ^5.0.0"