Compatibility with the proposed CSS if function

• Phase 1
  • Specification (https://github.com/sass/sass/pull/4155)
  • Tests (https://github.com/sass/sass-spec/pull/2092)
  • Dart Sass (https://github.com/sass/dart-sass/pull/2693)
  • Website (https://github.com/sass/sass-site/pull/1504)
  • Migrator (https://github.com/sass/migrator/pull/286)
• Phase 2
  • Specification
  • Tests
  • Dart Sass
  • Website

---

The CSSWG has resolved working on inline conditionals for CSS. For now, the proposed syntax uses a if() function. See https://lea.verou.me/blog/2024/css-conditionals/ and https://github.com/w3c/csswg-drafts/issues/10064

Even though the syntax is not yet final (the proposal has just started), the current syntax will require adjustments in Sass:

• the special if Sass function (which has a special parsing and evaluation) will need to be distinguished from the CSS conditional
• the current proposal uses if(condition ? then : else) as syntax, which fails to parse in Sass (I'm testing that using css-if as the function name to avoid issues with the first point):
  • the ternary syntax fails to parse: https://sass-lang.com/playground/#eJwzNExUqOZSUEiyUkguLtbNTNMoSyzS0NVNzs9LySzJzM/TVLBXSMopTVWwUihKTdG05qoFAIT+D1Q=
  • the style condition fails to parse inside the condition of the function: https://sass-lang.com/playground/#eJwzNExUqOZSUEiyUkguLtbNTNMoLqnMSdXQ1S1LLLJSSMvP11SwV0jKKU1VsFIoSk3RtOaqBQCRIQ9c (note that this syntax works when storing the condition in a custom property thanks to the fact that custom properties accept any content in Sass, requiring to use interpolation to use SassScript expressions: https://sass-lang.com/playground/#eJwzNExUqOZSUNDVTc7PS8ksyczPs1IoLqnMSS3W0NUtSyyyUkjLz9fkqgUAA7AM4Q==)

The work on this proposal should be tracked to figure out how the compatibility layer should look like.