Webpack build of Font Awesome adds \0 null-byte on one machine, not on others

Question

We are including font awesome via

$fa-font-path: "#{$asset-path}/../../project/assets/fonts/fontawesome";

@import "fontawesome/fontawesome";
@import "fontawesome/brands";
@import "fontawesome/solid";

In our Shopware 6 SCSS files.

We noticed on some machines (we are building on server), that the generate CSS file contains "\0" null bytes

.fa-certificate:before {
   content: "\0";
}

which leads to an output like this:

Shopware uses webpack to build the CSS file from SCSS.

What can be the reason for this additonal \0 ?

We saw https://github.com/FortAwesome/Font-Awesome/issues/14660 but adding the

@charset "UTF-8";

at the beginning of the CSS file does not help.

When we copy the built file from one machine to the other, it works. So it does not seem to be a problem on serving the CSS by the server, but during the built process.

EDIT: Digging deeper:

In the fontawesome SCSS there is:

$fa-var-certificate: \f0a3;

...

.#{$fa-css-prefix}-certificate:before { content: fa-content($fa-var-certificate); }


// Convenience function used to set content property
@function fa-content($fa-var) {
  @return unquote("\"#{ $fa-var }\"");
}

Unquote is a sass_function - I don't know where the \0 comes from

EDIT2 We compared the file vendor/shopware/storefront/Resources/app/storefront/package-lock.json on both machines, and they are both identical - so the same node package should be in use, just a slightly different node version (local: v14.18.2, server: v14.18.1). Still the problem is not reproducible locally.

Answer 1

While not an ideal solution, simply replacing the \0 character in the compiled css file seems to do the trick:

sed -i 's/\\0"/"/g' public/theme/c220db9f32a7e868b9b8009bdaa080d0/css/all.css

---

I've discovered when I use the sass binary directly it does not append the \0 characters:

$ ./vendor/shopware/storefront/Resources/app/storefront/node_modules/.bin/sass custom/static-plugins/Theme/src/Resources/app/storefront/src/scss/_font-awesome.scss

The generated code looks a bit different though:

.fa-zhihu:before {
  content: "\f63f";
}

This seems to indicate the error is somewhere in shopware's webpack stack.