Deprecation Warning: Sass's Behavior for Declarations After Nested Rules

[lhoucinecherif]

I am encountering a deprecation warning when using 'eduardoboucas/include-media' in a Nuxt3 project. The warning message is as follows:

Deprecation Warning: Sass's behavior for declarations that appear after nested rules is deprecated.Deprecation 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

[jackmcpickle]

@lhoucinecherif thanks for the heads up. Sounds like a small change. Will check out later this week and see where we get. Otherwise feel free to put a PR up. 😉

[lhoucinecherif]

I followed the guidance from this issue and managed to silence the warning in my Nuxt app by updating the Nuxt configuration. Here's the relevant part of my nuxt.config.js:

vite:  {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/assets/scss/_variables.scss";',
        api: 'modern',
        silenceDeprecations: ['mixed-decls'],
      },
    },
  },
}

[posttoast]

Any updates on this? Silencing a deprecation warning does not sound like a very future-proof solution ;)

[jackmcpickle]

Ok. Did some investigation based on the new way sass needs to start supporting nesting. See Docs

Doesn't really seem to be a issue with include-media.

Basically you should not have anything below a mixin inside an selector - as the new way it will be handled is different and will break your css later on. See the sass link for more info.

For example

.test-inside {
  content: 'default';
  @include media('>phone') {
    content: 'phone';
  }
  // Issue is here - current scss standard (but deprecated)
  // This will be pull up below the first content: 'default';
  // New css standard is to render where it is. 
  content: 'default-after';
}

Update to the following.

.test-inside {
  content: 'default';
  @include media('>phone') {
    content: 'phone';
  }
  // add self nesting rule or clean up css.
  & {
    content: 'default-after';
  }
}

You can see the problem here if you just create a simple sass mixin.

@mixin breakpointTest($size) {
  @media(min-width: $size) {
    & {
      @content;
    }
  }
}

.example {
  color: red;
  @include breakpointTest(320px) {
    color: blue;
  }
  // This will complain
  color: yellow;
}

Hopefully that is enough to show where in your code to update. Although I'm happy to be corrected if you can provide me some example code of it breaking inside include-media

[posttoast]

Thanks a lot @jackmcpickle ! That did the trick. I had some mixins which themselves used the include-media mixin. The resulting warning from the SASS compiler was not that clear, but your instructions helped me resolve it!

[lhoucinecherif]

Thank you @jackmcpickle for taking the time to investigate the new nesting support in Sass and for sharing your findings. I’ll review the documentation you provided and make the necessary adjustments to my code. Thanks again for your help