Add a --quiet-upstream flag

[nex3]

Most users only have the capacity to fix deprecation warnings in their own code, but they may end up using libraries that have their own deprecation warnings. We should add a --quiet-upstream flag (and similar flags for the Dart and JS APIs) to silence deprecation warnings emitted by upstream libraries (that is, libraries loaded through load paths and package: URLs).

I think this flag should probably not silence warnings due to @warn, since libraries frequently use those to indicate that downstream users are using the library in an invalid or deprecated way.

[vladimiry]

Since 1.33.0 I stared to see a lot of deprecated division operation related warnings. Is there a workaround to disable the warnings? The module used via sass-loader.

[huineng]

a zillion messages because not only the deprecation warning, but also the complete stack

[nex3]

Prioritizing this because of all the warnings generated by the /-as-division deprecation.

[nex3]

Renaming this to --quiet-deps because A) it's shorter and B) some users may not understand what "upstream" refers to.

[nex3]

To be clear, though: this option is only available via the Sass CLI and the Dart API. It would be much harder to add to the Node API, because Node's importer model makes it much harder to track what counts as the "main package" and what counts as a "dependency". We'll be able to support in the new JS API (sass/sass#3056) and in the embedded host, but those will take some time.

In the meantime, Node users will still see fewer deprecation warnings in the next release due to #1322, which skips warnings that have already been emitted for a given source location. That should help mitigate a substantial amount of the noise.

[huineng]

No bad, i wish more packages has deprecation warnings like this

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($px, $carbon--base-font-size)

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

   ╷
25 │   @return ($px / $carbon--base-font-size) * 1rem;
   │            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/_convert.scss 25:12     carbon--rem()
    node_modules/carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/_breakpoint.scss 16:23  @import
    node_modules/carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/type/_styles.scss 8:9          @import
    node_modules/carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/type/_reset.scss 10:9          @import
    node_modules/carbon-components/scss/globals/scss/_css--reset.scss 9:9                                        @import
    node_modules/carbon-components/scss/globals/scss/_helper-mixins.scss 23:9                                    @import
    node_modules/carbon-components/scss/globals/scss/_theme.scss 8:9                                             @import
    node_modules/carbon-components/scss/globals/scss/styles.scss 74:9                                            @import
    src/client/styles.scss 19:9                                                                                  root stylesheet

thanks

[vladimiry]

Node's importer model makes it much harder to track what counts as the "main package" and what counts as a "dependency"

@nex3, is there a flag for Node/JS API for disabling the deprecation warnings regardless the source type (dependency / main)? It's ok that the saas module is unable to distinguish the source type, developers treat different things as dependencies (it depends on the team, project type, etc), so it's on us/developers, but we need a flag to disable deprecation warnings (not silencing the output completely).

[fbasso]

It would be much harder to add to the Node API, because Node's importer model makes it much harder to track what counts as the "main package" and what counts as a "dependency"

@nex3, just an idea, but maybe adding an option (array of patterns for example ?) to specify what can be considered as a dependency ?

The main issue with the current situation is that we are lost between the deprecation warnings coming from an external library, where we can't do anything but asking the owners to fix their code, and our own deprecation warnings that we can't see with or without #1322 (as there are so many lines anyway).

[nex3]

@vladimiry There isn't currently. sass/sass#2979 is tracking the ability to add a custom logger, which would be able to specifically ignore deprecation warnings.

@fbasso I don't want to add a solution that would just serve as a workaround for a proper importer API; I'd rather just add the proper importer API in the first place. If you want to fix your local package's deprecation warnings, we recommend using the Sass migrator.

[katie1348]

I'm using the CLI and cannot for the life of me figure out how to get the --quiet-deps flag to work.

I have it in the list of flags after my sass command and I always get lots of deprecation warnings.

What am I doing wrong?

sass --load-path=zurb/scss --load-path=fontawesome/scss --load-path=sccs --watch --style=compressed --quiet-deps scss:inc/css

That is my command line exactly as used...

[nex3]

@katie1348 That looks like it should work. Can you make an example repository that reproduces the error?

[ghiscoding]

@nex3 I also get a similar issue as @katie1348 when using watch mode with npm scripts, it works fine when I'm doing a regular build, that is not in watch mode

my npm scripts are looking like this

"scripts": {
  "sass-build-task:scss-compile:bootstrap": "sass src/styles/slickgrid-theme-bootstrap.scss dist/styles/css/slickgrid-theme-bootstrap.css --style=compressed --quiet-deps",
  "postsass-build-task:scss-compile:bootstrap": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-bootstrap.css dist/styles/css/slickgrid-theme-bootstrap.css --style=compressed",
  "sass-build-task:scss-compile:material": "sass src/styles/slickgrid-theme-material.scss dist/styles/css/slickgrid-theme-material.css --style=compressed --quiet-deps",
  "postsass-build-task:scss-compile:material": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-material.css dist/styles/css/slickgrid-theme-material.css --style=compressed",
  "presass:watch:bootstrap": "cross-env npm run sass-build-task:scss-compile:bootstrap",
  "sass:watch:bootstrap": "cross-env npm run sass-build-task:scss-compile:bootstrap -- --watch",
  "presass:watch:material": "cross-env npm run sass-build-task:scss-compile:material",
  "sass:watch:material": "cross-env npm run sass-build-task:scss-compile:material -- --watch"
}

I tried adding the flag like this --watch --quiet-deps as well but that didn't change a thing.

My project is fairly large, so I'm not sure it would be a good project to test with, but if you really wish to do so then the npm scripts are here and you would have to follow these installation instructions

[katie1348]

@katie1348 That looks like it should work. Can you make an example repository that reproduces the error?

I have, I think, made a repository that shows the problem. It might not be the smallest that shows it, but it is fairly small.

https://github.com/katie1348/scss/tree/master

The file startsass contains my command line. On my system this will output the following:

--------------------------- Start of Paste --------------------------------

Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(20em, 16)

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

   ╷
12 │ $fa-fw-width:          (20em / 16);
   │                         ^^^^^^^^^
   ╵
    fontawesome/scss/_variables.scss 12:25  @import
    fontawesome/scss/fontawesome.scss 5:9   @import
    scss/style.scss 4:9                     root stylesheet

Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(4em, 3)

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

  ╷
6 │   font-size: (4em / 3);
  │               ^^^^^^^
  ╵
    fontawesome/scss/_larger.scss 6:15     @import
    fontawesome/scss/fontawesome.scss 8:9  @import
    scss/style.scss 4:9                    root stylesheet

Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(3em, 4)

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

  ╷
7 │   line-height: (3em / 4);
  │                 ^^^^^^^
  ╵
    fontawesome/scss/_larger.scss 7:17     @import
    fontawesome/scss/fontawesome.scss 8:9  @import
    scss/style.scss 4:9                    root stylesheet

Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($fa-li-width * 5, 4)

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

  ╷
6 │   margin-left: $fa-li-width * 5/4;
  │                ^^^^^^^^^^^^^^^^^^
  ╵
    fontawesome/scss/_list.scss 6:16        @import
    fontawesome/scss/fontawesome.scss 10:9  @import
    scss/style.scss 4:9                     root stylesheet

Compiled scss/style.scss to inc/css/style.css.

--------------------------- End of Paste --------------------------------

Sorry for the spam in the comment.

If you have any difficulties, I will go my best to help. it is a simple use of font awesome 5.15.3 (not updated and uses the division symbol). And a simple scss file to import it. This is a significantly stripped down version of what I have in production. But, it still shows the error. If I am doing something incorrectly, I will be grateful for your help.

[nex3]

Great, I can reproduce that. Thanks @katie1348.

[nex3]

Oh, I see the issue: you're not actually loading fontawesome from the load path, you're loading it using a relative import (@import "../fontawesome/scss/fontawesome.scss"). If you write @import "fontawesome" instead the warnings disappear.

[katie1348]

Oh, I see the issue: you're not actually loading fontawesome from the load path, you're loading it using a relative import (@import "../fontawesome/scss/fontawesome.scss"). If you write @import "fontawesome" instead the warnings disappear.

Thank you for that, it did resolve the problem and that makes me feel so much better.

Your time and patience have and are appreciated.

:)

[ffxsam]

Could anyone provide guidance on how to use the quiet flag in a webpack config?

[nex3]

It's not yet part of the JS API. See sass/sass#3065.

[ffxsam]

Ok. So for those of us using webpack, there's no workaround to avoid all the deprecation warnings?

[nex3]

Not yet. I'm sorry. We're hard at work on it.

[ffxsam]

@nex3 No worries! It's easy enough to just ignore. 🙂

[rafael-cineis-ifood]

Hi, is there any way to stop warnings when importing a stylesheet inside scss files? Today we are importing some font-awesome files like this: @import '~font-awesome/scss/variables';

I'm using sass-loader v9.0.3 with sass v1.43.4. I saw the note in sass quietDeps option but I'm not sure if the import with ~ is the one that will not work.

[katie1348]

To work around this, I went in to the font awesome files and changed all the / 2 into * 0.5 and did the same trick for the / 4.

It took about 3 minutes. It is a pain, but it was my quickest solution. I am using Dart SASS, so this might be of no help.

My Font Awesome is v5, if that matters.

[rafael-cineis-ifood]

To work around this, I went in to the font awesome files and changed all the / 2 into * 0.5 and did the same trick for the / 4.

It took about 3 minutes. It is a pain, but it was my quickest solution. I am using Dart SASS, so this might be of no help.

My Font Awesome is v5, if that matters.

Actually everything is inside my node_modules folder, I don't want to use any lib to change something inside that just for the warnings, if it's not possible to silence them I will probably just leave it as it's and update font-awesome when they update.

[TroyAlford]

One solution, for folks looking for a temporary fix, is to use patch-package to create a patch file for whichever upstream dependency is causing the issue. In our case, we took the dependency and ran the sass migration script against it, then committed the diff as a .patch file to our directory, and just allowed patch-package to keep applying the fix every time we ran yarn.

Not a perfect solution in all cases - but a good solution in many.

[nex3]

@rafael-cineis-ifood

I'm using sass-loader v9.0.3 with sass v1.43.4. I saw the note in sass quietDeps option but I'm not sure if the import with ~ is the one that will not work.

Because ~ imports are handled by a custom importer, warnings in them will indeed be silenced by the quietDeps option.