Support distinct options for each property or a group of properties
Currently this plugin supports:
-
primary options as a list of properties represented as either strings or regular expressions, like
["foo", /bar/, ...] -
secondary options to configure the rule for all of above properties, like
{ ignoreVariables, ignoreFunctions, message, autoFixFunc, disableFix, etc. }- exceptignoreValuesallows for customization, but needs to specify same props again (duplication)
To support distinct rules for each props the schema could look as follows:
-
primary options:
[ ["foo", { options }], ["bar", /baz/, { options }], "xyz", ] - secondary options: same as before, would only be used if props have no distinct rule set
This leads to some questions:
- should secondary options be mixed in or only applied if no other options are found? (this could be made configurable)
- How to avoid a breaking change?
First of all, I really like using your plugin, it helps a lot to enforce usage of variables in a project. But I'm having a bit of a trouble writing complex configurations as a lot of properties end up duplicating in primary and secondary options. Looking forward to this issue being resolved.
As an idea maybe it's possible to add alternative configuration via object. It would be distinguishable from current configuration as type of primary option will be object, not an array, so it could be not a breaking change. Then configuration may look something like this:
module.exports = {
rules: {
"scale-unlimited/declaration-strict-value": {
"/color$/": {
ignoreValues: ["unset", "initial", "inherit", "currentColor"],
},
"font-size": {
ignoreValues: ["unset", "initial", "inherit"],
ignoreFunctions: false,
},
"line-height": {
ignoreValues: ["unset", "initial", "inherit"],
ignoreFunctions: false,
ignoreVariables: false,
},
},
},
};
Which is equivalent to this in current configuration format:
module.exports = {
rules: {
"scale-unlimited/declaration-strict-value": [
["/color$/", "font-size", "line-height"],
{
ignoreValues: {
"/color$/": ["unset", "initial", "inherit", "currentColor"],
"font-size": ["unset", "initial", "inherit"],
"line-height": ["unset", "initial", "inherit"],
},
ignoreFunctions: {
"font-size": false,
"line-height": false,
},
ignoreVariables: {
"line-height": false,
},
},
],
},
};