foundation
Deprecation warnings on SASS processing
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
- [x] I have read and follow the CONTRIBUTING.md document.
- [x] There are no other issues similar to this one.
- [x] The issue title and template are correctly filled.
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?
Is there a way to hide or silence these deprecation errors for the time being?
Use sass version 1.64.2
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?
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.
Warnings still happen with both sass and foundation-sites at their latests versions. Should be fixed in a minor release
Hi, just wondering if a new release version is planned to be tagged in the near future with the commits below that fix these warnings. Thank you!
https://github.com/foundation/foundation-sites/commit/c6e31f5ba440a8909ceb838a89083321f660f426 https://github.com/foundation/foundation-sites/commit/c2db616af8ab0071927c62c429ed3b1920dc62ba
I am working with the Sass team in order to migrate off @include and over to @use. It's a big deal. Maybe I should release what I already have done as an update first.
I am working with the Sass team in order to migrate off
@includeand over to@use. It's a big deal. Maybe I should release what I already have done as an update first.
Oh nice! That would be awesome :D
Fixed in v6.9.0. Although the new @use will have to come in a later update. It's a pretty big change.