The Sass if() syntax is deprecated

[Himra]

Deprecation Warning [if-function]: The Sass if() syntax is deprecated in favor of the modern CSS syntax. Suggestion: if(sass($enable-classes): ".close, :is(a, button)[rel=prev]"; else: ":is(a, button)[rel=prev]") More info: https://sass-lang.com/d/if-function

Environment

Example: PICO 2.1.1 , NPM 11.6.3 , SASS 1.95.1 , VITE 7.2.7

[peterbe]

Yeah, my console is now peppered with...

Deprecation Warning [if-function]: The Sass if() syntax is deprecated in favor of the modern CSS syntax.

Suggestion: if(sass($enable-classes): ".close, :is(a, button)[rel=prev]"; else: ":is(a, button)[rel=prev]")

More info: https://sass-lang.com/d/if-function

   ╷
36 │         $close-selector: if(
   │ ┌────────────────────────^
37 │ │         $enable-classes,
38 │ │         ".close, :is(a, button)[rel=prev]",
39 │ │         ":is(a, button)[rel=prev]"
40 │ │       );
   │ └───────^
   ╵
    ../../../@picocss/pico/scss/components/_modal.scss 36:24  @use
    ../../../@picocss/pico/scss/_index.scss 42:1              @use
    ../../../@picocss/pico/scss/pico.scss 2:1                 @use
    ../../../../app/styles/pico.scss 1:1                      @use
    ../../../../app/styles/app.scss 2:1                       @use
    ../../../../app/styles/home.scss 1:1                      root stylesheet

:)

Is it possible to shut it up somehow? I use vite which automatically handles sass so I'm not sure what options exist.

[yudai-nkt]

You can suppress the warning with:

import type { UserConfig } from "vite";

export default {
	css: { preprocessorOptions: { scss: { quietDeps: true } } },
} satisfies UserConfig;

See the following docs for details.

• https://vite.dev/config/shared-options#css-preprocessoroptions
• https://sass-lang.com/documentation/js-api/interfaces/stringoptions/#quietDeps

[peterbe]

That solved it for my vite app!
Thanks @yudai-nkt

[anaxite]

It looks like Sass if() is only used in one location. I'm going to try a pull request.