Fix FP css:S5362 ('function-calc-no-invalid'): Consider SCSS-specific syntaxes

[yassin-kammoun-sonarsource]

Reported in https://community.sonarsource.com/t/scss-css-s5362-invalid-malformed-calc-function/62691

[crush83]

Has there been progress on this ticket? I'm still getting false positives when using valid SCSS interpolation in conjunction with the CSS calc function...

[sohaleKing]

any progress? I still recieve this as critical!

[davidgataric]

Hello there is there any progress we are getting critical issues because of this?

[kuschti]

This is an old issue. We have hundreds of this. Please fix this

[yassin-kammoun-sonarsource]

An initial investigation of the false positive shows that the parsing of calc scss-like argument produces a malformed abstract syntax tree.

Given the definition

p {
  width: calc(100% - #{$foo} - #{bar(20)});
}

we observe that the term #{bar(20)} is wrongly parsed as #{bar and }. This is due to the fact that the rule is currently able to parse property values with CSS syntax only.

As the original implementation from Stylelint did, we need to implement a proper parser not only for the calc syntax but also to consider SCSS-specific syntax.

For now, we advise disabling the rule when it is executed outside the scope of a plain CSS stylesheet until a proper fix is implemented.

[victor-diez-sonarsource]

link to stylelint removal: https://github.com/stylelint/stylelint/pull/5296

[ilia-kebets-sonarsource]

We chose to deprecate this rule because:

• It was originally dropped by Stylelint
• It is too noisy as it currently does not support syntaxes other than CSS
• It needs a proper parser which requires too much work and maintainability for what it's worth

You can track its deprecation in here: https://github.com/SonarSource/SonarJS/issues/3470