nextjs-portal should be removed from DOM if devIndicators is false in Next Config

[devklepacki]

Goals

1. Remove unnecessary, unused elements (especially media queries) from website code/CSS

Non-Goals

No response

Background

I'm always working with non-standard media queries of 600, 900, 1200 and 1800 px. I don't allow any other in my code.

But in Google Chrome other media queries are shown in top bars in Responsive Mode Dev View:

The media queries are only coming from nextjs-portal and data-nextjs-dialog element:

@media (min-width:768px){[data-nextjs-dialog-root]{--next-dialog-max-width:720px}}@media (min-width:992px){[data-nextjs-dialog-root]{--next-dialog-max-width:960px}}[data-nextjs-dialog-overlay]{padding:initial;top:10vh}

The nextjs-portal element is present in DOM even when devIndicators is set to false in Next Config. In such situation nextjs-portal does not contain anything else beside unused styles:

Proposal

The nextjs-portal element should be removed entirely from DOM when devIndicators config property is set to false.

Even if the element is doing some other things even when hidden, the styles should be removed.

[lubieowoce]

The portal is also used for the error overlay/popup, which can be shown regardless of devIndicators.

We put it in a shadow root to isolate it (and its styles) from the rest of the page, maybe there's a way to filter those out in chrome's devtools?

[devklepacki]

I am not aware of any way to filter these media queries from Chrome and Googling it didn't help.

Still, maybe nextjs-portal should actually be removed if theres no errors (no overlay/popup shown)? Does it require to render something if theres no error shown?

I think (ironically) that's what React is for, isn't it? To dynamically render elements:

if (config.devIndicators === false && !errors) return null

Of course that's probably more complicated, but still.

Or maybe at least style elements could be added dynamically (only be present if theres error shown).