Discourse moved to Dart Sass

Announcements
1

We just made a big upgrade to our Sass compiler pipeline in Discourse, moving from the deprecated libsass to the maintained Dart Sass.

This is a seamless move, and nothing should change on your website after the upgrade. In the rare case that something broke, read-on.

A note for developers & designers

During the move, we went over all open-source plugins and themes and made sure everything was still working with the new pipeline, and made changes/PRs to handle any warnings during compilation.

Version details

This moves us

From:

  • sassc 2.0.1 (Feb 2019)
  • libsass 3.5.2 (May 2018)

To:

  • dart-sass 1.58 (Jan 2023)

This update applies the following deprecations:

These breaking changes are coming soon or have recently been released:

Functions are stricter about which units they allow beginning in Dart Sass 1.32.0.

Selectors with invalid combinators are invalid beginning in Dart Sass 1.54.0.

/ is changing from a division operation to a list separator beginning in Dart Sass 1.33.0.

Parsing the special syntax of @-moz-document will be invalid beginning in Dart Sass 1.7.2.

Compound selectors could not be extended in Dart Sass 1.0.0 and Ruby Sass 4.0.0.

Q&A

There was no hard-breaking changes for this upgrade, so 99% of the themes will work just fine.

If you are running Discourse without any custom themes, nothing changes. Next time you upgrade (or are upgraded by your hosting company) this will happen in the background.

If you are on CDCK hosting and using a theme we developed for you, we have already made it compatible with Dart Sass.

If you use an official theme and/or a number of theme-component, we’ve already made those compatible with the new Sass version.

If your custom theme is broken, please share it with us and we will help fixing it.

17 Likes
2

:sweat_smile: CW and Multilingual both broke because of this but have been patched.

7 Likes
3

Oh thanks for the heads-up, looks like sass-migrator doesn’t cover this one :man_facepalming:. I’m searching for instances of this now.

EDIT: I was worried about this, but after grepping for this error in all the open and closed source plugin and themes I only found this usage of extend on the two plugins you mentioned.

9 Likes
4

hi good morning, since the update, Our header bar has increased in size there is a gap of at least an inch at the top of the page

edit.

found this was in the header part of the css

other’s were blank so now the header is spot on, however i cant add a custom background

thanks

3 Likes
5

Not sure if this is a problem with the CSS or a problem with the parser but I thought it might be good to share anyway.

Discourse::ScssError: Error: Expected whitespace

@media screen and(min-width: $breakpoint-sm) {
                 ^
5 Likes