Skip over a leading BOM in CSS files

[David-Buyer]

Hello, it seems the @import statement in .css file when trying to bundling it, does not work. I get the following error ( the resulting bundle does not include correctly the code where @import points:

css/app.css: warning: Unexpected "@import"
    1 │ @import "./bootstrap/bootstrap.min.css";
      ╵    ~~~~~~~

1 warning

-> app.css

@import "./bootstrap/bootstrap.min.css";
html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
/* ..... */
}

-> esbuild-config.js

require('esbuild').build({
            entryPoints: ['./css/app.css'],
            bundle: true,
            outfile: './wwwroot/css/app.min.css',
            minify: true,
        })

But if i place @import statement at bottom or the in middle of the app.css file, then it works. The issue seems to happen just if the @import statement is placed on top.

Maybe there's something i wrong but i don't know what. Please check it about.

esbuild version is: 0.8.43

[evanw]

Because the ~~~~~~~ in the warning message is three spaces off from the @import, I'm guessing your file starts with a byte order mark (i.e. the bytes 0xEF 0xBB 0xBF). It looks like esbuild doesn't currently handle them. Whatever editor you're using to create that file is inserting those bytes. A quick workaround on your end could be to remove those bytes in your file. But esbuild should be changed to handle this case, so this is a bug in esbuild.

[David-Buyer]

Yes, that's true. The output bundled file contains the BOM:

\feff@import "./bootstrap/bootstrap.min.css"{}

My editor is MS Visual studio.

Thank you.