Vite + Sass + CSS Modules: `composes` prop limitation - sass

Question

I'm migrating my project from create-react-app to Vite.
Among my styles there is a following fragment:
// Button.module.scss
.btn {
border-radius: 8px;
border-style: solid;
padding: 8px;
cursor: pointer;
--btn-bg-color: #efefef;
&:not(:disabled) {
cursor: pointer;
background-color: var(--btn-bg-color);
&:hover {
--btn-bg-color: gray;
border-color: white;
}
}
}
And in other module:
.label {
composes: btn from 'src/Button.module.scss'
}
This used to build fine with webpack.
With Vite, in css bundle I get this:
._btn_x66zc_1 {
border-radius: 8px;
border-style: solid;
padding: 8px;
cursor: pointer;
--btn-bg-color: #efefef;
&
:not(:disabled) {
cursor: pointer;
background-color: var(--btn-bg-color);
&
:hover {
--btn-bg-color: gray;
border-color: #fff
}
}
}
and, respectively, CLI warnings:
warnings when minifying css:
▲ [WARNING] CSS nesting syntax is not supported in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14") [invalid-#nest]
<stdin>:309:2:
309 │ &:not(:disabled) {
╵ ^
Apparently, a module linked with composes prop isn't get pre-processed.
I tried to add a postcss-nested plugin – in a hope nesting syntax can be handled both at pre- and post-processing stages:
// vite.config.ts
{
css: {
postcss: { plugins: [ postcssNested() ] }
}
}
but this did nothing.
The questions are:
Is it possible to make it work as it used to?
Is the error I'm getting now an expected behaviour? (and thus, did react-app use some specific tricks to make this non-conventional usage possible?)