Dart Sass 3.0.0 incompatibility

[carstene1ns]

Currently sakura uses the @import rule to include the main css in the themes.
This is deprecated and will stop working soonish.
It then needs to be migrated to @use and @forward.

I am not sure, if using the themes as modules or going the other way around is better, but as a quick fix I came up with this in my current project, which is close to the current structure:

/* theme file, e.g. sakura-dark.scss */

@use "main" with (
	$color-blossom: #ffffff,
	$color-fade: #c9c9c9,

	$color-bg: #222222,
	$color-bg-alt: #4a4a4a,

	/* more variables ... */
);

/* default styles at top of _main.scss file */

$color-blossom: #1d7484 !default;
$color-fade: #982c61 !default;
$color-bg: #f9f9f9 !default;
$color-bg-alt: #f1f1f1 !default;

/* more defaults ... */

This works, but has a little different syntax.

See also:

• https://sass-lang.com/documentation/breaking-changes/import/
• https://coreui.io/blog/how-to-fix-sass-import-rules-are-deprecated-and-will-be-removed-in-dart-sass-3-0-0/

[oxalorg]

Thanks for this, I'll read through the links.

I think the best way forward is to drop sass completely and use just plain vanilla css with variables, and some bash magic to stich up the final files 🤔