[system] Unnecessary media query with 0px breakpoints

[aarongarciah]

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 for 0rem, 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 (or 0rem, 0em, etc.) aren't placed inside a media query.

Context

The benefits of removing unnecessary media queries are:

• Smaller CSS bundle size (using build-time extraction once Pigment CSS is ready).
• Easier to read styles in browser DevTools.

Note: media queries don't affect specificity, so it's fine to remove them in that regard.

Your environment

npx @mui/envinfo

  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 

Search keywords: system, media query

[yasminebeji]

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.

[aarongarciah]

@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.

[brijeshb42]

@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.