Fix false positives for hyphenated functions in function-calc-no-unspaced-operator

Clearly describe the bug

Vue officially released the v-bind grammar in v3.2.2 to support js and facilitate the use of js variables in css. This grammar will conflict with the function-calc-no-unspaced-operator rule in calc(). I checked this The configured rule has only a switch. If you want the editor not to report an error, you can only close the rule globally or use the Ignoring code. I personally feel that v-bind will be used frequently in future vue projects. The above two methods are not very good solutions. Maybe you can add a configuration item to filter some regular or string in the rule.

Which rule, if any, is the bug related to?

function-calc-no-unspaced-operator

What code is needed to reproduce the bug?

.box {
      height: calc(100% - v-bind('cssVars.layoutHeaderHeight'));
}

What stylelint configuration is needed to reproduce the bug?

{
  "rules": {
    "function-calc-no-unspaced-operator":  true
  }
}

Which version of stylelint are you using?

v13.13.1

How are you running stylelint: CLI, PostCSS plugin, Node.js API?

e.g. “CLI with stylelint "**/*.css" --config myconfig.json”

Does the bug relate to non-standard syntax (e.g. SCSS, Less etc.)?

Related to v-bind syntax of vue v3.2.x

What did you expect to happen?

e.g. “No warnings to be flagged.”

What actually happened (e.g. what warnings or errors did you get)?

[lachieh]

I ended up making the change I mentioned above and the PR is ready for review 👍🏻

[lachieh]

I think I’m 80% of the way there on this one.

One issue I’m having is to do with this test:

{
	code: 'a { top: calc(2rem + @fh+d*sf-as); }',
	description: 'Less variable with symbols',
},

The AST is interpreted like this:

[
	{ type: "word", sourceIndex: 5, value: "2rem", },
	{ type: "space", sourceIndex: 9, value: " ", },
	{ type: "word", sourceIndex: 10, value: "+", },
	{ type: "space", sourceIndex: 11, value: " ", },
	{ type: "word", sourceIndex: 12, value: "@fh+d", },
	{ type: "word", sourceIndex: 17, value: "*", },
	{ type: "word", sourceIndex: 18, value: "sf-as", },
]

I can check if the word Node starts with an @ symbol and then just skip it, but it feels like that may cause issues. I noticed in the current version the variables are being blurred into a 0 character but that will modify the AST when ‘fixing’ the content at the end.

Thoughts?

Edit: The variable above is actually invalid for a less variable so this check is unnecessary.