Next JS removes duplicated properties from CSS files after minification

[DemeSzabolcs]

Summary

I want to use both of these since one is supported by Chrome, and one is by Mozilla:

        width: -webkit-fill-available;
        width: -moz-available;

But after minification only the last property remains. I guess there is an option turned on to remove duplicated properties. Can I somehow turn off this option so both of the same property will be in the final CSS? I'm not using extra plugins or tools; I'm just running npm run dev or npm run build, which I haven't changed.

Additional information

No response

Example

No response

[Ashvith10]

@DemeSzabolcs doesn't PostCSS (assuming that you're using this) have the ability to convert newer, unsupported CSS to browser-supported feature, using postcss-preset-env?

I think all you need to do is add width: stretch; and it should be able to deal with it.

Before that, you need to import and add the plugin first.

[icyJoseph]

I can confirm.

Just to go over the point here, that this is a PostCSS configuration. It is possible to override some of these, but generally, you want to keep things at the default, and find the proper resolution. PostCSS devs have already thought about these, and 99.999% of cases, there's a declaration, and in other cases, a configuration you can toggle to get what you need.

[DemeSzabolcs]

@DemeSzabolcs doesn't PostCSS (assuming that you're using this) have the ability to convert newer, unsupported CSS to browser-supported feature, using postcss-preset-env?

I think all you need to do is add width: stretch; and it should be able to deal with it.

Before that, you need to import and add the plugin first.

Thanks!

I don't use that plugin, however, I'm having issues importing it.

1. I ran npm i postcss-preset-env.
2. I added a postcss.config.json as described here. https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/INSTALL.md#nextjs
3. I put this code inside

{
	"plugins": [
		"postcss-preset-env"
	]
}

But still, nothing happens, even if I use the width: stretch value.

[icyJoseph]

I used the create-next-app out of the box app, with tailwind, and it worked without doing anything else...

[DemeSzabolcs]

After some trial and error, I discovered that, indeed, Next js is by default using PostCSS and postcss-preset-env. So the width: stretch property works when I'm running npm run buld thus next build.

However, the problem is that this does not apply when using npm run dev thus next dev --turbo-pack. Is there any way to make this work during local development too, not just builds?

Edit: It seems like removing --turbo-pack from the next dev command fixed the issue.