Refactor Sass inline if() to @if blocks to get ready for native CSS if()

[adamkudrna]

After this change, logs should be free of the similar warnings:

Deprecation Warning on line 65, column 19 of file:///workspace/node_modules/@react-ui-org/react-ui/src/styles/tools/_collections.scss:65:19:
The Sass if() syntax is deprecated in favor of the modern CSS syntax.

Suggestion: if(sass($modifier-value): "--" + $modifier-value; else: "")

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

[bedrich-schindler]

It's great we are getting rid of deprecation warnings, but I would like to point out that clients are polluted with mixed-decls longer (and more) than with if-function. Are you opening second PR for that fix?

[Copilot]

Pull request overview

Refactors Sass code to remove deprecated inline if() usage in preparation for native CSS if(), aiming to eliminate Sass deprecation warnings during builds.

Changes:

• Replace Sass inline if() calls with @if blocks in utility/theme generation mixins.
• Introduce a computed fallback string variable in collections to simplify conditional var() fallback output.
• Update Playwright dotenv parsing to pass quiet: true to dotenv.config().

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

File	Description
tests/playwright/env/parseDotEnvFile.ts	Changes dotenv config invocation (adds quiet: true).
src/styles/tools/_utilities.scss	Replaces inline if() used for utility class modifiers with @if.
src/styles/tools/_collections.scss	Replaces inline if() usage for modifiers/state and var() fallback with @if blocks and precomputed strings.
src/styles/_utilities.scss	Replaces inline if() breakpoint infix logic with @if.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[adamkudrna]

It's great we are getting rid of deprecation warnings, but I would like to point out that clients are polluted with mixed-decls longer (and more) than with if-function. Are you opening second PR for that fix?

@bedrich-schindler I am also after mixed-decls, but when you run or build RUI, you will notice there is no such warning.

[bedrich-schindler]

It's great we are getting rid of deprecation warnings, but I would like to point out that clients are polluted with mixed-decls longer (and more) than with if-function. Are you opening second PR for that fix?

@bedrich-schindler I am also after mixed-decls, but when you run or build RUI, you will notice there is no such warning.

I see. But when I build our internal project (RADES), it throws errors like this:

WARNING in ./node_modules/@react-ui-org/react-ui/src/components/Toolbar/Toolbar.module.scss (./node_modules/@react-ui-org/react-ui/src/components/Toolbar/Toolbar.module.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./node_modules/@react-ui-org/react-ui/src/components/Toolbar/Toolbar.module.scss)
Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
mixed-decls deprecation is obsolete. If you were previously silencing it, your code may now behave in unexpected ways.
 @ ./node_modules/@react-ui-org/react-ui/src/components/Toolbar/Toolbar.module.scss
 @ ./node_modules/@react-ui-org/react-ui/src/components/Toolbar/Toolbar.jsx 15:44-76
 @ ./node_modules/@react-ui-org/react-ui/src/components/Toolbar/index.js 24:38-58
 @ ./src/components/Toolbar/Toolbar.jsx 9:15-71
 @ ./src/components/Toolbar/index.js 24:38-58
 @ ./src/index.js 325:15-46

There is bunch of similar warnings.

I tried latest sass in RUI, checked configuration, but I have no glue why it does not throw error. But we need to somehow solve this. I though you created this issue as a result of work on assigned RADES issue where you should get rid of those errors.

To sum this up, I am approving this, but I would ask you to solve mixed-decls prior to release (in different PR, of course).

[adamkudrna]

To sum this up, I am approving this, but I would ask you to solve mixed-decls prior to release (in different PR, of course).

@bedrich-schindler I know. All you need is to turn off the warning suppression in the project (not here):

-silenceDeprecations: ['mixed-decls'],

And it's gone.

However, to get rid of the if() statement warnings, I had to refactor some parts of the code.

[bedrich-schindler]

To sum this up, I am approving this, but I would ask you to solve mixed-decls prior to release (in different PR, of course).

@bedrich-schindler I know. All you need is to turn off the warning suppression in the project (not here):

-silenceDeprecations: ['mixed-decls'],

And it's gone.

However, to get rid of the if() statement warnings, I had to refactor some parts of the code.

It is not true in few latest minor versions of sass where this cannot be silenced anymore. We had to reconfigure sass to set warnRuleAsWarning: false to enable dependent project to be built.