Deprecation warnings on SASS processing

[mihail-minkov]

What should happen?

The SASS to CSS processing should work without showing any errors.

What happens instead?

It processes the changes I made to the SASS files, but in the process throws a bunch of deprecation errors, that slow the process considerably. From what I've seen most errors are related to abs()

Here's an example:

Deprecation Warning: Passing percentage units to the global abs() function is deprecated.
In the future, this will emit a CSS abs() function to be resolved by the browser.
To preserve current behavior: math.abs(33.3333333333%)
To emit a CSS abs() now: abs(#{33.3333333333%})
More info: https://sass-lang.com/d/abs-percent

   ╷
15 │   $dividend: abs($dividend);
   │              ^^^^^^^^^^^^^^
   ╵
    node_modules\motion-ui\src\util\_unit.scss 15:14                 divide()
    node_modules\motion-ui\src\util\_unit.scss 57:11                 strip-unit()
    node_modules\foundation-sites\scss\util\_math.scss 86:16         zf-parse-fraction()
    node_modules\foundation-sites\scss\util\_math.scss 132:12        fraction-to-percentage()
    node_modules\foundation-sites\scss\xy-grid\_cell.scss 61:11      xy-cell-size()
    node_modules\foundation-sites\scss\xy-grid\_cell.scss 95:40      xy-cell-size-css()
    node_modules\foundation-sites\scss\xy-grid\_cell.scss 165:11     xy-cell-size()
    node_modules\foundation-sites\scss\xy-grid\_cell.scss 240:5      xy-cell()
    node_modules\foundation-sites\scss\xy-grid\_layout.scss 34:5     xy-grid-layout()
    node_modules\foundation-sites\scss\xy-grid\_classes.scss 198:11  @content
    node_modules\foundation-sites\scss\util\_mixins.scss 276:5       @content
    node_modules\foundation-sites\scss\util\_mixins.scss 328:9       @content
    node_modules\foundation-sites\scss\util\_breakpoint.scss 171:7   breakpoint()
    node_modules\foundation-sites\scss\util\_mixins.scss 327:7       -zf-each-breakpoint-in()
    node_modules\foundation-sites\scss\util\_mixins.scss 275:3       -zf-each-breakpoint()
    node_modules\foundation-sites\scss\xy-grid\_classes.scss 195:5   xy-block-grid-classes()
    node_modules\foundation-sites\scss\xy-grid\_classes.scss 472:5   foundation-xy-grid-classes()
    scss\amg-socio.scss 13:1                                         root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($s-pad, 3) or calc($s-pad / 3)

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

Possible Solution

Change the code according to the new functions.

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

I just run yarn start in my foundation folder, and as soon as I do a SASS change I get these errors.

Context

My package.json SASS related things are like this:

...
    "dependencies": {
        ...
        "foundation-sites": "^6.8.1",
        "motion-ui": "~2.0.0",
        "node-sass": "^9.0.0",
        "normalize.scss": "^0.1.0",
        "sass": "^1.69.5",
        ...
    },
    "devDependencies": {
        "autoprefixer": "^9.1.5",
        "browser-sync": "^2.18.13",
        "gulp": "^4.0.0",
        "gulp-load-plugins": "^2.0.7",
        "gulp-postcss": "^9.0.1",
        "gulp-sass": "^5.1.0",
        "postcss": "^8.3.11"
    },
...

My gulpfile SASS related things are like this:

const sassCompiler = require('gulp-sass')(require('sass'));

var folder = {
    nodestuff: 'node_modules',
    prejs: 'js',
    preimages: 'images',
    public_css: '../public/css',
    public_js: '../public/js',
    public_img: '../public/images'
};

var sassPaths = [
    folder.nodestuff + '/normalize.scss/scss',
    folder.nodestuff + '/foundation-sites/scss',
    folder.nodestuff + '/motion-ui/src'
];

function sass() {
    return gulp.src('scss/amg.scss')
        .pipe(sassCompiler({
                includePaths: sassPaths,
                outputStyle: 'compressed'
            })
            .on('error', sassCompiler.logError))
        .pipe($.postcss([
            autoprefixer({
                overrideBrowserslist: ['last 2 versions', 'ie >= 9']
            })
        ]))
        .pipe(gulp.dest(folder.public_css));
}

Your Environment

• Foundation 6.8.1
• Node 18.8.2 with npm 9.8.1
• Yarn 4.0.2
• Windows 10 x64 22H2

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.

[ErikKrause]

This deprecation warning was introduced with sass 1.65.0 on Aug 9, 2023

[mihail-minkov]

This deprecation warning was introduced with sass 1.65.0 on Aug 9, 2023

Is there a way to hide or silence these deprecation errors for the time being?

[ErikKrause]

Is there a way to hide or silence these deprecation errors for the time being?

Use sass version 1.64.2

[mihail-minkov]

Is there a way to hide or silence these deprecation errors for the time being?

Use sass version 1.64.2

Isn't there a better solution for this? Isn't there something like a flag for yarn to ignore this kind of messages?

[kanow]

I would say, changing the code and use the recommendation from the deprecation message:
To preserve current behavior: math.abs(33.3333333333%)
I looked into the new version. It seems to me, that is fixed with 6.8.1.
Issue should be closed.
Ah, and I see the problem comes from the motion-ui. yarn update motion-ui helped me in my foundation-stes 6.8.1 project.