Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 4 commits into from
Nov 4, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/pigment-css-next-app/next.config.js
Original file line number Diff line number Diff line change
@@ -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');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For a next PR, we could just use createTheme with the css vars option.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure. I'll update it in the actual docs PR.


/**
* @typedef {import('@pigment-css/nextjs-plugin').PigmentOptions} PigmentOptions
Expand Down
12 changes: 6 additions & 6 deletions apps/pigment-css-next-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This's a downgrade. Is this correct?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is. v20 never actually was used since at the root, in resolutions, it was still v18. I have kept it at 18 since we are currently using node v18 to build in CI.

"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"eslint": "^8.57.0",
"typescript": "^5.4.4"
},
Expand Down
12 changes: 0 additions & 12 deletions apps/pigment-css-next-app/src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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>
);
Expand Down
38 changes: 19 additions & 19 deletions apps/pigment-css-vite-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should replace these to latest, no?

Copy link
Contributor Author

@brijeshb42 brijeshb42 Nov 4, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMO, it makes sense for examples. But for local apps, I'd prefer to manually update the versions since some of the things started breaking especially since currently v5 was being used (in the lockfile).

"@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": {
Expand Down
68 changes: 34 additions & 34 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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"
Expand All @@ -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": [
Expand Down
4 changes: 2 additions & 2 deletions packages/pigment-css-nextjs-plugin/src/virtual-css-loader.js
Original file line number Diff line number Diff line change
@@ -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))));
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

return callback(null, source);
};
34 changes: 17 additions & 17 deletions packages/pigment-css-react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion packages/pigment-css-react/src/index.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/pigment-css-react/src/processors/css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How did this breaking change land in an minor 😕

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah. I was surprised as well.

import deepMerge from 'lodash/merge';
import BaseProcessor from './base-processor';
import type { IOptions } from './styled';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion packages/pigment-css-react/src/processors/globalCss.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/pigment-css-react/src/processors/keyframes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/pigment-css-react/src/styled.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);

/**
Expand Down
2 changes: 1 addition & 1 deletion packages/pigment-css-react/src/utils/processCssObject.ts
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
4 changes: 2 additions & 2 deletions packages/pigment-css-unplugin/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
14 changes: 9 additions & 5 deletions packages/pigment-css-unplugin/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
Loading
Loading