Deprecation Warnings with SASS 1.77.7

[gtwilliams03]

I upgraded a web project to sass 1.77.7 and now am getting a number of deprecation warnings related to react-crop-image - it seems like the ordering of SASS declarations is now important. See https://sass-lang.com/documentation/breaking-changes/mixed-decls/.

Here is a list of the warnings I received (I pared the list down to remove repetitive warnings):

Module Warning (from ./.yarn/__virtual__/sass-loader-virtual-69e4cb5314/0/cache/sass-loader-npm-14.2.1-dc50026ea1-9cb864fd8d.zip/node_modules/sass-loader/dist/cjs.js):
Deprecation Warning on line 111, column 6 of /react-image-crop-virtual-0d83e42469/0/cache/react-image-crop-npm-11.0.5-e68c58253f-0af15aa707.zip/node_modules/react-image-crop/src/ReactCrop.scss:111:6:
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

111 |       animation: marching-ants 1s;

112 |       background-image: linear-gradient(to right, #fff 50%, #444 50%), linear-gradient(to right, #fff 50%, #444 50%),
        linear-gradient(to bottom, #fff 50%, #444 50%), linear-gradient(to bottom, #fff 50%, #444 50%);

114 |       background-size: $antWidth 1px, $antWidth 1px, 1px $antWidth, 1px $antWidth;

115 |       background-position: 0 0, 0 100%, 0 0, 100% 0;

116 |       background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;

[gtwilliams03]

The warnings all originate from lines 99-122 of ReactCrop.scss:

    &:not(.ReactCrop--no-animate &) {
      $antWidth: 10px;
      $doubleAntWidth: 10px * 2;

      @keyframes marching-ants {
        0% {
          background-position: 0 0, 0 100%, 0 0, 100% 0;
        }
        100% {
          background-position: $doubleAntWidth 0, (-$doubleAntWidth) 100%, 0 (-$doubleAntWidth), 100% $doubleAntWidth;
        }
      }

      animation: marching-ants 1s;
      background-image: linear-gradient(to right, #fff 50%, #444 50%), linear-gradient(to right, #fff 50%, #444 50%),
        linear-gradient(to bottom, #fff 50%, #444 50%), linear-gradient(to bottom, #fff 50%, #444 50%);
      background-size: $antWidth 1px, $antWidth 1px, 1px $antWidth, 1px $antWidth;
      background-position: 0 0, 0 100%, 0 0, 100% 0;
      background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
      color: #fff;
      animation-play-state: running;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }

My guess is that if you pull lines 100-110 out of the declaration and move them up to the top of the file, it should resolve the warnings because you will no longer be declaring root properties after a nested declaration.

[gtwilliams03]

Pull request 4 submitted