multiple DEPRECATION warnings: Passing a string to call() is deprecated and will be illegal in Sass 4.0

[ghost]

on a webpack4'd foundation6 project

yarn list | egrep -i " foundation-sites\@| webpack\@"
├─ foundation-sites@6.4.4-rc1
├─ webpack@4.1.1

Currently, on webpack exec, I get

yarn run webpack:prod
    DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
    in Sass 4.0. Use call(get-function("shake")) instead.

    DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
    in Sass 4.0. Use call(get-function("shake")) instead.

    DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
    in Sass 4.0. Use call(get-function("spin")) instead.

    DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
    in Sass 4.0. Use call(get-function("spin")) instead.

    DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
    in Sass 4.0. Use call(get-function("wiggle")) instead.

    DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
    in Sass 4.0. Use call(get-function("wiggle")) instead.

    DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
    in Sass 4.0. Use call(get-function("shake")) instead.

    DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
    in Sass 4.0. Use call(get-function("shake")) instead.

    DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
    in Sass 4.0. Use call(get-function("spin")) instead.

    DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
    in Sass 4.0. Use call(get-function("spin")) instead.

    DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
    in Sass 4.0. Use call(get-function("wiggle")) instead.

    DEPRECATION WARNING: Passing a string to call() is deprecated and will be illegal
    in Sass 4.0. Use call(get-function("wiggle")) instead.

the function calls are originating from

    ./motion-ui/dist/motion-ui.min.css
    ./motion-ui/dist/motion-ui.css
    ./motion-ui/package.js
    ./motion-ui/docs/animations.md
    ./motion-ui/docs/javascript.md
    ./motion-ui/docs/classes.md
    ./motion-ui/docs/wow.md
    ./motion-ui/src/_classes.scss
    ./motion-ui/src/motion-ui.scss
    ./motion-ui/src/effects/_wiggle.scss

removing

@import  '~motion-ui/motion-ui';
@include motion-ui-transitions;
@include motion-ui-animations;

eliminates all of those^ deprecation notices on webpack exec

The relevant reference appears @

http://sass-lang.com/documentation/file.SASS_CHANGELOG.html#3_5_0__12_July_2017_

Passing a string to call($function-name, $args...) indicating which function to invoke is now deprecated. Instead pass a function reference returned from get-function($function-name). This allows function name resolution to be performed in the correct lexical context and then invoked in a different context. This is required so that the module-based resolver in Sass 4.0 will invoke the correct function when calling across module boundaries. Developers of frameworks that use call should not do the function lookup for callers of their framework; this is likely to result in a situation where the framework cannot resolve the function in 4.0.

[DanielRuf]

Use call(get-function("shake")) instead.

So we should migrate these. Is this supported in Sass 3?

[DanielRuf]

http://oddbird.net/2017/03/30/safe-get/

[DanielRuf]

https://github.com/oddbird/susy/issues/625#issuecomment-279789149

https://github.com/oddbird/susy/commit/15c251dcf5ca8b45fc0fa59d4fa49b2023a8ca4e

cc @SassNinja

[christianstclair]

@hal869 I'm also having this issue. Did you find anything to resolve?

[DanielRuf]

It is not a real issue, just a warning. Deprecated does not mean it does not work. We have to change the parts where the deprecated code is used.

[christianstclair]

@DanielRuf you are right. I'm on "webpack": "^3.11.0", and "foundation-sites": "~6.4.4-rc1", and the warnings aren't breaking anything.

I also found I'm only getting the warnings when I've included the following:

@import "motion-ui";
@include motion-ui-transitions;
@include motion-ui-animations;

Removing the animations fixes all the warnings for me.

@import "motion-ui";
@include motion-ui-transitions;

I don't use the animations that much on my projects so for now this fix will clean up those warnings.

[raphaelsanchez]

I fixed the problem by editing two files in /node_modules/motion-ui/src/util/

---

in /node_modules/motion-ui/src/util/_args.scss

replacing @return call($arg); by @return call(get-function($arg));

---

in /node_modules/motion-ui/src/util/_keyframe.scss

replacing $map: call($map); by $map: call(get-function($map));

---

Question ? How can I submit this ?

[DanielRuf]

You can fork the repository, create a new branch from the main branch, do the changes there and create a new pullrequest for it on the main repository (which you forked).

[raphaelsanchez]

Ok thanks, I will try this.

I really need to fork ?? I can't just push a new branch on the main repository ?

[DanielRuf]

Right. No and this is discouraged. Also this is how Git works. Every contributor has a copy.

[raphaelsanchez]

Okay. I'll do that;) Thanks for the advice.

[raphaelsanchez]

oh sorry, it seems that someone before me is made this correction. commit: 9d9add547340b6f8a7d5c77067e894799ad86549 How can I update this version when installing zurb template?

[DanielRuf]

You can use also commit hashes with npm. So far there is no new tagged release so this is the only option.

Try npm i zurb/motion-ui#master for example.