Use parameterized custom messages

[ybiquitous]

What is the problem you're trying to solve?

This sharable config stylelint-config-standard has defined a custom message for a few rules, for example of the selector-class-pattern:

stylelint-config-standard/index.js

Lines 136 to 141 in f569bb1

	'selector-class-pattern': [
	'^([a-z][a-z0-9]*)(-[a-z0-9]+)*$',
	{
	message: 'Expected class selector to be kebab-case',
	},
	],

A custom message (demo):

Expected class selector to be kebab-case

An original message (demo):

Expected class selector ".FOO" to match pattern "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$"

It would seem more useful if the custom message would become as below:

Expected class selector ".FOO" to be kebab-case

What solution would you like to see?

We have added the experimental feature for custom message formatting via stylelint/stylelint#6312 and the 14.12.0 version, so we can use it here.

I suggest like this:

- message: 'Expected class selector to be kebab-case',
+ message: (value) => `Expected class selector "${value}" to be kebab-case`,

Also, we need to update the built-in rules to enable the custom formatting for the rules using a custom message in stylelint-config-standard. Like this:

- message: messages.expected(selector, primary),
+ message: messages.expected,
+ messageArgs: [selector, primary],

See also the built-in rule code.

Target rules can be as below:

• custom-media-pattern
• custom-property-pattern
• keyframes-name-pattern
• selector-class-pattern
• selector-id-pattern

[jeddy3]

Sounds great to me!