Bundle Embedded 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:

https://github.com/goreleaser/goreleaser/issues/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: https://github.com/twbs/bootstrap/issues/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: https://github.com/sass/dart-sass-embedded/issues/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: https://github.com/sass/dart-sass-embedded/issues/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.

[robsonsobral]

    &::after {
      float: right;

      color: palette('gray', 'light');

      content: ', ';

      @supports selector(:has(:checked)) {
        content: none;
      }
    }

😭

[bep]

@merchako so, I know how to install Dart Sass, but the little bit of a challenge here is to integrate this with the release process in a practical and more or less complete way; I could probably add this to the Linux Deb + create a MacOS pkg installer, but we would then get complaints from the others (Windows users, Brew users).

[robsonsobral]

but we would then get complaints from the others (Windows users, Brew users).

😠 👿 😡

[jmooring]

@bep I've created stand alone installers for Snap, Chocolatey, and Scoop. Keeping track of status for these and other package managers here: https://github.com/gohugoio/hugoDocs/issues/1921#issuecomment-1328063077

[bep]

@jmooring I really applaud the work you're doing with this. I can note that the RPC model that's used with the Dart Sass integration has renewed my optimism that we could get rid of the "hugo extended" version and finally get a decent plugin system in Hugo. I have done some more field work on this here and other places: https://github.com/bep/execrpc

[bep]

If you run hugo env in Hugo >= 0.108.0 you will no see if and what version of Dart Sass you have installed:

~/d/g/g/hugoDocs ❯❯❯ hugo env                                                                                                master
hugo v0.109.0-DEV-cc574ef1200986ab287eca40db59053ccdd205d6+extended darwin/arm64 BuildDate=2022-12-06T13:50:51Z
GOOS="darwin"
GOARCH="arm64"
GOVERSION="go1.19.3"
github.com/sass/libsass="3.6.5"
github.com/webmproject/libwebp="v1.2.4"
github.com/sass/dart-sass-embedded/protocol="1.1.0"
github.com/sass/dart-sass-embedded/compiler="1.56.1"
github.com/sass/dart-sass-embedded/implementation="1.56.1"