[pigment-css] theme does not contain other properties except `vars` about material-ui

[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.

material-ui/packages/pigment-css-react/src/utils/extendTheme.ts

Line 50 in f3cb496

shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;

[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.