Fix function-url-quotes false positives for SCSS variable and @ character

[tavelli]

What minimal example or steps are needed to reproduce the bug?

.class {
  background-image: url($asset-prefix + 'assets/images/fa_calculator_blue@2x.png');
}

.otherclass {
    background: url($asset-prefix + 'assets/images/HSA_Icons-31.png');
}

What minimal configuration is needed to reproduce the bug?

{
  "extends": "stylelint-config-standard-scss"
}

How did you run Stylelint?

"stylelint \"apps/**/*.scss\" \"libs/**/*.scss\"" --fix

Which Stylelint-related dependencies are you using?

"stylelint": "^16.0.2",
"stylelint-config-standard-scss": "^12.0.0",

What did you expect to happen?

nothing should happen. format is valid/conforming.

.class {
  background-image: url($asset-prefix + 'assets/images/fa_calculator_blue@2x.png');
}

.otherclass {
    background: url($asset-prefix + 'assets/images/HSA_Icons-31.png');
}

What actually happened?

added extraneous double quotes around entire thing

.class {
  background-image: url("$asset-prefix + 'assets/images/fa_calculator_blue@2x.png'");
}

.otherclass {
    background: url($asset-prefix + 'assets/images/HSA_Icons-31.png');
}

Do you have a proposal to fix the bug?

the @ symbol in the image path seems to be the problem, when i remove that it does not add wrapping double quotes...

[jeddy3]

@tavelli Thanks for the report and for using the template.

We'll probably need to improve the heuristics in isStandardSyntaxUrl.

I've labelled the issue as ready to implement. Please consider contributing if you have time.

There are steps on how to fix a bug in a rule in the Developer guide.

[mattxwang]

Ended up taking a stab at diagnosing the issue and wrote a longer explanation in #7416!