unknown char \ufeff in generated public/css/wowchemy.[random].css

[du33169]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/wowchemy/wowchemy-hugo-themes/issues?q=is%3Aissue
• This issue is not a question, feature request, or anything other than a bug report directly related to Wowchemy. Please post those things on Discord: https://discord.gg/z8wNYzb

Description

A strange character \ufeff appears in public/css/wowchemy.[random].css after the hugo build command,
breaking the selector :root and any style inside.
Seems related to encoding.

The command hugo server is working fine.

Reproduction Link

https://github.com/wowchemy/starter-hugo-research-group

Steps to Reproduce

git clone https://github.com/wowchemy/starter-hugo-research-group
cd starter-hugo-research-group
hugo

then open public/css/wowchemy.[random].css

Expected Result

/*! Wowchemy v5.7.0 | https://wowchemy.com/ */
/*! Copyright 2016-present George Cushen (https://georgecushen.com/) */
/*! License: https://github.com/wowchemy/wowchemy-hugo-themes/blob/main/LICENSE.md */
:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#1565c0;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;
...

Actual Result

View file in vscode(some editor may not display this char):

View in Firefox Developer Tool:

What Hugo Module versions does your site use?

module github.com/wowchemy/starter-hugo-research-group

go 1.15

require (
	github.com/wowchemy/wowchemy-hugo-themes/modules/wowchemy-plugin-netlify v1.0.0 // indirect
	github.com/wowchemy/wowchemy-hugo-themes/modules/wowchemy-plugin-netlify-cms v1.0.0 // indirect
	github.com/wowchemy/wowchemy-hugo-themes/modules/wowchemy-plugin-reveal v1.0.0 // indirect
	github.com/wowchemy/wowchemy-hugo-themes/modules/wowchemy/v5 v5.8.1 // indirect
)

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

Firefox

Which Wowchemy template are you using?

starter-hugo-research-group

What version of Hugo are you using?

hugo v0.116.1+extended

[gcushen]

@du33169 have you asked the Hugo team? You can ask the team at https://discourse.gohugo.io/ or https://github.com/gohugoio/hugo/issues/new/choose

This Wowchemy style code has not recently changed, so if the issue suddenly appeared, it's likely an issue with the recent version of Hugo rather than Wowchemy.

[du33169]

@du33169 have you asked the Hugo team? You can ask the team at https://discourse.gohugo.io/ or https://github.com/gohugoio/hugo/issues/new/choose

This Wowchemy style code has not recently changed, so if the issue suddenly appeared, it's likely an issue with the recent version of Hugo rather than Wowchemy.

This issue persisted when using Hugo v0.101+extended. That's weird if nobody has encountered this problem before.

'\ufeff' is actually the Byte Order Mark for UTF8_with_BOM.
And I found out that this issue can be solved by switching the sass transpiler to DartSass:

1. Install Dart-Sass
2. explicitly setting the transpiler to dartsass in site_head.html.
   https://github.com/wowchemy/wowchemy-hugo-themes/blob/98c928a7671543a44cc86dcdc5308ea3f23dd79a/modules/wowchemy/layouts/partials/site_head.html#L143
   To:

  {{ $css_options := dict "transpiler" "dartsass" "targetPath" "css/wowchemy.css" }}

I suppose it is Libsass, the default sass tanspiler that caused this issue, which has been deprecated by the Sass team in 2020 in favor of Dart Sass, but it is still embedded in hugo extended (ToCSS | Hugo).

I'm not sure if this should be reported to the Hugo team, since switching to DartSass does solve this issue, and Libsass seems to be a temporary fallback before they find a elegant way to handle the dependency on DartSass(hugo issue 8299).

[gcushen]

Wowchemy is a theme/framework for Hugo. It should use Hugo's built-in SASS functionality, without requiring users to install other SASS software. Based on your comments, this is not a Wowchemy issue, but a Hugo issue. Therefore, please feedback your comments to the Hugo team on the Hugo Github to help them improve or help contribute to fixing the issue in Hugo if you can :)