The weird bug caused by CSS `fit-content` being optimised wrongly in a Vue production build

Background

My bobing site has a button on the opening welcome screen whose height adjustment was off, so I thought I would fix it.

What it looked like

The button's CSS had this problem:

• Local dev (pnpm dev): the style was fine, height: fit-content took effect and was not struck through.
• Production (GitHub Pages + Edge browser): .welcome_btn's height used -moz-fit-content and was struck through as invalid; changing it to fit-content by hand fixed it.

The investigation

First I confirmed the Edge version (152.0.4191.66) to rule out a browser compatibility problem; then, going through the Network panel in Edge's dev tools, I found the css file the browser had fetched and compared the source with the CSS actually served in production, and the standard syntax had been deleted from the build output. So I concluded it was a bug in the CSS post-processing (minification/deduplication) of the production build, not the browser or the hosting platform.

Finding the root cause

The wrong optimisation by Vite's CSS minifier (cssnano) in the production build caused the button style to break. Concretely, during the production build Vite's CSS minifier (cssnano) wrongly treated fit-content and -moz-fit-content as duplicate declarations, so when deduplicating it kept only the later -moz-fit-content and deleted the standard fit-content written first.

Source:

.welcome_btn {
width: fit-content;
height: fit-content;
width: -moz-fit-content;
height: -moz-fit-content;
...
}

Build output:

.welcome_btn {
width: -moz-fit-content;
height: -moz-fit-content;  /* only this line survived; Edge(Chromium) does not recognise it, so the style is dropped */
...
}

The fix: change the order of the properties

Put the standard syntax after the vendor prefix, so that what survives the bundler's "deduplication" is the standard syntax:

.welcome_btn {
  width: -moz-fit-content;
  height: -moz-fit-content;
  width: fit-content;      /* standard syntax goes last */
  height: fit-content;
  ...
}

That fix may leave the project unable to support Firefox from before 2021.

Did I try other fixes?

Yes. I tried swapping the CSS minifier, but it did not help.

Concretely: I tried changing the config in vite.config.ts.

//vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
    ...
  build: {
    ...
    cssMinify: 'lightningcss', // use lightningcss instead of cssnano
  },
})

I tried lightningcss in place of cssnano, but after clearing dist and rebuilding the problem was still there.

My guess is that this Vite version has limited support for lightningcss and may fall back to esbuild/cssnano to compile, or that esbuild has similar logic for merging duplicate declarations.

Conclusion

The problem is, at heart, Vite's CSS minifier deduplicating wrongly in production builds for properties that need a fallback. Reordering fit-content and -moz-fit-content fixes it.

Important

This article was translated by Hermes Agent; the original text can be found at here. The translation is for reference only. Translation time: 2026-11-05