Deprecation warnings SCSS

[simon449]

What should happen?

I should compile my scripts and scss with gulpfile.js without any SCSS warnings
...

What happens instead?

When I compile my SCSS en JS files with a custom foundation setup, it gives 315 repetitive deprecation warnings. Because of this, compiling takes like +-6seconds to see the SCSS changes on the frontend. It works tho, but is there a way to get rid of the warnings?
...

Possible Solution

...

Test Case and/or Steps to Reproduce (for bugs)

This is my GULPFILE.JS (ignore the comments in Dutch, its easier for me this way to see what everything does)

const gulp = require('gulp');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const sourcemaps = require('gulp-sourcemaps');
const browserify = require('browserify');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const sass = require('gulp-sass')(require('sass'));
const cleanCSS = require('gulp-clean-css');
const sourcemapsCSS = require('gulp-sourcemaps');

// Paden naar je JS- en SCSS-bestanden
const paths = {
scripts: {
src: './js//*.js', // main js file
dest: './dist/js/' // Output map voor JS
},
styles: {
src: './scss//*.scss', // main scss file
dest: './dist/css/' // Output map voor CSS
}
};

// Task: Scripts bundelen en transpileren
function scripts() {
return browserify({
entries: './js/app.js', // Je main script
debug: true
})
.transform('babelify', { presets: ['@babel/preset-env'] }) // Babel transform
.bundle()
.pipe(source('bundle.js')) // Output als "bundle.js"
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(uglify()) // Minify
.pipe(sourcemaps.write('.')) // Sourcemaps
.pipe(gulp.dest(paths.scripts.dest)); // Output map voor JS
}

// Task: SCSS compileren, minificeren en verplaatsen naar dist/css
function styles() {
return gulp.src('./scss/app.scss') // Begin met de app.scss
.pipe(sourcemaps.init()) // Initialiseer sourcemaps voor CSS
.pipe(sass().on('error', sass.logError)) // Compileer SCSS naar CSS
.pipe(cleanCSS()) // Minificeer de CSS
.pipe(sourcemaps.write('.')) // Voeg sourcemaps toe
.pipe(gulp.dest(paths.styles.dest)); // Output map voor CSS
}

// Task: Watcher voor zowel JS- als SCSS-bestanden
function watchFiles() {
gulp.watch(paths.scripts.src, scripts); // Bewaak de JS-bestanden
gulp.watch(paths.styles.src, styles); // Bewaak de SCSS-bestanden
}

// Default Gulp task
exports.default = gulp.series(scripts, styles, watchFiles);

And this is my package.json:

{
"name": "testingfoundation",
"version": "1.0.0",
"description": "",
"main": "index.js",
"license": "ISC",
"scripts": {
"gulp": "gulp"
},
"dependencies": {
"foundation-sites": "^6.9.0"
},
"devDependencies": {
"@babel/core": "^7.26.0",
"@babel/preset-env": "^7.26.0",
"babelify": "^10.0.0",
"browserify": "^17.0.1",
"gulp": "^5.0.0",
"gulp-babel": "^8.0.0",
"gulp-clean-css": "^4.3.0",
"gulp-concat": "^2.6.1",
"gulp-sass": "^6.0.0",
"gulp-sourcemaps": "^2.6.5",
"gulp-uglify": "^3.0.2",
"sass": "^1.82.0",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0"
}
}

As you can see, I'm using the latest version of foundation and sass and gulp-sass.
This takes around 6 seconds to compile with 315 reptitive deprecation warnings.

Setting a quietdep in my gulp file didnt work.

What am I missing here? What am I doing wrong?

Here are a few examples of the 315 warnings i'm getting:

Deprecation Warning: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use map.values instead.

More info and automated migrator: https://sass-lang.com/d/import

╷
41 │ @if nth(map-values($breakpoints), 1) != 0 {
│ ^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\foundation-sites\scss\util_breakpoint.scss 41:9 @import
node_modules\foundation-sites\scss\util_util.scss 12:9 @import
components_foundation-settings.scss 63:9 @import
- 1:9 root stylesheet

Deprecation Warning: darken() is deprecated. Suggestions:

color.scale($color, $lightness: -2.0078740157%)
color.adjust($color, $lightness: -2%)

More info: https://sass-lang.com/d/color-functions

╷

805 │ $table-row-hover: darken($table-background, $table-hover-scale);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
components_foundation-settings.scss 805:19 @import
- 1:9 root stylesheet

Deprecation Warning: darken() is deprecated. Suggestions:

color.scale($color, $lightness: -7.0275590551%)
color.adjust($color, $lightness: -7%)

More info: https://sass-lang.com/d/color-functions

╷

806 │ $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
components_foundation-settings.scss 806:26 @import
- 1:9 root stylesheet

Deprecation Warning: darken() is deprecated. Suggestions:

color.scale($color, $lightness: -2.0593579649%)
color.adjust($color, $lightness: -2%)

More info: https://sass-lang.com/d/color-functions

╷

811 │ $table-head-row-hover: darken($table-head-background, $table-hover-scale);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
components_foundation-settings.scss 811:24 @import
- 1:9 root stylesheet

Deprecation Warning: darken() is deprecated. Suggestions:

color.scale($color, $lightness: -2.1135515955%)
color.adjust($color, $lightness: -2%)

More info: https://sass-lang.com/d/color-functions

╷

813 │ $table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
components_foundation-settings.scss 813:24 @import
- 1:9 root stylesheet

Warning: 315 repetitive deprecation warnings omitted.
Run in verbose mode to see all warnings.

How to reproduce:
1.
2.
3.

Context

...

Your Environment

• Foundation version(s) used: ^6.9.0
• Browser(s) name and version(s): Chrome 131.0.6778.109
• Device, Operating System and version: Omen laptop, windows 11 64-bit 22631.4460
• Link to your project: Its running locally in my local dev environment

Checklist

• I have read and follow the CONTRIBUTING.md document.
• There are no other issues similar to this one.
• The issue title and template are correctly filled.