Add support for functional custom messages

[amk221]

What is the problem you're trying to solve?

I would like to inform developers better when their code fails linting.

Currently, I can provide a custom message but:

1. This loses the ability to reference the value that caused the failure. For example:
   • Before: Unexpected hex color "#fff"
   • After Unexpected hex color. Please refer to the brand colours in the Styleguide
     
     
     
2. The blacklisted values are a great way to prevent developers from adding rules you would otherwise not want. However, it's not possible to do this:

   'declaration-property-value-blacklist': {
      'font-weight': ['500', { message: 'Please use the semi-bold mixin instead' }]
   },
   

   ...you can only add 1 catch-all message for all invalid property values.
   
   
   

What solution would you like to see?

1. It would be great to be able to swap-in values ${hex}
   or, at least prefix/suffix the original error to the custom message.

2. It would be nice if the custom messages were acknowledged for each invalid property

[hudochenkov]

This are two different suggestions.

1. Allow custom message to be a function. It's a nice idea, but could be rather complex. As every rule has different values it's provides to default message. Most rules has zero or one, but there are some rules which expose two or more. How to communicate how many and what values could be in custom message is a big problem.

2. Allow extra description to each value in declaration-property-value-blacklist. While this one sounds easier, it could be complicated as well. Because it's not property-value pairs, it's property-values pairs.

   This is how config might look like:

   {
   	rules: {
   		'declaration-property-value-blacklist': {
   			'font-weight': [
   				['400', { message: 'Please use the normal mixin instead' }],
   				['500', { message: 'Please use the semi-bold mixin instead' }],
   				['700', { message: 'Please use the bold mixin instead' }],
   			],
   			"transform": [
   				[
   					['/scale3d/', '/rotate3d/', '/translate3d/'],
   					{ message: 'Do not use 3D transformation' }
   				],
   				[
   					['/skew/'],
   					{ message: 'Do not use skew' }
   				],
   			],
   		},
   	}
   }

   As you see it would be rather confusing to configure. And very error-prone.

[amk221]

Ok thanks for the info.

Would it be possible to make message a function?

'declaration-property-value-blacklist': [{
   'font-weight': ['500']
}, {
  message: function(prop, value) {}
}],

Then the onus is on me to do the work, not Stylelint

Mind you, that gets us into custom formatter territory.

[kwokrobyn1-zz]

Any updates on this? I noticed it was closed, but did not see any changes being made

[glen-84]

@amk221 Can you please reopen this issue?

Not being able to specify a custom message for a blacklisted property value is a problem.

[thomas-j-moffett]

I also would like to be able to provide a custom message while still having the value, which caused the failure, reported, as stated by @amk221 for issue 1 in the original post.

[thibaudcolas]

I would like to implement this, as I’m considering developing a plugin where each rule would simply be using stylelint’s checkAgainstRule with custom error messages. Having built-in support for custom error messages would make this plugin much simpler. Does anyone have thoughts on how to go about this, based on @hudochenkov’s propositions or otherwise?

I’m wondering which rules exactly this should be implemented for (assuming other ones would benefit from this, not just declaration-property-value-disallowed-list. I also can’t see any support for a catch-all custom message like @amk221 mentions (see implementation), it’s unclear to me which rules might already be providing something like this.

[ybiquitous]

I've created PR #6312 as a PoC.