Fix false positives for variables and color functions in color-function-notation

[lachieh]

Fixes #5671

[lachieh]

Question here for maintainers. The rules that are failing now from the scss syntax section:

stylelint/lib/rules/color-function-notation/__tests__/index.js

Lines 407 to 413 in d630d96

	{
	code: 'a { color: rgba($a, $b, $c, $d) }',
	fixed: 'a { color: rgb($a $b $c / $d) }',
	message: messages.expected('modern'),
	line: 1,
	column: 12,
	},

stylelint/lib/rules/color-function-notation/__tests__/index.js

Lines 441 to 446 in d630d96

	{
	code: 'a { color: rgb($a $b $c / $d) }',
	message: messages.expected('legacy'),
	line: 1,
	column: 12,
	},

Are these rules valid tests cases here? Should this be something that is handled by stylelint-scss? It seems like part of the problem is that the contents of the variable is what needs to be checked first and that's not a responsibility of stylelint.

[jeddy3]

Thanks for the pull request!

Are these rules valid tests cases here?

Nope. Those should be accepted now, rather than rejected.

Should this be something that is handled by stylelint-scss?

Yes, exactly.

[lachieh]

Looking closer at theses tests, is the scss section necessary at all or should I merge those test cases with the main syntax rules?

[jeddy3]

Looking closer at theses tests, is the scss section necessary at all or should I merge those test cases with the main syntax rules?

They should be in a separate testRule (that uses the postcss-scss syntax - even though the default parser can parse $) so that we signal that we're testing non-standard constructs (which, in this case, are dollar variables - both defined and used). It helps us maintain the line between CSS and non-standard stuff.

[lachieh]

Got it, thanks. This one is ready for review now.

[ybiquitous]

@lachieh Thank you for creating this pull request!

It would seem better to me if you could add some test cases to isStandardSyntaxColorFunction.test.js.

[lachieh]

@ybiquitous Thanks, added some test cases. Let me know if it needs any more.

[ybiquitous]

@lachieh Thank you! LGTM 👍🏼

[jeddy3]

LGTM, thank you!

[ybiquitous]

@jeddy3 Will you update the changelog?

[jeddy3]

Whoops, good catch. Thanks @ybiquitous !

Added now:

• Fixed: color-function-notation false positives for variables and color functions (#5793)

I'll be releasing shortly.