Interpolation variable in calc() function

[danny007in]

Rule Example

Allow

 border-top: calc(#{$table-border-width} * 2) 

Disallow

 border-top: calc($table-border-width * 2) 

To solve twbs/bootstrap#38278

[kristerkari]

@danny007in Maybe this could be a more generic rule, like disallowing interpolation in function call arguments?

[danny007in]

PR Created in #787

[kristerkari]

@danny007in Thanks! I just realized that you want the rule to do the opposite of what I was saying in my previous comment.

I'm still however thinking if there is a need for this kind of rule in stylelint-scss. It seems very specific to the problem with calc, and I'm wondering if this is a common problem at all?

The other option would be just to add a custom rule to the project in question (bootstrap) to catch this specific calc related problem.

[danny007in]

@kristerkari to solve twbs/bootstrap#38278

[kristerkari]

@danny007in I already had a look at the problem that you are trying to solve, but I'm not sure that creating a new rule just for that would make sense.

What I was thinking is that https://github.com/stylelint-scss/stylelint-scss/tree/master/src/rules/dollar-variable-no-missing-interpolation rule could be instead improved to handle calc() calls