From 14fd2e2f9ebf1784451984e2472375745dd4af4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <juderamond@gmail.com>
Date: Thu, 19 Dec 2024 08:37:39 +0100
Subject: [PATCH] Drop `node-sass` support

---
 .github/workflows/node-sass.yml  | 49 --------------------------------
 scss/helpers/_color-bg.scss      |  3 +-
 scss/helpers/_colored-links.scss | 17 ++++++-----
 3 files changed, 9 insertions(+), 60 deletions(-)
 delete mode 100644 .github/workflows/node-sass.yml

diff --git a/.github/workflows/node-sass.yml b/.github/workflows/node-sass.yml
deleted file mode 100644
index 493cc35fde..0000000000
--- a/.github/workflows/node-sass.yml
+++ /dev/null
@@ -1,49 +0,0 @@
-name: CSS (node-sass)
-
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-  workflow_dispatch:
-
-env:
-  FORCE_COLOR: 2
-  NODE: 20
-
-permissions:
-  contents: read
-
-jobs:
-  css:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Clone repository
-        uses: actions/checkout@v4
-        with:
-          persist-credentials: false
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: "${{ env.NODE }}"
-
-      - name: Build CSS with node-sass
-        run: |
-          npx --package node-sass@latest node-sass --version
-          npx --package node-sass@latest node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/ -o dist-sass/css/
-          ls -Al dist-sass/css
-
-      - name: Check built CSS files for Sass variables
-        shell: bash
-        run: |
-          SASS_VARS_FOUND=$(find "dist-sass/css/" -type f -name "*.css" -print0 | xargs -0 --no-run-if-empty grep -F "\$" || true)
-          if [[ -z "$SASS_VARS_FOUND" ]]; then
-            echo "All good, no Sass variables found!"
-            exit 0
-          else
-            echo "Found $(echo "$SASS_VARS_FOUND" | wc -l | bc) Sass variables:"
-            echo "$SASS_VARS_FOUND"
-            exit 1
-          fi
diff --git a/scss/helpers/_color-bg.scss b/scss/helpers/_color-bg.scss
index 1a3a4cffd6..fa02a9f3b7 100644
--- a/scss/helpers/_color-bg.scss
+++ b/scss/helpers/_color-bg.scss
@@ -1,7 +1,6 @@
-// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
 @each $color, $value in $theme-colors {
   .text-bg-#{$color} {
     color: color-contrast($value) if($enable-important-utilities, !important, null);
-    background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+    background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
   }
 }
diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss
index 5f86857800..7685c52855 100644
--- a/scss/helpers/_colored-links.scss
+++ b/scss/helpers/_colored-links.scss
@@ -1,15 +1,14 @@
-// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
 @each $color, $value in $theme-colors {
   .link-#{$color} {
-    color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
-    text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+    color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+    text-decoration-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
 
     @if $link-shade-percentage != 0 {
       &:hover,
       &:focus {
         $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
-        color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
-        text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+        color: rgba(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+        text-decoration-color: rgba(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
       }
     }
   }
@@ -17,14 +16,14 @@
 
 // One-off special link helper as a bridge until v6
 .link-body-emphasis {
-  color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
-  text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+  color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+  text-decoration-color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
 
   @if $link-shade-percentage != 0 {
     &:hover,
     &:focus {
-      color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);
-      text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null);
+      color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);
+      text-decoration-color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null);
     }
   }
 }