Vite: "@charset" must be the first rule in the file

[maggie44]

What happened?

When building using Vite, the following message displays:

▲ [WARNING] "@charset" must be the first rule in the file

    <stdin>:68:0:
      68 │ @charset "UTF-8";
         ╵ ~~~~~~~~

  This rule cannot come before a "@charset" rule

    <stdin>:1:0:
      1 │ @font-face {
        ╵ ^

There is a proposed fix to consider as default: vitejs/vite#6333 (comment)

What did you expect to happen?

No need for these error messages to display.

Reproduction URL

Not applicable

How to reproduce?

Run quasar build on a new Quasar project using Vite (I chose Typescript but otherwise default settings).

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite)

Platforms/Browsers

No response

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[github-actions]

Hi @Maggie0002! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, Codesandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[smolinari]

@Maggie0002 - See here: https://quasar.dev/start/vite-plugin#warning-when-building-for-production

Scott

[pdanpdan]

It looks like this works: https://lifesaver.codes/answer/build-includes-charset-problem-5833

In quasar.config.js under build key

{
  build: {
    extendViteConf(viteConf) {
      if (viteConf.css !== Object(viteConf.css)) {
        viteConf.css = {};
      }
      if (viteConf.css.postcss !== Object(viteConf.css.postcss)) {
        viteConf.css.postcss = {};
      }
      if (Array.isArray(viteConf.css.postcss.plugins) === false) {
        viteConf.css.postcss.plugins = [];
      }
      viteConf.css.postcss.plugins.unshift({
        postcssPlugin: 'internal:charset-removal',
        AtRule: {
          charset: (atRule) => {
            if (atRule.name === 'charset') {
              atRule.remove();
            }
          },
        },
      });
    },
  },
},

[smolinari]

@pdanpdan - Confirmed. This fixes the build warning. Thanks!

Scott

[maggie44]

I think there is an upstream fix coming for it too: vitejs/vite#6333 (comment) & vitejs/vite#7678