foundation-sites

foundation-sites copied to clipboard

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.