HugoBlox / hugo-blox-builder

🚨 GROW YOUR AUDIENCE WITH HUGOBLOX! 🚀 HugoBlox is an easy, fast no-code website builder for researchers, entrepreneurs, data scientists, and developers. Build stunning sites in minutes. 适合研究人员、企业家、数据科学家和开发者的简单快速无代码网站构建器。用拖放功能、可定制模板和内置SEO工具快速创建精美网站!
https://hugoblox.com/templates/
MIT License
8.36k stars 2.9k forks source link

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

Closed du33169 closed 1 year ago

du33169 commented 1 year ago

Preliminary Checks

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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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 :)