trying ignore mixed-decls warning but still got these warning in Vite(5.3.1).

[daiwanxing]

just now upgrade my dependency of sass to the latest version (1.77.8) and restart, the app terminal output some warnings that i've never got.

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 `& {}`.

I have no time to solve these warnings, the easily way to me is make these warnings keep silence.

I followed the document instructions. but it's not work, I still got bunch of warnings. Is there something wrong with my configuration?

// vite.config.js
css: {
    preprocessorOptions: {
      scss: {
        silenceDeprecations: ["mixed-decls"],
      },
    },
},

[jathak]

The deprecations options are only available in the modern JS API.

Vite is still using the legacy JS API, so you'll need to wait until vitejs/vite#7116 is resolved to use these flags.

[Kamil-Jasinski]

Hi, @daiwanxing you can try this:

*vite.config.js

const SCSS_Logger = {
    warn(message, options) {
        // Mute "Mixed Declarations" warning
        if (options.deprecation && message.includes('mixed-decls')) {
            return
        }
        // List all other warnings
        console.warn(`▲ [WARNING]: ${message}`);
    },
};

export default defineConfig({
    plugins: [],
    css: {
        preprocessorOptions: {
            scss: {
                logger: SCSS_Logger,
            },
        },
    },
});

[daiwanxing]

Hi, @daiwanxing you can try this:

*vite.config.js

const SCSS_Logger = {
    warn(message, options) {
        // Mute "Mixed Declarations" warning
        if (options.deprecation && message.includes('mixed-decls')) {
            return
        }
        // List all other warnings
        console.warn(`▲ [WARNING]: ${message}`);
    },
};

export default defineConfig({
    plugins: [],
    css: {
        preprocessorOptions: {
            scss: {
                logger: SCSS_Logger,
            },
        },
    },
});

Thank you, this is a good workaround!

[replete]

Finally a workaround, I wish this was clear in the documentation that scss support is not up to date and so preprocessorOptions wont work as expected.

[supermueller]

You have to use at leaset the "modern" API:

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern',
        silenceDeprecations: ['mixed-decls'],
      },
    }
  }
}

See also Shared Options | Vite.

[lildinozzz]

You have to use at leaset the "modern" API:

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern',
        silenceDeprecations: ['mixed-decls'],
      },
    }
  }
}

See also Shared Options | Vite.

that works! thank u

[johncip]

Hi, this is only indirectly related to silenceDeprecations, but I'm not sure if it's worth its own issue yet:

I get a lot of mixed-decls warnings, but they're all for code where the selectors used in the "normal" declarations and the ones in the nested rules don't overlap.

Here's an example:

10:24:53 css.1  |   ┌──> app/assets/stylesheets/components/avatar.scss
10:24:53 css.1  | 9 │     height: $size;
10:24:53 css.1  |   │     ^^^^^^^^^^^^^ declaration
10:24:53 css.1  |   ╵
10:24:53 css.1  |   ┌──> app/assets/stylesheets/_utilities.scss
10:24:53 css.1  | 2 │ ┌   &:active {
10:24:53 css.1  | 3 │ │     filter: brightness(1.25);
10:24:53 css.1  | 4 │ │   }
10:24:53 css.1  |   │ └─── nested rule
10:24:53 css.1  |   ╵
10:24:53 css.1  |     app/assets/stylesheets/components/avatar.scss 9:3  @import
10:24:53 css.1  |     app/assets/stylesheets/application.scss 24:9       root stylesheet
10:24:53 css.1  |
10:24:53 css.1  | WARNING: 22 repetitive deprecation warnings omitted.

In the example given in the documentation, the font-weight rules overlap. But they don't in this snippet. (& Folks using SMACSS, BEM, etc. are already prevented from doing it, more or less.)

Anyway I think Sass is warning about an upcoming change to the lexical order of generated CSS, but on code blocks where lexical order won't affect the browser's computed ruleset.

And if that's right, then IMO the current warning scope is a bug, especially since there's no usage that's actually going away... nested blocks and top-level declarations will of course continue to coexist.

FWIW I don't think I'm retreading #2276, because I think the warning is a good idea. But the false alarms might encourage people to silence the alarm... and sure nuff, a decent chunk of the doc page for the mixed-decls change is about how to silence warnings.

[replete]

@johncip Make a new issue for visibility, you've pinged contributors in here for a related but different issue and unlikely maintainer is going to read messages in closed threads. Good luck

[nex3]

@johncip It's more complex than it looks to only warn for rules that are known to have the same specificity—it means we have to compare the parent rule against all previous rules in the current context rather than just checking whether at least one such rule exists. But I agree it would substantially reduce false positives, so I plan to look into it next week to see how feasible an implementation would be.

[johncip]

@nex3 devil is in the details, I should have known :D

I didn't mention it earlier but I was picturing shorthands as a pain point...

thank you for taking the time to look into it!

[nex3]

@johncip I did in fact implement this check in #2342. It's not property-aware—we really don't want to have to track the specific semantic details of all the defined CSS properties—but it does keep track of selector specificity which substantially reduces false positives.

[johncip]

Seems like a useful approach... upgrading got rid of all of my false positives, thank you!