warning: "@charset" must be the first rule in the file (2.6.x regression ?)

Describe the bug

npm run build shows 100 warnings with

 > <stdin>:15:7495: warning: "@charset" must be the first rule in the file
    15 │ ...transform:rotate(0)}to{transform:rotate(2turn)}}@charset "UTF-8";/*!
       ╵                                                    ~~~~~~~~
   <stdin>:15:6767: note: This rule cannot come before a "@charset" rule
    15 │ ...t:attr(data-deselect);color:#fff}.multiselect-enter-active,.multi...

Appears to be a regression in 2.6.x

To reproduce:

npm init vite@latest my-vue-app -- --template vue

then add just 3 libraries to package.json and main.js

Minimal repo: https://github.com/mariusa/vite-warn

npm install
npm run build

FYI Also tried adding this to vite.config.js, which is not a solution (hiding the warnings instead of fixing the cause)

css: { preprocessorOptions: { scss: { charset: false } } }

but has no effect on warnings.

Previous reports, closed: https://github.com/vitejs/vite/issues/5519

Could this be caused by https://github.com/postcss/postcss-import ? FYI https://github.com/sass/dart-sass/issues/567#issuecomment-1003198108

Reproduction

https://github.com/mariusa/vite-warn

System Info

to proceed? (y) y

  System:
    OS: Linux 5.14 Fedora Linux 35 (Workstation Edition Prerelease)
    CPU: (8) x64 AMD Ryzen 7 4700U with Radeon Graphics
    Memory: 1.58 GB / 15.00 GB
    Container: Yes
    Shell: 5.1.8 - /bin/bash
  Binaries:
    Node: 16.10.0 - /usr/bin/node
    npm: 7.24.0 - /usr/bin/npm
  Browsers:
    Chrome: 96.0.4664.110
    Firefox: 93.0
  npmPackages:
    @vitejs/plugin-vue: ^2.0.0 => 2.0.1 
    vite: ^2.7.2 => 2.7.10

Used Package Manager

npm

Logs

vite v2.7.10 building for production...
✓ 78 modules transformed.
rendering chunks (1)...warnings when minifying css:
 > <stdin>:15:7495: warning: "@charset" must be the first rule in the file
    15 │ ...transform:rotate(0)}to{transform:rotate(2turn)}}@charset "UTF-8";/*!
       ╵                                                    ~~~~~~~~
   <stdin>:2:0: note: This rule cannot come before a "@charset" rule
     2 │ a[data-v-3d3c9e2e] {
       ╵ ^


 > <stdin>:15:7495: warning: "@charset" must be the first rule in the file
    15 │ ...transform:rotate(0)}to{transform:rotate(2turn)}}@charset "UTF-8";/*!
       ╵                                                    ~~~~~~~~
   <stdin>:6:0: note: This rule cannot come before a "@charset" rule
     6 │ #app {
       ╵ ^
...

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[agileago]

vite.config.ts

css: {
    postcss: {
      plugins: [
        {
          postcssPlugin: 'internal:charset-removal',
          AtRule: {
            charset: (atRule) => {
              if (atRule.name === 'charset') {
                atRule.remove();
              }
            }
          }
        }
      ]
    }
}

[bluwy]

According to the esbuild warning, it seems like esbuild has a hard stance that that’s how @charset would work (likely by a spec). So I doubt esbuild will be fixing that soon. So I think the correct solution is to disable the charset through preprocessorOptions.

I didn’t need a postcss plugin to fix it though, but specifying the config for both sass and scss worked for me:

css: {
  preprocessorOptions: {
   sass: { charset: false },
   scss: { charset: false },
  },
},