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