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

[pigment-css][nextjs] Allow usage of url() CSS function #41758

Merged
merged 5 commits into from
Apr 8, 2024

Conversation

brijeshb42
Copy link
Contributor

in styled/css definitions. This change goes a step further and allows you to reference files using configured aliases that you can't do in plain CSS files in Next.js

Input CSS Output CSS Output file UI
Screenshot 2024-04-03 at 8 55 21 PM Screenshot 2024-04-03 at 8 54 51 PM Screenshot 2024-04-03 at 8 53 26 PM Screenshot 2024-04-03 at 9 20 11 PM

@brijeshb42 brijeshb42 added nextjs package: pigment-css Specific to @pigment-css/* labels Apr 3, 2024
@mui-bot
Copy link

mui-bot commented Apr 3, 2024

Netlify deploy preview

https://deploy-preview-41758--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 74d2fff

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.

Code looks great, just missing tests for the util.

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 4, 2024
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 4, 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 work!

@brijeshb42 brijeshb42 enabled auto-merge (squash) April 8, 2024 10:59
@siriwatknp
Copy link
Member

siriwatknp commented Apr 8, 2024

I assume that this PR will work with image import as well, right? given that the framework will replace the image with a string.

import image from '../../path/to/image';

<body
  className={css`background: url(${image});`}
/>

@brijeshb42
Copy link
Contributor Author

True

in styled/css definitions. This change goes a step further
and allows you to reference files using configured aliases
that you can't do in plain CSS files in Next.js
@brijeshb42 brijeshb42 merged commit 300a60e into mui:next Apr 8, 2024
19 checks passed
@brijeshb42 brijeshb42 deleted the pigment/nextjs-url-fn branch April 9, 2024 05:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
nextjs package: pigment-css Specific to @pigment-css/*
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants