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] Fix css extraction for transformed styled tagged-template call #234

Merged
merged 1 commit into from
Sep 16, 2024

Conversation

brijeshb42
Copy link
Contributor

  1. Fixes [material-ui][Button] Broken ripple effect with Pigment CSS material-ui#43619
  2. Also adds default preprocessor in unplugin package.

The main issue here is that next.js through swc transpiles files in node_modules which also includes tagged template literals, converting them to a normal styled()() with somewhat weird arguments.
This transformation was not handled previously resulting in some missing css from the final output.

@brijeshb42 brijeshb42 requested a review from a team September 12, 2024 12:11
@brijeshb42 brijeshb42 added the bug 🐛 Something doesn't work label Sep 12, 2024
@brijeshb42
Copy link
Contributor Author

brijeshb42 commented Sep 12, 2024

@Janpot I see some side-effects of @layer fix that we did while testing the example in the original bug. Button's styles are not being applied.

Without @layer :

Screenshot 2024-09-12 at 5 52 08 PM

With @layer :

Screenshot 2024-09-12 at 5 53 15 PM

Ripple related fixes are working as expected. Just wanted to point this out since I was testing with the latest code.

@Janpot Janpot changed the title [react] Fix css extraction for trasformed styled tagged-template call [react] Fix css extraction for transformed styled tagged-template call Sep 12, 2024
Copy link
Member

@siriwatknp siriwatknp left a comment

Choose a reason for hiding this comment

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

Great job on this! @brijeshb42

@brijeshb42 brijeshb42 merged commit d7c13d1 into mui:master Sep 16, 2024
12 checks passed
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.

[material-ui][Button] Broken ripple effect with Pigment CSS
2 participants