Can Vite produce native CSS builds (concatenation and minification)?

[asuh]

In an effort to simplify how I write CSS, I have decided to try ditching preprocessors and support native CSS going forward. This means all the newest features should be supported, such as nesting, relative color syntax, or color spaces like P3.

I now understand that Vite defaults to using PostCSS for transpiling the stylesheets, and the concatenation as well as minification work mostly as expected. I am also interested in what LightningCSS provides and think it could be a better solution.

I'll take LightningCSS's playground code as an example:

@custom-media --modern (color), (hover);

.foo {
  background: yellow;

  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;

  -webkit-transition: background 200ms;
  -moz-transition: background 200ms;
  transition: background 200ms;

  &.bar {
    color: green;
  }
}

@media (--modern) and (width > 1024px) {
  .a {
    color: green;
  }
}

Assuming this snippet of native CSS doesn't need any preprocessing and should support Firefox/Chrome 125 as of June 2024:

1. I'd expect vendor prefixes to disappear
2. No nested CSS rules would need to be flattened

.foo{background:#ff0;border-radius:2px;transition:background .2s;&.bar{color:green}}@media ((color) or (hover)) and (width>1024px){.a{color:green}}

In most ways, the above is truly just a 1:1 minification, and that's basically what I want to see after running the build process. Assuming sourcemap: 'inline' is enabled in the build object, I should also be able to have a tree structure of CSS files that correctly show the original source file for a rule.

How do I accomplish this? I cannot see that Vite has direct support for browserslist. I tried it in three places:

1. package.json
2. vite.config.js as an import and inside of css.targets
3. .browserslistrc

None of the above affected the build file for the CSS.

Maybe I'm just missing something?

https://lightningcss.dev/transpilation.html#browser-targets
https://vitejs.dev/guide/features#lightning-css