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

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:

1. Is it possible to make it work as it used to?
2. 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?)

Excretion

warnings when minifying css: are you just minifying the file or are you running scss to compile it? – Expository

@AmauryHanser I'm running vite build. Which does both pre-processing and minifiying. Btw, I updated the question, because I found the source of trouble. Please revisit it, if you mind. – Excretion

Same issue here. Thanks for pointing in the direction of composes because I think it's the root cause of this issue with vitejs. I did some digging and found this issue on the ViteJS's repo and it looks to be the main reason of the minification warnings, it seems the scss are not processed when composed: github.com/vitejs/vite/issues/10340 – Multiparous

There's an open PR that seems to fix the issue but I haven't tried it: github.com/vitejs/vite/pull/12076 Also I'm afraid the issue cannot be circumvented with some vitejs configuration. I hope to be wrong on this. Maybe we can fix this by writing a ViteJS plugin but I'm a novice on vitejs so I'm not sure – Multiparous