mui / pigment-css

Pigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build time.
MIT License
396 stars 19 forks source link

[react] Support transpiled library for `globalCss` and `keyframes` #155

Closed siriwatknp closed 1 week ago

siriwatknp commented 1 week ago

Found this bug from https://github.com/mui/material-ui/pull/42640

Root cause

The code of CssBaseline looks like this:

const GlobalStyles = globalCss(({ theme }) => styles(theme));

However, after building Material UI as a package and Next.js import it, the code before passing to Pigment is:

const GlobalStyles = globalCss(_c = ({
  theme
}) => styles(theme));
_c1 = GlobalStyles;
var c1;

Notice that the value passed to globalCss is a variable instead of a function. Pigment CSS thinks that it's not a function, that's why the CSS does not generated (with Emotion error):

Functions that are interpolated in css calls will be stringified.
If you want to have a css call based on props, create a function that returns a css call like this
let dynamicStyle = (props) => css`color: ${props.color}`
It can be called directly with props or interpolated in a styled call like this
let SomeComponent = styled('div')`${dynamicStyle}`

The fix is simple, we check the type after the evaluation and then pass the theme if it's a function.