stylelint-declaration-strict-value icon indicating copy to clipboard operation
stylelint-declaration-strict-value copied to clipboard

Support distinct options for each property or a group of properties

Open AndyOGo opened this issue 4 years ago • 1 comments

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. } - except ignoreValues allows 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?

AndyOGo avatar Feb 25 '21 19:02 AndyOGo

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,
        },
      },
    ],
  },
};

nekitk avatar Apr 27 '21 14:04 nekitk