Ignore non-standard syntax in function-calc-no-invalid

[hudochenkov]

Which issue, if any, is this issue related to?

Fixes #4114, #4533.
Closes #4534.

Is there anything in the PR that needs further explanation?

@jeddy3 said:

Built-in rules ignore non-standard syntax. This rule should only check the validity of calc functions containing standard CSS syntax.

To be honest, I don't think this is a good approach for users. function-calc-no-invalid catches many cases of invalid calc for preprocessor users. But with this PR, we reduce usefulness of this rule for these users.

[alexander-akait]

What about interpolation SCSS #{var}?

[hudochenkov]

Isn't it #{$var}?

[alexander-akait]

Oh, yes, what about $ and @ in css variable names, can these characters used?

[hudochenkov]

I couldn't get straight answer from the spec. But I tried in Chrome putting these symbols in different position in the custom property name, and all were invalid.

[alexander-akait]

Sounds good, approved

[jeddy3]

LGTM, thanks!

But with this PR, we reduce usefulness of this rule for these users.

The community can create a scss/function-calc-no-invalid plugin (and a less/function-calc-no-invalid one etc). Each would cater to the more specific syntax of their respective languages.

[hudochenkov]

The community can create a scss/function-calc-no-invalid plugin (and a less/function-calc-no-invalid one etc). Each would cater to the more specific syntax of their respective languages.

True. Also, there are pieces of code after that PR, that handle most of use cases of variables and interpolations. I don't know where they are, but now it's a dead code. And this is the case most likely with every rule, where we started ignoring non-standard syntax.

[jeddy3]

• Fixed: function-calc-no-invalid false positives for SCSS and Less variables (#4659).

[jonscottclark]

Thanks everyone involved for your contributions on this :)