📎 Implement stylelint/no-descending-specificity

[togami2864]

Description

Implement no-descending-specificity

Important

• Please skip implementing options for now since we will evaluate users actually want them later.
• Please ignore handling extended CSS language cases such as sass and less.
• Please skip custom function since we haven't syntax model yet.

Want to contribute? Lets you know you are interested! We will assign you to the issue to prevent several people to work on the same issue. Don't worry, we can unassign you later if you are no longer interested in the issue! Read our contributing guide and analyzer contributing guide.

[tunamaguro]

Hi, Can I work on this?

[dyc3]

Absolutely, assigned.

[tunamaguro]

I have a question.

In the process of implementing this feature, I started by creating a function to calculate the specificity of CSS selectors. During this process, I noticed that there is something called CssMetavariable within AnyCssSelector.

biome/crates/biome_css_syntax/src/generated/nodes.rs

Lines 8285 to 8291 in ab0f96e

	#[derive(Clone, PartialEq, Eq, Hash, Serialize)]
	pub enum AnyCssSelector {
	CssBogusSelector(CssBogusSelector),
	CssComplexSelector(CssComplexSelector),
	CssCompoundSelector(CssCompoundSelector),
	CssMetavariable(CssMetavariable),
	}

Since I'm not very familiar with CSS, I'm unsure how to handle the specificity calculation for CssMetavariable. Could you please advise me on how to process the specificity of CssMetavariable?

I found where it is used, but I don't fully understand what it represents.

biome/crates/biome_css_parser/tests/css_test_suite/ok/grit_metavariable/metavar.css.snap

Lines 55 to 61 in ab0f96e

	},
	colon_token: COLON@16..18 ":" [] [Whitespace(" ")],
	value: CssGenericComponentValueList [
	CssMetavariable {
	value_token: GRIT_METAVARIABLE@18..25 "µcolor" [] [],
	},
	],

[ematipico]

The specificity of selectors should be already available in the semantic model

biome/crates/biome_css_semantic/src/semantic_model/model.rs

Lines 113 to 128 in d03c6cd

	/// Represents a CSS selector.
	/// /// ```css
	/// span {
	/// ^^^^
	/// color: red;
	/// }
	/// ```
	#[derive(Debug, Clone)]
	pub struct Selector {
	/// The name of the selector.
	pub name: String,
	/// The text range of the selector in the source document.
	pub range: TextRange,
	/// The specificity of the selector.
	pub specificity: Specificity,
	}

[tunamaguro]

I completely missed that... Thank you for letting me know!

[tunamaguro]

I realized that the specificity calculation has not been implemented yet.

biome/crates/biome_css_semantic/src/events.rs

Lines 201 to 207 in d03c6cd

	fn add_selector_event(&mut self, name: Cow<str>, range: TextRange) {
	self.stash.push_back(SemanticEvent::SelectorDeclaration {
	name: name.into_owned(),
	range,
	specificity: Specificity(0, 0, 0), // TODO: Implement this
	});
	}

Is there anyone already working on this implementation? If not, I would like to give it a try.

[ematipico]

@tunamaguro I don't think there's someone working on it, you're more than welcome to tackle it

[tunamaguro]

Okay, I'll try it.