Sass deprecation warnings with latest Dart Sass (if() function usage)

[oramirez1]

Objective

Compile react-md without Sass deprecation warnings when using recent versions of Dart Sass.

Environment

• react-md: @react-md/core@6.4.0
• React: 19.2.3
• Sass (Dart Sass): 1.97.0
• Package manager: pnpm
• Bundler: Reproducible across common setups

Problem

When building a project that depends on react-md using the latest Dart Sass, a large number of deprecation warnings are emitted related to the legacy Sass if() function syntax.

Dart Sass has deprecated the if(condition, a, b) function in favor of the modern conditional syntax.

Reference:

• https://sass-lang.com/d/if-function

Although the build succeeds, the warnings are repeated many times and significantly increase console noise. These warnings may also become hard errors in a future Sass release.

Example warnings

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

Suggestion: if(sass($pseudo-before): "&::before"; else: "&::after")

node_modules/@react-md/core/dist/_box-shadows.scss 206:21

react-md.log

These warnings appear consistently across multiple modules such as:

• _box-shadows.scss

• _theme.scss

• _a11y.scss

• _card.scss

• _dialog.scss

• _slider.scss

• _input-toggle.scss

and others

Expected Behavior

Building a project with the latest supported Sass version should complete without deprecation warnings, allowing users to adopt new Sass releases confidently.

Proposed Solution

Update the affected SCSS files to replace deprecated if() function calls with the modern Sass conditional syntax recommended by Dart Sass.

This would:

Eliminate deprecation warnings

Improve forward compatibility with future Sass releases

Reduce noise in CI and local builds

If helpful, I’d be happy to:

Submit a PR with incremental changes (module by module), or

Help validate changes against existing themes and variables

Additional Notes

I understand this is a non-trivial change touching many files, and I appreciate the work that has gone into maintaining react-md. This issue is raised mainly to ensure long-term compatibility as the Sass ecosystem continues to evolve.

Thanks again for maintaining the project 🙏