Open aarongarciah opened 2 months ago
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 emotion
/@mui/system
since these are generated at runtime.
But it will definitely help Pigment CSS reduce the generated CSS bundle size since internally, Pigment also uses @mui/system
.
This might have been overlooked during the initial implementation. That could explain why these are generated.
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
``` System: OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm) Binaries: Node: 20.9.0 - /usr/local/bin/node npm: 9.8.1 - /usr/local/bin/npm pnpm: 8.10.2 - /usr/local/share/npm-global/bin/pnpm Browsers: Chrome: Not Found npmPackages: @emotion/react: ^11.11.4 => 11.11.4 @emotion/styled: ^11.11.5 => 11.11.5 @mui/system: 5.15.15 => 5.15.15 @types/react: latest => 18.2.79 react: latest => 18.3.0 react-dom: latest => 18.3.0 typescript: latest => 5.4.5 ```npx @mui/envinfo
Search keywords: system, media query