Rule Change: `no-invalid-properties` option to only validate property names with unknown variables

[jgoz]

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

.one {
	ccolor: var(--my-color);
}

.two {
	color: var(--my-color);
}

What does the rule currently do for this code?

1. Can't validate with unknown variable '--my-color'
2. Can't validate with unknown variable '--my-color'

What will the rule do after it's changed?

1. Unknown property 'ccolor' found
2. (no violation)

Participation

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

Additional comments

The changes made in 0.9.0 requires us to completely disable no-invalid-properties because our design system is based on a huge number of CSS variables that are defined in a single file. The guidance in the docs is not practical:

If the custom property is defined in another file, it's recommended to create a dummy rule just to ensure proper validation.

This would be a huge lift and would non-trivially increase our CSS size if every variable usage needed a .dummy { --my-color: blue; } declaration.

An option to ignore unknown variables and fall back to property name validation would be a great compromise for us.

[nzakas]

👍 This seems like a good option to add, maybe allowUnknownVariables?

I think ultimately we'd want some way to load variables from other files, but that would take a lot more time and thought.

[nzakas]

Oops, hit Enter too soon. Feel free to send a PR when you're ready. Thanks!

[zemlanin]

I think ultimately we'd want some way to load variables from other files, but that would take a lot more time and thought.

Is this something planned?

(I was kind of expecting that @import './file-with-globally-defined-props.css' would signal to eslint to look for properties in that file too)