Warnings from sass files

[minkyngkm]

Describe the bug
To update the React component on u.com, we had to add the esbuild sass plugin to the esbuild options to load sass files. When esbuild is building the JS files, building is working fine but I receive these warnings from the Sass files.

The PR where I’m getting these warnings is here.

These are some of the warnings I get:

▲ [WARNING] Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls [plugin sass-plugin]

    node_modules/vanilla-framework/scss/_settings_animations.scss:20:2:
      20 │ transition-timing-function: map-get($animation-easing, $easing)
         ╵   ^

  The plugin "sass-plugin" was triggered by this import

    node_modules/@canonical/react-components/dist/components/MultiSelect/MultiSelect.js:9:8:
      9 │ require("./MultiSelect.scss");

 [WARNING] Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls [plugin sass-plugin]

    node_modules/vanilla-framework/scss/_base_forms.scss:19:4:
      19 │ -webkit-appearance: textfield
         ╵     ^

  The plugin "sass-plugin" was triggered by this import

    node_modules/@canonical/react-components/dist/components/MultiSelect/MultiSelect.js:9:8:
      9 │ require("./MultiSelect.scss");
        ╵         ~~~~~~~~~~~~~~~~~~~~

▲ [WARNING] Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls [plugin sass-plugin]

    node_modules/vanilla-framework/scss/_base_forms.scss:19:4:
      19 │ -webkit-appearance: textfield
         ╵     ^

  The plugin "sass-plugin" was triggered by this import

    node_modules/@canonical/react-components/dist/components/MultiSelect/MultiSelect.js:9:8:
      9 │ require("./MultiSelect.scss");

To Reproduce

Steps to reproduce the behavior:

1. Go to the PR above
2. yarn
3. yarn build
4. See warnings

[syncronize-issues-to-jira]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-13754.

This message was autogenerated

[jmuzina]

I've run sass with --verbose against Vanilla itself to get the full list of deprecation warnings.

build.log

Note: this deprecation error only pops up in Vanilla if you upgrade our SASS dev dependency from 1.77.6 to 1.77.7 or later, as 1.77.7 introduced this deprecation.

[pastelcyborg]

I've opened a PR to suppress this warning for the time being. The long-term solution is covered in my new Issue, #5296, which will require considerably more work.