Deprecation warnings SCSS #15515
Description
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.