Drop node-sass support

[julien-deramond]

Warning

This PR is heavily draft. It prepares the modifications for when we'll drop node-sass support

Context

Sass has begun deprecating certain features (see #40962 and #40849), which currently generate warning messages during compilation with Sass.

The first major breaking change for us came in Sass 1.79.x, where the blue(), red(), and green() functions were deprecated. These functions were replaced by the color.channel() function, which is not supported by node-sass, and where we can't use any workaround on our side.

As a result, addressing these warnings requires us to drop node-sass support really soon.

Bootstrap v6 development has not yet started, which raises an important consideration: Dart Sass v2 might be released before Bootstrap v6. If that happens, it may become necessary to remove node-sass support in the final Bootstrap v5.x release rather than waiting for v6. This is because Bootstrap v6 will likely introduce a significant set of new features, whereas a v5.x release can focus on resolving compatibility issues. Dropping node-sass in the last v5.x release ensures that all v5 content remains accessible to node-sass users while aligning with Dart Sass's latest updates.

Even if it is clearly a breaking change, for node-sass users, with the right communication, I think this could be an acceptable solution for everyone.

It'll also mean that for everyone, cascading the node-sass removal, Bootstrap users will need to use @use instead of @import, but also @use <color;math;map;etc.>.

Description

This PR drops node-sass support and bump the sass dependency to the latest release.

Following these changes, users will need to use @use instead of @import, and use @use Sass color, math, map, etc. modules.

Sub-tasks

• Drop dedicated node-sass GitHub workflow
• Replace RGBA with rgba
• Bump sass → 1.79.6
  • Deprecation Warning: blue() is deprecated. Suggestion: color.channel($color, "blue", $space: rgb) More info: https://sass-lang.com/d/color-functions (same thing for red() and green()) → 1816145
• Bump sass → 1.80.x
• Bump sass → 1.81.x
• Bump sass → 1.82.x
• Bump sass → 1.83.x

• Check the diff between dist/css/bootstrap.css from the main branch and this one
• Check if we need to do something about rfs repository (and vendor dir here)
• Hugo documentation build locally, with the docs job, and with Netlify
• Check the documentation to remove node-sass specific content (if any)
• Add somewhere in the documentation that Bootstrap doesn't support node-sass anymore
• After the merge of this PR, update the examples repository

Dart Sass and Hugo

Dart Sass is compatible with Hugo v0.114.0 and later.

However, by default, Hugo will still use "libsass". Based on the official Hugo doc for Dart Sass, I've made the following changes:

• Replaced sass dependency by sass-embedded because Hugo needs the embedded version to compile and run the documentation. If we have kept the sass dependency, we should install it globally on the computer instead of using the one in node_modules/.bin
  Please note that it can be considered as safe since it's mentioned in https://github.com/sass/embedded-host-node that:

  Despite being different packages, both sass and sass-embedded are considered "Dart Sass" since they have the same underlying implementation. Since the first stable release of the sass-embedded package, both packages are released at the same time and share the same version number.

• Removed the hugo-bin" parameter in package.json
• Used "transpiler" "dartsass" in Sass options in site/layouts/partials/stylesheet.html
• Not entirely sure why but still had to sudo snap install dart-sass in .github/workflows/docs.yml

Please note that there was a test PR made a long time ago at #39700 too.

Type of changes

• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• (N/A) I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-41112--twbs-bootstrap.netlify.app/

Related issues

Closes #40962
Closes #40849

[julien-deramond]

I removed the mix($indigo, $blue, 50%) because color.mix($indigo, $blue, 50%) doesn't return a value as an hex string, but a color that should be transformed to a hex string. I don't think it's necessary to add such complexity for now. Let's see at the end of the PR if we reintroduce something like that.

[Ayushch-2800]

I think that the mix($indigo, $blue, 50%) is not appropriate in this as css and bootstrap has feature of colour-mix which include the change or mix in colour using hex string but you can't use colour.mix to change colour into hex string

[julien-deramond]

Changes here are for now due to the introduction of color.* functions that return the color as a rgb values instead of an hex value. The strings for the fill values of SVGs are a bit longer, so the bundle is a little bit bigger. For instance:

4698,4699c4698,4699
<   --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
<   --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
---
>   --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28109.8, 168, 253.8%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
>   --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28109.8, 168, 253.8%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");

However, it doesn't seem to be a regression so far.

[mrholek]

@julien-deramond Sass color functions don't round particular values in RGB colors (Please check this - sass/dart-sass#2456). You chose to round values in the following functions:

@function to-rgb($value) {
  @return math.round(color.channel($value, "red", $space: rgb)), math.round(color.channel($value, "green", $space: rgb)), math.round(color.channel($value, "blue", $space: rgb));
}

@function luminance($color) {
  $rgb: (
    "r": math.round(color.channel($color, "red", $space: rgb)), // stylelint-disable-line scss/at-function-named-arguments
    "g": math.round(color.channel($color, "green", $space: rgb)), // stylelint-disable-line scss/at-function-named-arguments
    "b": math.round(color.channel($color, "blue", $space: rgb)) // stylelint-disable-line scss/at-function-named-arguments
  );

  @each $name, $value in $rgb {
    $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
    $rgb: map-merge($rgb, ($name: $value));
  }

  @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
}

I recommend avoiding math rounds in those functions, as suggested by the Sass creators. It requires modifying the luminance function like this. The math.round is only required in nth()

@function luminance($color) {
  $rgb: (
    "r": color.channel($color, "red", $space: rgb), // stylelint-disable-line scss/at-function-named-arguments
    "g": color.channel($color, "green", $space: rgb), // stylelint-disable-line scss/at-function-named-arguments
    "b": color.channel($color, "blue", $space: rgb) // stylelint-disable-line scss/at-function-named-arguments
  );

  @each $name, $value in $rgb {
    $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, math.round($value + 1)));
    $rgb: map-merge($rgb, ($name: $value));
  }

  @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
}