media-query based CSS code-splitting

[Sheraff]

Describe the feature you'd like to request

I would like to see Next.js take advantage of the media attribute in <link> tags to allow for better code-splitting of CSS.

<link rel="preload" href="/_next/static/css/908b69d8dc317304366e.css" as="style">
<link rel="preload" href="/_next/static/css/908b69d8dc317304366e-desktop.css" as="style" media="screen and (min-width: 1024px)">
<link rel="stylesheet" href="/_next/static/css/908b69d8dc317304366e.css" data-n-g="">
<link rel="stylesheet" href="/_next/static/css/908b69d8dc317304366e-desktop.css" media="screen and (min-width: 1024px)" data-n-g="">

Describe the solution you'd like

When outputting CSS that includes media-queries, such as

.foo { color: red }
@media screen and (min-width: 1024px) {
    .foo { color: green }
}
.bar { font-size: 1rem }
@media screen and (min-width: 1024px) {
    .bar { font-size: 2rem }
}

There are some PostCSS plugins that allow for that output to be split into separate files, such as postcss-extract-media-query:

.foo { color: red }
.bar { font-size: 1rem }

@media screen and (min-width: 1024px) {
    .foo { color: green }
    .bar { font-size: 2rem }
}

I would like for such a configuration to be possible through the next.config.js (or other means if not that one).

Describe alternatives you've considered

Due to the nature of Next.js of handling the loading of all files itself, it is currently not possible (to my knowledge) to use any alternative means to correctly achieve this end.

[Sheraff]

@ijjk Out of curiosity, did you move this subject here because the Vercel team has no intention of implementing this feature?

[ijjk]

No we have just been migrating feature requests into discussions, we've also been opening our RFCs here as well.

[jquinc30]

Any news since late 2021?