Rule Change: Allow for configurable properties

[bradgarropy]

What rule do you want to change?

no-invalid-properties

What change do you want to make?

Generate fewer warnings

How do you think the change should be implemented?

A new option

Example code

@layer utilities {
  .text-shadow-2 {
    text-shadow: 2px 2px theme('colors.purple.400');
  }
  .text-shadow-3 {
    text-shadow: 3px 3px theme('colors.purple.400');
  }
}

What does the rule currently do for this code?

Here is a minimal reproduction of the current state of things.
https://stackblitz.com/edit/no-irregular-whitespace-ey1hdv5b

Currently, the rule shows an error, as it does not understand Tailwind's custom theme property.

/home/projects/better-tailwind-support/tailwind.css
  15:26  error  Invalid value '2px 2px theme("colors.purple.400")' for property 'text-shadow'. Expected none | <shadow-t>#  css/no-invalid-properties
  18:26  error  Invalid value '3px 3px theme("colors.purple.400")' for property 'text-shadow'. Expected none | <shadow-t>#  css/no-invalid-properties

What will the rule do after it's changed?

We should introduce a new option to the rule, so we can add other supported properties, like Tailwind's theme property.

I would expect the configuration to look something like this:

"css/no-invalid-properties": ["error", "theme", "other", ...]

Participation

• I am willing to submit a pull request to implement this change.

Additional comments

/cc @JoshuaKGoldberg

[nzakas]

Thanks for the suggestion. I don't think it makes sense to have such customization at the rule level. Instead, I think we need to figure out a way to set preferences like this at a higher level that all rules can inherit from. After all, if you would want every rule that deals with property values to understand theme(), not just this one, and it would be a pain to have to add this customization to every rule you enable.

So, I'll track here:
#37