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
[system] Unnecessary media query with 0px breakpoints #42025
Comments
Hi @aarongarciah, I've been pondering the issue with unnecessary media queries at 0px breakpoints. Is there a specific reason why these queries are generated, even for values like 0px, 0rem, or 0em? It seems like an intriguing challenge to optimize CSS bundle size without compromising on design flexibility. |
@yasminebeji the API/developer experience will be kept intact; this would be an internal optimization. It probably requires some changes in how breakpoints are translated into media queries. |
@yasminebeji With the current implementation, even with the change to remove the 0px media query, it won't affect the bundle size in any way for |
from the generated css. These don't have any higher specificity than direct css. Fixes mui#42025
from the generated css. These don't have any higher specificity than direct css. Fixes mui#42025
from the generated css. These don't have any higher specificity than direct css. Fixes mui#42025
from the generated css. These don't have any higher specificity than direct css. Fixes mui#42025
from the generated css. These don't have any higher specificity than direct css. Fixes mui#42025
from the generated css. These don't have any higher specificity than direct css. Fixes mui#42025
Steps to reproduce
Link to live example: https://codesandbox.io/p/sandbox/responsive-value-in-sx-prop-wjy9r9
Inspect the texts of the demo to see how each one of them has some style applied under a
@media (min-width: 0px)
media query.Current behavior
Responsive values in
0px
breakpoints (although it would be the same for0rem
,0em
, etc.) end up inside a media query like@media (min-width: 0px)
. It happens for object and array syntax alike.Expected behavior
Styles for breakpoints with a value of
0px
(or0rem
,0em
, etc.) aren't placed inside a media query.Context
The benefits of removing unnecessary media queries are:
Note: media queries don't affect specificity, so it's fine to remove them in that regard.
Your environment
npx @mui/envinfo
Search keywords: system, media query
The text was updated successfully, but these errors were encountered: