Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Drop node-sass support #41112

Draft
wants to merge 10 commits into
base: main
Choose a base branch
from
Draft

Conversation

julien-deramond
Copy link
Member

@julien-deramond julien-deramond commented Dec 19, 2024

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

Related issues

Closes #40962
Closes #40849

@julien-deramond julien-deramond force-pushed the main-jd-drop-node-sass-support branch from 898c14a to 1816145 Compare December 19, 2024 09:35
@julien-deramond julien-deramond force-pushed the main-jd-drop-node-sass-support branch from 1816145 to f232df5 Compare December 19, 2024 13:59
@@ -46,7 +46,7 @@
}
}
@include color-mode(dark, true) {
--custom-color: #{mix($indigo, $blue, 50%)};
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

package.json Outdated Show resolved Hide resolved
@julien-deramond julien-deramond force-pushed the main-jd-drop-node-sass-support branch from 906f9b8 to 8ec183e Compare December 22, 2024 08:54
@julien-deramond julien-deramond force-pushed the main-jd-drop-node-sass-support branch from 8ec183e to 343bc9e Compare December 24, 2024 08:16
@@ -14,23 +14,23 @@
},
{
"path": "./dist/css/bootstrap-reboot.min.css",
"maxSize": "3.25 kB"
"maxSize": "3.5 kB"
Copy link
Member Author

@julien-deramond julien-deramond Dec 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

dart-sass 1.80.0+ throwing a lot of deprecations New deprecations in Sass 1.79
2 participants