Render fails for SCSS file encoded in UTF8-BOM about sass-extract HOT 1 OPEN

Ok I understand what was the issue.

TL/DR

SCSS file was encoded in UTF8-BOM. Switching to UTF8 (without BOM) resolved the issue.

Explanation

I created a single js file containing only the following line:

const sassExtract = require('sass-extract');
const renderedSass = sassExtract.renderSync({ file: "file.scss" });
console.log(renderedSass);

And I ran it with node test.js (instead of doing it through webpack).
It allowed me to get the real error:

.\node_modules\gonzales-pe\lib\gonzales.js:812
            throw new ParsingError(e, css);
            ^
Parsing error: Please check validity of the block starting from line #1

After fiddling with my scss file, I discover that it was stored in UTF8 with a BOM (a byte-order mask).
It seems that the Gonzales lib is choking on this byte.

Removing the BOM (i.e. storing as UTF8 only) resolve the issue.

Workaround

Workaround 1 : remove BOM of SCSS file

Workaround 2: read file with fs, remove BOM and pass it directly to the lib:

const sassExtract = require('sass-extract');
const renderedSass = sassExtract.renderSync({
    data: fs.readFileSync("file.scss", 'utf-8').replace(/^\uFEFF/, '')
});
console.log(renderedSass);

Solution taken from nodejs/node-v0.x-archive/issues/1918

Fix

I think the issue lies in the sass-extract library. Gonzales API expects a string.
The BOM is not part of the text. It is part of a file specification to identify an UTF8 encoded file.

Sass-extract should strip any BOM before passing it to the parser.

from sass-extract.