Switch from node-sass to dart-sass

[twschiller]

Context

• https://sass-lang.com/blog/libsass-is-deprecated
• dart-sass has support for modern features (e.g., @use), https://sass-lang.com/documentation/at-rules/use

[fregante]

Blocked by:

• Always quote color names when using them as strings or map keys (for example, "indigo") twbs/bootstrap#29219 (comment)

Dart sass produces a lot of warnings on Bootstrap’s code and Bootstrap isn't even tracking this issue.

[fregante]

I investigated this and yes, probably switching to Bootstrap 5 would fix these issues, but from what I see we can't do that because we vendored the entire theme. That's why when I tried to install v5 I still got errors.

Example:

pixiebrix-extension/src/vendors/theme/assets/styles/_variables.scss

Lines 21 to 37 in a5521ed

	blue: $blue,
	indigo: $indigo,
	purple: $purple,
	pink: $pink,
	red: $red,
	orange: $orange,
	yellow: $yellow,
	green: $green,
	teal: $teal,
	cyan: $cyan,
	white: $white,
	gray: #434a54,
	gray-light: #aab2bd,
	gray-lighter: #e8eff4,
	gray-lightest: #e6e9ed,
	gray-dark: #0f1531,
	black: #000000,

Fixed in v5 a few years ago: twbs/bootstrap#23701

---

In short, the switch is blocked by:

• Blocked by Upgrade to Bootstrap 5 #1072

[twschiller]

There's a pure JS version of dart-sass at: https://www.npmjs.com/package/sass

[fregante]

Yes that's the one I used in https://github.com/pixiebrix/pixiebrix-app/pull/465 as well

[fregante]

If desired, I suppose I can fix the issues in the vendored theme. I don’t think we're going to "upgrade" the theme to a later version at this point.