[pigment-css] theme does not contain other properties except vars

[siriwatknp]

Summary

import theme from '@pigment-css/react/theme' should return the configured theme passed to the Pigment config by default without altering or removing any keys.

Pigment CSS should not optimize the theme by default, instead provide docs and API to remove properties based on developers' decision.

Examples

No response

Motivation

I have this issue while migrating Material UI components but the idea applies to others in general.

Some Material UI components use useTheme() to get values from the theme, e.g. the Dialog:

import useTheme from '../styles/useTheme';

const Dialog = React.forwardRef(function Dialog(inProps, ref) {
  const props = useThemeProps({ props: inProps, name: 'MuiDialog' });
  const theme = useTheme();
  const defaultTransitionDuration = {
    enter: theme.transitions.duration.enteringScreen,
    exit: theme.transitions.duration.leavingScreen,
  };
  …
})

To support Pigment CSS, a useTheme can be exported from Pigment CSS with simple implementation like:

import theme from '@pigment-css/react/theme';

export function useTheme() {
  return theme;
}

Search keywords: pigment theme

Search keywords:

[brijeshb42]

This can be limited to exposing primitive values in the theme, like, theme.transitions. We can iterate over the whole theme object and anything that is primitive and be put on the theme.
But stuff like components or theme methods (theme.applyStyles) can't be exposed even if we wanted to.

[o-alexandrov]

Pigment CSS should not optimize the theme by default, instead provide docs and API to remove properties based on developers' decision.

There's API to remove properties based on developers' decision.
https://github.com/mui/material-ui/blob/f3cb496c999acbc8f19533e38df20be12e56d059/packages/pigment-css-react/src/utils/extendTheme.ts#L50

[siriwatknp]

This can be limited to exposing primitive values in the theme, like, theme.transitions. We can iterate over the whole theme object and anything that is primitive and be put on the theme. But stuff like components or theme methods (theme.applyStyles) can't be exposed even if we wanted to.

I think that's the developer/lib decision. I'm talking about Pigment CSS should not concern and limit the theme structure (except some special method that Pigment CSS is looking for, e.g. theme.components and theme.generateStyleSheet.

I think Pigment CSS should not "iterate over the whole theme object" but maybe call a method (e.g. theme.toRuntime()) on the theme to let developers (Material UI is one of them) decide.

diff --git a/packages/pigment-css-react/src/utils/generateCss.ts b/packages/pigment-css-react/src/utils/generateCss.ts
index 9920373613..3464f00061 100644
--- a/packages/pigment-css-react/src/utils/generateCss.ts
+++ b/packages/pigment-css-react/src/utils/generateCss.ts
@@ -11,11 +11,5 @@ export function generateThemeTokens(theme: Theme) {
   if (!theme || typeof theme !== 'object') {
     return {};
   }
-  // is created using extendTheme
-  if ('vars' in theme && theme.vars) {
-    return {
-      vars: theme.vars,
-    };
-  }
-  return {};
+  return theme.toRuntime?.() || {};
 }

There's API to remove properties based on developers' decision.

I meant for the whole theme, not just theme.vars.

[oliviertassinari]

Related to mui/material-ui#43443.