[pigment-css] Create a wrapper package over Pigment CSS #42819

brijeshb42 · 2024-07-02T09:18:03Z

Docs: https://deploy-preview-42819--material-ui.netlify.app/material-ui/migration/migrating-to-pigment-css/

At the moment, it only re-exports stuff from Pigment CSS. But as the
Pigment core APIs change, it'll serve as the normalizing library that
still provides the same API even if Pigment has any breaking change.

This PR depends on the merge and release of this PR.

I have followed (at least) the PR section of the contributing guide.

brijeshb42 · 2024-07-02T09:18:50Z

@siriwatknp I'll need your help to update any documentation that might be referencing @pigment-css/react.

mui-bot · 2024-07-02T09:21:25Z

Netlify deploy preview

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 4cf7383

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

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

packages/mui-pigment-css/package.json

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

packages/mui-material-pigment-css/src/Container.ts

At the moment, it only re-exports stuff from Pigment CSS. But as the Pigment core APIs change, it'll server as the normalizing library that still provides the same API even if Pigment has any breaking change.

packages/mui-material-pigment-css/src/Grid/MaterialPigmentGrid.ts

mnajdova

Are we waiting for a release on Pigment CSS to replace the packages?

mnajdova · 2024-07-09T14:36:33Z

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

  sourceMap: true,
  displayName: true,
-  overrideContext: (context) => {


apps/pigment-css-vite-app/src/pages/material-ui/index.tsx

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

packages/mui-material/package.json

mnajdova

Few final small comments.

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

packages/mui-material-pigment-css/src/Hidden/MaterialPigmentHidden.ts

siriwatknp · 2024-07-10T07:52:31Z

packages/mui-material/tsconfig.build.json

+    "moduleResolution": "Node16",
+    "module": "Node16"


What's is change for? I am afraid that it might change the build result.

It was added because of usage of exports field in package.json in Pigment CSS. Otherwise, the typechecking was not working.
It will not affect the output because we use babel to build the files and tsc is only used to create the d.ts declarations.

siriwatknp · 2024-07-10T07:58:29Z

@brijeshb42 any thought to hide the .toRuntimeSource in the configuration? so user can just do this:

import { withPigment } from '@pigment-css/nextjs-plugin';
import { extendTheme } from '@mui/material';

export default withPigment({ … },
  {
    theme: extendTheme(),
  }
);

brijeshb42 · 2024-07-10T08:01:36Z

@brijeshb42 any thought to hide the .toRuntimeSource in the configuration? so user can just do this:

We can just set this in the extendTheme definition inside @mui/material to simplify. This will affect bundle size when not using Pigment but the change should be insignificant.

siriwatknp · 2024-07-10T08:03:58Z

@brijeshb42 any thought to hide the .toRuntimeSource in the configuration? so user can just do this:

We can just set this in the extendTheme definition inside @mui/material to simplify. This will affect bundle size when not using Pigment but the change should be insignificant.

Okay, I don't see other way but this.

siriwatknp · 2024-07-10T08:32:09Z

@brijeshb42 pushed 2 commits:

rename components to follow convention
add toRuntimeSource to extendTheme.

mnajdova · 2024-07-10T09:07:32Z

We can just set this in the extendTheme definition inside @mui/material to simplify. This will affect bundle size when not using Pigment but the change should be insignificant.

It's just a function, the bundle size increase is really small. Thanks @siriwatknp for pushing the change.

mnajdova

The code looks good. I left a review on the migration page, but we can iterate in a new PR too, no hard preference from my side.

docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md

mnajdova · 2024-07-10T09:13:41Z

docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md

+});
+```
+
+Run the following codemod to remove the owner state from the theme:


I would add before this section to explain the new syntax - variants. Otherwise it seems scary just reading this that the dynamic styles are not supported.

mnajdova · 2024-07-10T09:14:53Z

docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md

+    }
+  }
+}
+```


We are missing the Grid migration guide.

I am not sure if it's related to Pigment migration?

My thought was, if you are migrating to Pigment CSS, you need to use the Pigment CSS grid. We can add it in a follow up PR, let's not block the release for it.

…material-ui into material-pigment-css

siriwatknp

👏👏 Well done everyone!

brijeshb42 added the package: pigment-css Specific to @pigment-css/* label Jul 2, 2024

brijeshb42 requested review from mnajdova and siriwatknp July 2, 2024 09:18

brijeshb42 force-pushed the material-pigment-css branch from adfd849 to 4cc9d46 Compare July 2, 2024 09:18

mnajdova requested changes Jul 2, 2024

View reviewed changes

apps/pigment-css-next-app/src/app/material-ui/page.tsx Show resolved Hide resolved

apps/pigment-css-vite-app/package.json Outdated Show resolved Hide resolved

packages/mui-pigment-css/package.json Outdated Show resolved Hide resolved

brijeshb42 changed the title ~~[pigment-css] A new package that is a wrapper over Pigment CSS~~ [pigment-css] Create a wrapper package over Pigment CSS Jul 2, 2024

brijeshb42 force-pushed the material-pigment-css branch from 4cc9d46 to 3e7b81a Compare July 2, 2024 11:50

mnajdova reviewed Jul 2, 2024

View reviewed changes

apps/pigment-css-next-app/src/app/material-ui/page.tsx Outdated Show resolved Hide resolved

mnajdova reviewed Jul 2, 2024

View reviewed changes

packages/mui-material-pigment-css/src/Container.ts Outdated Show resolved Hide resolved

brijeshb42 force-pushed the material-pigment-css branch from 3e7b81a to 4235585 Compare July 9, 2024 06:04

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 9, 2024

brijeshb42 added 3 commits July 9, 2024 11:37

[pigment-css] A new package that is a wrapper over Pigment CSS

cbf7538

At the moment, it only re-exports stuff from Pigment CSS. But as the Pigment core APIs change, it'll server as the normalizing library that still provides the same API even if Pigment has any breaking change.

Modify demo apps to use @mui/material-pigment-css

69aa126

Testing changes

da0ee4a

brijeshb42 force-pushed the material-pigment-css branch from 4235585 to da0ee4a Compare July 9, 2024 06:12

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 9, 2024

siriwatknp and others added 3 commits July 9, 2024 13:36

create submodules

65edeb7

use mui/material-pigment-css components

33eb3e7

Dedupe

6ac9e5e

brijeshb42 force-pushed the material-pigment-css branch from 85bc8e0 to 6ac9e5e Compare July 9, 2024 10:25

brijeshb42 added 2 commits July 9, 2024 15:58

Lint fix

498dbb4

Fix module resolution

aa1ee3d

brijeshb42 requested a review from mnajdova July 9, 2024 11:35

DiegoAndai reviewed Jul 9, 2024

View reviewed changes

packages/mui-material-pigment-css/src/Grid/MaterialPigmentGrid.ts Outdated Show resolved Hide resolved

mnajdova reviewed Jul 9, 2024

View reviewed changes

add pigment css migration

5f169ef

siriwatknp mentioned this pull request Jul 10, 2024

[docs] Add Pigment CSS integration guide #42781

Closed

1 task

fix package name

a3f9cb4

siriwatknp reviewed Jul 10, 2024

View reviewed changes

packages/mui-material/package.json Outdated Show resolved Hide resolved

brijeshb42 added 3 commits July 10, 2024 09:52

Update TS types in app for sx prop

8ab22a1

Remove unwanted package name in metadata

e6ceaff

Update Pigment to latest published version

a2e16da

brijeshb42 force-pushed the material-pigment-css branch from 0a8b7ae to a2e16da Compare July 10, 2024 07:40

mnajdova reviewed Jul 10, 2024

View reviewed changes

apps/pigment-css-vite-app/vite.config.ts Outdated Show resolved Hide resolved

apps/pigment-css-vite-app/vite.config.ts Show resolved Hide resolved

packages/mui-material-pigment-css/src/Hidden/MaterialPigmentHidden.ts Outdated Show resolved Hide resolved

siriwatknp reviewed Jul 10, 2024

View reviewed changes

siriwatknp added 2 commits July 10, 2024 15:28

follow naming convention

9688bf5

add toRuntimeSource to extendTheme

4c96f59

update content

723668c

Fix export

d46ce78

mnajdova approved these changes Jul 10, 2024

View reviewed changes

brijeshb42 and others added 7 commits July 10, 2024 14:47

Change module resolution to bundler

2052eec

fix non-breaking space

973ff45

update content

475621c

Merge branch 'material-pigment-css' of https://github.com/brijeshb42/…

b824288

…material-ui into material-pigment-css

Convert stringifyTheme to named export

bb38558

remove stringify export

71f0e58

fix non-breaking space

4cf7383

siriwatknp approved these changes Jul 10, 2024

View reviewed changes

brijeshb42 merged commit 63878a5 into mui:next Jul 10, 2024
23 checks passed

brijeshb42 deleted the material-pigment-css branch July 10, 2024 14:59

joserodolfofreitas pushed a commit to joserodolfofreitas/material-ui that referenced this pull request Jul 29, 2024

[pigment-css] Create a wrapper package over Pigment CSS (mui#42819)

011b0ae

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[pigment-css] Create a wrapper package over Pigment CSS #42819

[pigment-css] Create a wrapper package over Pigment CSS #42819

brijeshb42 commented Jul 2, 2024 •

edited by siriwatknp

Loading

brijeshb42 commented Jul 2, 2024

mui-bot commented Jul 2, 2024 •

edited

Loading

mnajdova left a comment

mnajdova Jul 9, 2024

mnajdova left a comment

siriwatknp Jul 10, 2024 •

edited

Loading

brijeshb42 Jul 10, 2024

siriwatknp commented Jul 10, 2024 •

edited

Loading

brijeshb42 commented Jul 10, 2024

siriwatknp commented Jul 10, 2024

siriwatknp commented Jul 10, 2024

mnajdova commented Jul 10, 2024

mnajdova left a comment

mnajdova Jul 10, 2024

mnajdova Jul 10, 2024

siriwatknp Jul 10, 2024

mnajdova Jul 10, 2024

siriwatknp left a comment

[pigment-css] Create a wrapper package over Pigment CSS #42819

[pigment-css] Create a wrapper package over Pigment CSS #42819

Conversation

brijeshb42 commented Jul 2, 2024 • edited by siriwatknp Loading

brijeshb42 commented Jul 2, 2024

mui-bot commented Jul 2, 2024 • edited Loading

Netlify deploy preview

Bundle size report

mnajdova left a comment

Choose a reason for hiding this comment

mnajdova Jul 9, 2024

Choose a reason for hiding this comment

mnajdova left a comment

Choose a reason for hiding this comment

siriwatknp Jul 10, 2024 • edited Loading

Choose a reason for hiding this comment

brijeshb42 Jul 10, 2024

Choose a reason for hiding this comment

siriwatknp commented Jul 10, 2024 • edited Loading

brijeshb42 commented Jul 10, 2024

siriwatknp commented Jul 10, 2024

siriwatknp commented Jul 10, 2024

mnajdova commented Jul 10, 2024

mnajdova left a comment

Choose a reason for hiding this comment

mnajdova Jul 10, 2024

Choose a reason for hiding this comment

mnajdova Jul 10, 2024

Choose a reason for hiding this comment

siriwatknp Jul 10, 2024

Choose a reason for hiding this comment

mnajdova Jul 10, 2024

Choose a reason for hiding this comment

siriwatknp left a comment

Choose a reason for hiding this comment

brijeshb42 commented Jul 2, 2024 •

edited by siriwatknp

Loading

mui-bot commented Jul 2, 2024 •

edited

Loading

siriwatknp Jul 10, 2024 •

edited

Loading

siriwatknp commented Jul 10, 2024 •

edited

Loading