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.

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
• Revert docs: add Sass deprecations notice in docs #41283 and Silence Sass deprecation warnings in parcel, vite, and webpack examples examples#585
• Revert twbs/examples@e9cb7cc

• 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)
• 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

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);
}

[mrholek]

@julien-deramond @XhmikosR I just finished the migration in my Bootstrap-based project, and I'm able to generate almost the same CSS as is available now. The only differences are in color: hex colors are now rgb, and the precision of the rgb colors is different than before.

Almost everything works like before. I can use whole library and override variables:

@use "bootstrap" with (
  $accordion-padding-x: 20rem
);

I can use particular components:

@use "alert";

But the problem occurs when I want to import a particular component and override its variables:

@use "alert" with (
  $accordion-padding-x: 20rem
);

Then I have the following error:

Error: This variable was not declared with !default in the @used module.
2 │   $accordion-padding-x: 20rem

What will you do with specific component variables? It's not possible to use certain components with custom variables. The only solution I came up with is to define component-related variables directly within the components. What do you think about it?