Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Jun 21, 2024

Conversation

siriwatknp
Copy link
Member

@siriwatknp siriwatknp commented Jun 21, 2024

Found this bug from mui/material-ui#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.


@siriwatknp siriwatknp added the bug 🐛 Something doesn't work label Jun 21, 2024
Comment on lines +28 to +30
html {
color: red;
}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Without the change, this will not be generated.

@siriwatknp siriwatknp merged commit 659ed43 into master Jun 21, 2024
18 of 19 checks passed
@siriwatknp siriwatknp deleted the fix/transpiled-lib branch June 21, 2024 06:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants