[CSS] Incompatable @charset statements

[devmatheus]

Hello,

I'm having this error when trying to import some libs with supposed different charsets (and there is the typo in the message, "Incompatable"):

[vite] Internal server error: [postcss] Incompatable @charset statements:
  'UTF-8' specified in /var/www/html/node_modules/slick-carousel/slick/slick-theme.css
  "UTF-8" specified in /var/www/html/vendor/filament/forms/dist/module.esm.css
  Plugin: vite:css
  File: /var/www/html/resources/css/app.css?direct:undefined:undefined
      at handleCharset (file:///var/www/html/node_modules/vite/dist/node/chunks/dep-9deb2354.js:708:23)
      at file:///var/www/html/node_modules/vite/dist/node/chunks/dep-9deb2354.js:723:56
      at Array.forEach (<anonymous>)
      at file:///var/www/html/node_modules/vite/dist/node/chunks/dep-9deb2354.js:721:33
      at Array.forEach (<anonymous>)
      at file:///var/www/html/node_modules/vite/dist/node/chunks/dep-9deb2354.js:717:24
      at async LazyResult.runAsync (/var/www/html/node_modules/postcss/lib/lazy-result.js:396:11)
      at async compileCSS (file:///var/www/html/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:43820:25)
      at async TransformContext.transform (file:///var/www/html/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:43310:55)
      at async Object.transform (file:///var/www/html/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:40228:30)

Screenshot: https://d.pr/i/vXmHxh

The difference is in the quotes: 'UTF-8' - "UTF-8".

How can I disable the charset check?

---

My environment:

vite.config.js

import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin'

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: [...refreshPaths, 'app/Http/Livewire/**'],
        }),
    ],
})

postcss.config.js

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

[sapphi-red]

@charset 'UTF-8' is not a valid syntax.
https://developer.mozilla.org/en-US/docs/Web/CSS/@charset#valid_and_invalid_charset_declarations

The error is coming from postcss-import and I guess it cannot be disabled.

[HeavenlyEntity]

So what was the way around for this @sapphi-red ? I am working with sass and the App.css has been changed to App.scss for a requirement by a lib. What is the solution?

[sapphi-red]

The code that uses @charset 'UTF-8' should be fixed as it's an invalid code.