[pigment-css] Add `stringifyTheme` for Pigment CSS integration #42476

siriwatknp · 2024-06-01T19:57:21Z

To make the serializable theme available at runtime because some components are accessing runtime theme with useTheme.

Usage with Pigment CSS:

// next.config.js
const { extendTheme, stringifyTheme } = require('@mui/material/styles');

const theme = extendTheme();

theme.toRuntimeSource = stringifyTheme;

module.exports = withPigment({
  theme,
})

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

mui-bot · 2024-06-01T20:00:02Z

Netlify deploy preview

https://deploy-preview-42476--material-ui.netlify.app/

@material-ui/core: parsed: +0.13% , gzip: +0.17%
SwipeableDrawer: parsed: +0.05% , gzip: +0.35%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 6524424

…t/runtime-theme

packages/mui-material/src/styles/stringifyTheme.ts

…t/runtime-theme

mnajdova · 2024-06-05T10:54:51Z

packages/mui-material/src/styles/stringifyTheme.test.ts

+import { stringifyTheme } from './stringifyTheme';
+import extendTheme from './extendTheme';
+
+describe('StringifyTheme', () => {


Suggested change

describe('StringifyTheme', () => {

describe('stringifyTheme', () => {

oliviertassinari · 2024-06-08T15:25:46Z

packages/mui-material/src/styles/stringifyTheme.ts

+  function serializeTheme(object: Record<string, any>) {
+    const array = Object.entries(object);
+    // eslint-disable-next-line no-plusplus
+    for (let index = 0; index < array.length; index++) {
+      const [key, value] = array[index];
+      if (!isSerializable(value) || key.startsWith('unstable_')) {
+        delete object[key];
+      } else if (isPlainObject(value)) {
+        object[key] = { ...value };
+        serializeTheme(object[key]);
+      }
+    }
+  }


I think we need to remove all the CSS variables values: colors, typography, etc., so it breaks at runtime if developers try to access them. For example theme.color.primary.main would be wrong as soon as the theme changes. So if it's impossible to access, we would avoid a footgun.

Then for these dynamic values (have CSS variables), solve it with: https://github.com/mui/pigment-css/issues/129.

But honestly, the theme replacement at build-time feels wrong in the first place. I don't think we should invest more time into it. From what I understand, we are only doing it for RSC, but it feels like the worst technical solution available if there is a working React.cache() alternative: either like yak is doing it, or like this: emotion-js/emotion#2978 (comment).

But how would you make it work for components that are using useTheme() at runtime, for example, Material UI Tooltip?

At this point, I think we need it (can be an internal API) otherwise v6 will be delayed for at least a month.

From what I understand, we are only doing it for RSC

No, we are doing this because some components are accessing the theme at runtime (those that call useTheme().

but it feels like the worst technical solution available if there is a working React.cache() alternative

Again, I think I mentioned in some issue to you that React.cache is still experimental. The options we have are:

Use wyw-in-js to provide runtime theme (small effort)

Go with your proposal, could be small or large effort because we don't know the edge cases and React.cache is still experimental.

To me, both options give almost the same result, (1) is a bit better because there is no useContext involved compare to option (2). That's why I would go with option (1) and keep the API internal to launch v6 and then when the time is right, switch to option (2) if necessary.

What's your opinion? cc @mnajdova @brijeshb42

React.cache is still experimental

https://nextjs.org/docs/app/building-your-application/caching#react-cache-function doesn't make it so clear.

But how would you make it work for components that are using useTheme() at runtime, for example, Material UI Tooltip?

The way I see it:

For the server bundle, you have a full duplicate of the theme object, you can import the same one that the plugin uses. This theme is made available with the <CssVarProvider> which injects the theme for the children's server components that were not extracted at build time. The theme is propagated ideally with the React.cache() API because it has no bundler integration needs or a global window value (maybe with some capabilities to have multiple versions of Pigment CSS run in the same app)
Then, the children use useTheme(), but this module must not be flagged as a client bundle, so we remove "use client" to have it as a shared moduie: https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md#conventions-for-serverclient-components. That would work like this: emotion-js/emotion#2978 (comment)
A theme replacement during the build could be an option but it sounds more work and depends more on the bundler.

For the client bundle, you have the whole theme available, you can import the same one that the plugin uses. We make it propagate in the application with the React Context API, from <CssVarProvider> who injects it with a child. I mean, the CssVarProvider stays a server component but uses a client component inside himself using https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#supported-pattern-passing-server-components-to-client-components-as-props. The challenge there is that for this to work, the server effectively needs to serialize the theme https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#passing-props-from-server-to-client-components-serialization, which breaks all its functions.

One way to solve this is to use Yak a plugin that I assume will somehow make this theme available in the client component (see how they use client hints https://yak.js.org/features#theming to create the theme).

Another, I don't know if it works, is to have both a client and a server component imports that theme, and inject it, so it's never serialized like in https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#passing-props-from-server-to-client-components-serialization.

Personally, I see no need to serialize/stringify a theme with this model.

cc @DiegoAndai

…t/runtime-theme

siriwatknp · 2024-06-12T07:23:59Z

@brijeshb42 the build passes, I believe that it's ready for the final review.

brijeshb42 · 2024-06-12T07:29:28Z

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

@@ -9,7 +9,7 @@
    "clean": "rimraf .next"
  },
  "dependencies": {
-    "@pigment-css/react": "^0.0.12",
+    "@pigment-css/react": "^0.0.13",


The latest for @pigment/react is 0.0.13. Only @pigment-css/nextjs-plugin that's get updated in 0.0.14.

Is that what you mean?

brijeshb42 · 2024-06-12T07:40:53Z

packages/mui-material/src/styles/stringifyTheme.ts

+const theme = ${JSON.stringify(serializableTheme, null, 2)};
+
+theme.breakpoints = createBreakpoints(theme.breakpoints || {});
+theme.transitions = createTransitions(theme.transitions || {});


I also found that we'll have to have theme.shadows for Paper. But I see that it uses shadows in non production env. Have you tried running the demo apps in dev mode and see if it works ?

Yes, it works. The theme.shadows are in serializableTheme in line 56.

This proves that the runtime theme works!

brijeshb42

LGTM. Great work on this.

…2476)

pushys · 2024-07-22T13:55:35Z

stringifyTheme doesn't seem to be exported from @mui/material/styles anymore, although it is still mentioned in the docs.

siriwatknp · 2024-07-23T02:21:31Z

stringifyTheme doesn't seem to be exported from @mui/material/styles anymore, although it is still mentioned in the docs.

Sorry, that's a mistake. It should not appear in the docs, I am fixing it.

…2476)

export stringifyTheme

7d70305

siriwatknp added package: material-ui Specific to @mui/material v6.x customization: theme Centered around the theming features labels Jun 1, 2024

siriwatknp mentioned this pull request Jun 1, 2024

[core] Implement useTheme processor and runtime theme mui/pigment-css#105

Merged

1 task

siriwatknp requested review from mnajdova and brijeshb42 June 1, 2024 21:57

Merge branch 'next' of https://github.com/mui/material-ui into pigmen…

eaa46fd

…t/runtime-theme

brijeshb42 reviewed Jun 4, 2024

View reviewed changes

packages/mui-material/src/styles/stringifyTheme.ts Outdated Show resolved Hide resolved

brijeshb42 reviewed Jun 4, 2024

View reviewed changes

packages/mui-material/src/styles/stringifyTheme.ts Outdated Show resolved Hide resolved

siriwatknp commented Jun 4, 2024

View reviewed changes

packages/mui-material/src/styles/stringifyTheme.ts Outdated Show resolved Hide resolved

siriwatknp added 5 commits June 4, 2024 09:22

use toRuntimeSource with test

0eb8b00

Merge branch 'next' of https://github.com/mui/material-ui into pigmen…

8ad6741

…t/runtime-theme

Merge branch 'next' of https://github.com/mui/material-ui into pigmen…

3666d86

…t/runtime-theme

set toRuntimeSource

167d5fd

move useTheme to zero-styled

5145581

mnajdova reviewed Jun 5, 2024

View reviewed changes

siriwatknp mentioned this pull request Jun 5, 2024

[nextjs] useTheme replacement does not work mui/pigment-css#124

Closed

1 task

siriwatknp added the on hold There is a blocker, we need to wait label Jun 5, 2024

oliviertassinari reviewed Jun 8, 2024

View reviewed changes

siriwatknp added 3 commits June 10, 2024 17:13

Merge branch 'next' of https://github.com/mui/material-ui into pigmen…

042c4b8

…t/runtime-theme

add react-tooltip page

d4b1215

add react-paper demo

6a633bd

siriwatknp mentioned this pull request Jun 10, 2024

v0.0.13 mui/pigment-css#135

Merged

1 task

siriwatknp added 4 commits June 11, 2024 15:54

Merge branch 'next' of https://github.com/mui/material-ui into pigmen…

4c8f45f

…t/runtime-theme

update pigment to 0.0.13

72bea2d

add tabs page

d55f3e6

fix esm import

f8f21c4

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

Merge branch 'next' of https://github.com/mui/material-ui into pigmen…

06db99f

…t/runtime-theme

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

siriwatknp added 4 commits June 11, 2024 18:19

Merge branch 'next' of https://github.com/mui/material-ui into pigmen…

83aa481

…t/runtime-theme

fix test

045a47c

Merge branch 'next' of https://github.com/mui/material-ui into pigmen…

a2f90d5

…t/runtime-theme

update nextjs-plugin

e3790cc

siriwatknp force-pushed the pigment/runtime-theme branch from b1574d0 to e3790cc Compare June 12, 2024 07:08

run pnpm dedupe

6524424

siriwatknp requested review from brijeshb42 and mnajdova June 12, 2024 07:22

siriwatknp removed the on hold There is a blocker, we need to wait label Jun 12, 2024

brijeshb42 reviewed Jun 12, 2024

View reviewed changes

brijeshb42 approved these changes Jun 12, 2024

View reviewed changes

siriwatknp merged commit bac1aeb into mui:next Jun 12, 2024
21 checks passed

siriwatknp mentioned this pull request Jun 12, 2024

[release] v6.0.0-alpha.11 #42616

Merged

1 task

mnajdova pushed a commit to mnajdova/material-ui that referenced this pull request Jun 12, 2024

[pigment-css] Add stringifyTheme for Pigment CSS integration (mui#4…

0816fe5

…2476)

This was referenced Jul 7, 2024

[material-ui] Add PropsProvider for Pigment CSS integration #42635

Closed

[system] Remove createUseThemeProps, RtlProvider, DefaultPropsProvider, useDefaultProps API #43443

Open

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

[pigment-css] Add stringifyTheme for Pigment CSS integration (mui#4…

1a93238

…2476)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[pigment-css] Add `stringifyTheme` for Pigment CSS integration #42476

[pigment-css] Add `stringifyTheme` for Pigment CSS integration #42476

siriwatknp commented Jun 1, 2024 •

edited

Loading

mui-bot commented Jun 1, 2024 •

edited

Loading

mnajdova Jun 5, 2024

oliviertassinari Jun 8, 2024 •

edited

Loading

siriwatknp Jun 9, 2024 •

edited

Loading

oliviertassinari Jun 9, 2024 •

edited

Loading

siriwatknp Jun 10, 2024

siriwatknp commented Jun 12, 2024

brijeshb42 Jun 12, 2024

siriwatknp Jun 12, 2024 •

edited

Loading

brijeshb42 Jun 12, 2024

siriwatknp Jun 12, 2024 •

edited

Loading

siriwatknp Jun 12, 2024

brijeshb42 left a comment

pushys commented Jul 22, 2024

siriwatknp commented Jul 23, 2024

	describe('StringifyTheme', () => {
	describe('stringifyTheme', () => {

[pigment-css] Add stringifyTheme for Pigment CSS integration #42476

[pigment-css] Add stringifyTheme for Pigment CSS integration #42476

Conversation

siriwatknp commented Jun 1, 2024 • edited Loading

mui-bot commented Jun 1, 2024 • edited Loading

Netlify deploy preview

Bundle size report

mnajdova Jun 5, 2024

Choose a reason for hiding this comment

oliviertassinari Jun 8, 2024 • edited Loading

Choose a reason for hiding this comment

siriwatknp Jun 9, 2024 • edited Loading

Choose a reason for hiding this comment

oliviertassinari Jun 9, 2024 • edited Loading

Choose a reason for hiding this comment

siriwatknp Jun 10, 2024

Choose a reason for hiding this comment

siriwatknp commented Jun 12, 2024

brijeshb42 Jun 12, 2024

Choose a reason for hiding this comment

siriwatknp Jun 12, 2024 • edited Loading

Choose a reason for hiding this comment

brijeshb42 Jun 12, 2024

Choose a reason for hiding this comment

siriwatknp Jun 12, 2024 • edited Loading

Choose a reason for hiding this comment

siriwatknp Jun 12, 2024

Choose a reason for hiding this comment

brijeshb42 left a comment

Choose a reason for hiding this comment

pushys commented Jul 22, 2024

siriwatknp commented Jul 23, 2024

[pigment-css] Add `stringifyTheme` for Pigment CSS integration #42476

[pigment-css] Add `stringifyTheme` for Pigment CSS integration #42476

siriwatknp commented Jun 1, 2024 •

edited

Loading

mui-bot commented Jun 1, 2024 •

edited

Loading

oliviertassinari Jun 8, 2024 •

edited

Loading

siriwatknp Jun 9, 2024 •

edited

Loading

oliviertassinari Jun 9, 2024 •

edited

Loading

siriwatknp Jun 12, 2024 •

edited

Loading

siriwatknp Jun 12, 2024 •

edited

Loading