Add `no-unknown-custom-properties`

What is the problem you’re trying to solve?

I’d like to disallow unknown custom properties. For example:

:root {
  --foo: 1px;
}

a {
  top: var(--bar);
}

What solution would you like to see?

A new rule to catch this. It’s currently available as a plugin but it meets our criteria to be a built-in rule.

Prior art for user-defined unknowns is no-unknown-animations.

Also, see this Twitter thread.

We’d need to address https://github.com/stylelint/stylelint/issues/4088 first, and work out how best to add imports & resolvers to configuration files. Is standardised importForm and resolver secondary options on each of these types of rules the way to go?

• Name: no-unknown-custom-properties
• Primary option: true
• Secondary options: importForm & resolver?
• Autofixable: No
• Message: - Unexpected unknown custom property
• Description: “Disallow unknown custom properties.”
• Extended description: “This rule considers custom properties defined within the same source to be known. Use the importForm secondary option to specify more sources.”
• Section: “Avoid errors” -> “General”

Like no-unknown-animations, we won’t turn the rule on in the recommended config and we’ll want to update the recommended config to reflect this.

Any thoughts?

[jeddy3]

Indeed, there may be a helpful case if defaultImportFrom is supported. But I’m not sure whether it is necessary for the first step. If it is easy to implement defaultImportFrom and importFrom simultaneously, I agree with adding both.

I agree.

I’ll label this as ready to implement.

• Name: no-unknown-custom-properties
• Primary option: true
• Secondary options: importFrom: [] - array of glob paths to .css files
• Autofixable: No
• Message: - Unexpected unknown custom property
• Description: “Disallow unknown custom properties.”
• Extended description: “This rule considers custom properties defined within the same source to be known. You can use the importFrom secondary option to specify more sources.”
• Section: “Avoid errors” -> “Unknown”

If anyone fancies contributing this rule, there are steps on how to add a new rule in the Developer guide.

[ybiquitous]

I suggest we start by only supporting .css imports,

I agree with the idea.

Do you think there’s value in something like a defaultImportFrom configuration property

Indeed, there may be a helpful case if defaultImportFrom is supported. But I’m not sure whether it is necessary for the first step. If it is easy to implement defaultImportFrom and importFrom simultaneously, I agree with adding both.