Bundle Dart Sass into Hugo installation process

[peaceiris]

According to the documentation, Hugo seems to have a plan to bind the Embedded Dart Sass as the same as LibSass (Hugo extended). I expect that the improvement will be done at bep/godartsass with embed package known as a new feature in Go 1.16.

The transpiler to use, valid values are libsass (default) and dartsass. Note that the Embedded Dart Sass project is still in beta (beta 5 at the time of writing). The release is scheduled for Q1 2021. We will try to improve the installation process by then, but if you want to use Hugo with Dart Sass you need to download a release binary from Embedded Dart Sass (Hugo after 0.81.0 requires beta 6 or newer) and make sure it’s in your PC’s $PATH (or %PATH% on Windows).

https://gohugo.io/hugo-pipes/scss-sass/#options

Is that possible? And, is there any plan to bind the Embedded Dart Sass into Hugo?

Related Links

• Binding Embedded Dart Sass into Hugo - feature - HUGO
• sass/dart-sass-embedded: A wrapper for Dart Sass that implements the compiler side of the Embedded Sass protocol
• bep/godartsass: Go API backed by the native Dart Sass Embedded executable.
• Integrate Dart Sass · Issue #495 · peaceiris/actions-hugo

[bep]

Is that possible? And, is there any plan to bind the Embedded Dart Sass into Hugo?

We cannot (I'm probably sure about that) embed this into Hugo's binary (the embedded files in Go 1.16 is not executable).

What we may consider (or: we should just do it, but nothing comes for free, it takes time) is to create "installables" (e.g. MSI on Windows) that would package this together and handling the PATH setup etc. We're already building deb packages for Linux and that should be possible to add.

I think it then boils down to this issue:

goreleaser/goreleaser#1295

[peaceiris]

I see.

Besides MSI and Linux deb packages, other package management tools (like homebrew) will need to update the installation process to include the Embedded Dart Sass in the future, I think.

[bep]

I do suspect that we need to consolidate the installation options at some point. I'm getting dizzy about the current situation. Re. brew we could have our own "brew tap" -- then we could build "everything" as part of the official release.

[XhmikosR]

Hello everyone. We recently started hitting a deprecation error in our Sass code and we try to migrate to Dart Sass only. But AFAICT Hugo needs an external binary file dependent on OS, so we can't move forward, because that would make things a lot more complicated.

Just wondering if there's been any progress, thanks!

[davidsneighbour]

Is it a deprecation ERROR or WARNING? Node SASS is supported until December 2022 and you should ignore or disable these warnings (if they are warnings) before you panic :) If it's errors then post your SASS code in the discourse and we try to make it compatible.

[bep]

Just wondering if there's been any progress, thanks!

You will, in general, notice it on the issue if there is a progress.

[XhmikosR]

It's warnings only, but they are quite noisy so we are looking at ways of moving forward: twbs/bootstrap#34051

[TenSketch]

How to install dart sass in hugo? I'm using ubuntu and brew in my system?
https://github.com/sass/dart-sass-embedded/tree/1.0.0-beta.9

[jmooring]

@TenSketch Please use the forum (https://discourse.gohugo.io) for questions and troubleshooting. We prefer to use GitHub for verified bugs and vetted enhancements. Thanks.

[robsonsobral]

Dart SASS reached stable releases at Feb 01, 2022. The current version is 1.50

[bep]

I have no idea how to simply and safely and for all platforms do this. Suggestions welcome, but please consier the 3 keywords simply and safely and for all platforms.

[CamilleScholtz]

It seems like dart doesn't even support musl (see: sass/dart-sass-embedded#85), so for all platforms seems to be an impossibility, since big distros like Alpine Linux use musl.

[bep]

big distros like Alpine Linux use musl.

I'm not sure I would call Alpine Linux a "big distro", but I get your point ...

[robsonsobral]

Since some days ago, Dart SASS embed has even ARM 32bit versions. I'm not sure, but I guess it covers all platforms of Hugo Extended.

[CamilleScholtz]

Still no support for various distros that use musl, such as Alpine Linux: sass/dart-sass-embedded#106

[bep]

As to this particular issue, I guess what we practically could do is:

• Add Dart Sass to the Linux Debs where it's supported.
• Create a new MacOS .pkg (I have done some foundation work on this elsewhere)

But I need to shift my focus away from this particular area for a little now, but I will return.

[robsonsobral]

I hope everything is fine, @bep ! Thank you!

[bep]

@robsonsobral sure, by focus shifting I meant just "away from software packaging" which is fun for a little ...

[merchako]

As a data point, Hugo potentially breaks the moment someone uses modern CSS in SCSS, for example

background-color: hsl(var(--my-purple-hsl) / 50%) ;

And it's quite difficult for even moderately seasoned developers to remedy, as you can see in this thread, as the installation and configuration process for dart-sass-embedded isn't clear.

Hugo's error message doesn't help

Error: Error building site: TOCSS-DART: failed to transform "styles.scss" (text/x-scss). You need dart-sass-embedded in your system $PATH.: this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information

This link is a red herring, which strongly suggests that the current version isn't extended, and that installing the extended version will fix the issue.

you need the Hugo extended version, or else you may see an error message similar to the [above]… We release two set of binaries for technical reasons. The extended version is not what you get by default for some installation methods.

If it's not a priority to package Hugo with an automatic installation of Embedded Dart Sass, I would encourage those with the know-how to correct the relevant documentation.

[jmooring]

@merchako I've created an issue in the docs repository.

[bep]

If it's not a priority to package Hugo with an automatic installation of Embedded Dart Sass, I would encourage those with the know-how to correct the relevant documentation.

It's a high priority, but I just don't know how to do it.

[jmooring]

For Linux users, it is included in the Snap package.

[robsonsobral]

While DART doesn't support Alpine, there's nothing that can be done. So...

[merchako]

It's a high priority, but I just don't know how to do it.

@bep, I saw you apparently solve it for this person in the previously-reference thread. Unfortunately, there wasn't a lot of context about specifics, so it took me almost a day to figure out. Here's the gist of it:

To make modern SASS work with Hugo

1. Install Dart Sass Embedded as a binary
   How to install a binary on each OS
2. And add the folder that encloses its executable to your path (how to)
   For example, in ~/.zshrc on macOS

    export PATH="${HOME}/bin/sass_embedded:${PATH}"
   

3. Restart your terminal and check your path.

    echo $PATH
   

   The result should have sass_embedded/ in it, at least. Unfortunately, it's not easy to test that the path is actually working since the folder itself isn't an executable.
4. Restart hugo server

Does that help at all? I assume y'all know a whole lot more than me. Posting that outline would have made a huge difference, especially the specifics and links to the articles about appending the path. As a macOS user, I would absolutely love it if dart-sass-embedded could be included in a Homebrew tap like y'all did for Snap.

[CamilleScholtz]

An update on the musl/alpine-linux situation; dart-sass-embedded is now available in the testing repository.

[CamilleScholtz]

Testing this out right now, and using dart-sass my sass files compile just fine, however using Hugo and dart-sass-embedded I get the following error:

Error: Error building site: TOCSS-DART: failed to transform "sass/main.sass" (text/x-sass): "assets/sass/partials/_typography.sass:0:18": expected "{".
Total in 1542 ms

The _typography.sass looks as follows:

html, body
	-webkit-font-smoothing: antialiased
	-moz-osx-font-smoothing: grayscale
	color: var(--text-color)
	font-family: 'IM Fell English', serif
	text-rendering: optimizeLegibility

h1
	font-weight: 400
	-webkit-hyphens: manual

	i
		font-size: 90%
		font-style: italic
		text-transform: lowercase

I suspect sass is not actually supported, only scss?

[jmooring]

@onodera-punpun I am unable to reproduce the problem using the indented Sass you posted.

dart-sass-embedded --version

  "protocolVersion": "1.2.0",
  "compilerVersion": "1.56.2",
  "implementationVersion": "1.56.2",
  "implementationName": "Dart Sass",
  "id": 0

Please use the forum (https://discourse.gohugo.io/) for questions and troubleshooting. We prefer to use GitHub for verified bugs and vetted enhancements. Thanks.

[CamilleScholtz]

Thanks! Posted it on the forum with more steps to reproduce this: https://discourse.gohugo.io/t/dart-sass-embedded-does-not-build-valid-sass-files/43184

[rickdgray]

Dart Sass Embedded github is now archived. Looks like they moved the embedded build into the primary Dart Sass repo. The current build of embedded works well currently but who knows how long that'll be.

[jmooring]

@rickdgray

Embedded Dart Sass was deprecated in favor of Dart Sass. Hugo v0.114.0 and later are compatible with both Dart Sass (v1.63.4 and later) and Embedded Dart Sass (v1.62.1 and earlier).

To install Dart Sass:

OS	Package manager	Site	Installation
Linux	Homebrew	brew.sh	brew install sass/sass/sass
Linux	Snap	snapcraft.io	sudo snap install dart-sass
macOS	Homebrew	brew.sh	brew install sass/sass/sass
Windows	Chocolatey	chocolatey.org	choco install sass
Windows	Scoop	scoop.sh	scoop install sass

You may also install prebuilt binaries for Linux, macOS, and Windows.

Run hugo env to list the active transpilers.

[jmooring]

At this point I'm not sure it's worth spending any time on this.

In my view, Hugo has three primary¹ external dependencies: Git, Go, and Dart Sass. You can make the case that these are optional, but I'd estimate that (a) Git is required 99% of the time, (b) Go is currently required 30% of the time, and (c) Dart Sass is currently required 5% of the time. The Go and Dart Sass percentages will, obviously, increase over time.

We don't bundle Git or Go, so why should we bundle Dart Sass?

• Dart Sass installation is fast and easy on macOS, Linux, and Windows.
• Some percentage of developers will already have Dart Sass installed, and I suspect a high percentage of those will be at 1.63.5 or later within a few weeks/months.

I think any effort in this area should focus on package managers that provide Hugo installers: Homebrew, Chocolatey, and Scoop². Each of these package managers have Dart Sass installers as well, so adding Dart Sass as a package dependency is, for the most part, trivial. This should be tracked as a separate issue, or elsewhere (forum).

It would also be helpful if the primary CI/CD providers included Dart Sass in their base images, but installing Dart Sass during each build is fast, and again, somewhat trivial. Any lobbying³⁴⁵ we do should be tracked as a separate issue, or elsewhere (forum).

Footnotes

1. The secondary external dependencies are Node.js, Asciidoctor, Pandoc, and rst2html. We don't bundle these either. ↩

2. The Hugo Snap package for Linux already bundles all of the primary and secondary dependencies, including Dart Sass. ↩

3. I believe @brycewray is working with the Cloudflare Pages team to include Dart Sass in their build image. ↩

4. I contacted Netlify again today. ↩

5. GitLab pages already includes the Dart Sass installation step in their starter workflow for Hugo (see open PR for updates). ↩

[jmooring]

No longer actionable.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.