hide Deprecation Warnings

[marsaultgaetan]

Hi, I'm using gulp-sass ^5.1.0, and I've lots of warning messages during compilations.

Warnings are about The legacy JS API, @import rules, map-get rules, ...

If I understand, I've 2 solutions :

• Fix my files replacing @import rules, map-get rules and all the others
• Hide Deprecation Warnings during the compilation

For the moment, I'ld like to hide Deprecation Warnings, but I can't do it.

With this gulpfile code, Deprecation Warnings always appear :

function css() {
  return src(dir_src + "scss/*.scss")
    .pipe(sass({ 
      includePaths: [dir_nodeModules],
      quiet: true, 
      quietDeps: true 
  }).on('error', sass.logError))
    .pipe(dest(dir_assets + "css/"));
}

Can you help me ? Thanks !

[beatrizsmerino]

I've updated every part of the outdated code but I kept seeing this message:

Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
More info: https://sass-lang.com/d/legacy-js-api

I have found a solution here: https://stackoverflow.com/a/79180897/10855837

You can add a silenceDeprecations option to temporarily hide these warnings:

const gulp = require("gulp");
const sass = require("gulp-sass")(require("sass"));

gulp.task("sass", function(){
  return gulp
    .src("./src/sass/*.scss")
    .pipe(sass({
      silenceDeprecations: ['legacy-js-api'],
    }))
    .pipe(gulp.dest("./dist/css"));
});

[xzyfer]

@beatrizsmerino is correct. Additionally we've released v6.0.0 which should resolve the The legacy JS API is deprecated warning.

[marsaultgaetan]

@beatrizsmerino when you say "I've updated every part of the outdated", you've done this for example :

• change @import to @use ?
• change font-family: $font-primary; to font-family:variables.$font-primary; ?
• change $container: pxtoem(700px); to $container: mixins.pxtoem(700px); ?
• ...

I think it weighs down Sass's writing, don't you? Thanks for your answer !

[beatrizsmerino]

@beatrizsmerino when you say "I've updated every part of the outdated", you've done this for example :

• change @import to @use ?
• change font-family: $font-primary; to font-family:variables.$font-primary; ?
• change $container: pxtoem(700px); to $container: mixins.pxtoem(700px); ?
• ...

I think it weighs down Sass's writing, don't you? Thanks for your answer !

Exactly as you say @marsaultgaetan, before disabling the warning I have corrected some parts of the code like:

• Use @forward o @use instead of use @import. To avoid having to change a lot of code accessing variables, functions and mixins by modules like this variables.$font-primary;, I have created a file inside the abstracts folder where I import them all using @forward and in each component where these resources are used I import them using @use '../abstracts/index as *;`.

• Import the @use “sass:meta” module:

  • To use meta.variable-exists() instead of using variable-exists() directly.
  • To use meta.type-of() instead of using type-of() directly.
  • To use meta.inspect() instead of using meta.inspect() directly.

• Import the @use “sass:list” module:

  • To use list.index() instead of using index() directly.
  • To use list.nth() instead of using nth() directly.
  • To use list.length() instead of using length() directly.

• Import the @use “sass:map” module:

  • To use map.get() instead of using map-get() directly.
  • To use map.has-key() instead of using map-has-key() directly.
  • To use map.keys() instead of using map-keys() directly.

• Import the @use “sass:math” module:

  • To use math.is-unitless() instead of using unitless() directly.
  • To use math.unit() instead of using unit() directly.

• Import the @use “sass:color” module:

  • To use color.scale() instead of using darken() or lighten() directly.
  • To use color.mix() instead of using mix() directly.

https://github.com/beatrizsmerino/vue-editor https://github.com/beatrizsmerino/validation-form