feat(biome_css_analyze): add noShorthandPropertyOverrides rule

crates/biome_css_analyze/src/lint/nursery/no_shorthand_property_overrides.rs

@@ -0,0 +1,133 @@
+use std::collections::HashSet;
+
+use biome_analyze::{context::RuleContext, declare_rule, Ast, Rule, RuleDiagnostic};
+use biome_console::markup;
+use biome_css_syntax::{CssDeclarationOrRuleList, CssGenericProperty, CssSyntaxKind};
+use biome_rowan::{AstNode, SyntaxNodeCast, TextRange};
+
+use crate::utils::{get_longhand_sub_properties, get_reset_to_initial_properties};
+
+declare_rule! {
+    /// Disallow shorthand properties that override related longhand properties.
+    ///
+    /// For details on shorthand properties, see the [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties).
+    ///
+    ///
+    /// This rule ignores:
+    ///
+    /// - vendor-prefixed properties (e.g., `-webkit-transition`)
+    ///
+    ///
+    /// ## Examples
+    ///
+    /// ### Invalid
+    ///
+    /// ```css,expect_diagnostic
+    /// a { padding-left: 10px; padding: 20px; }
+    /// ```
+    ///
+    /// ### Valid
+    ///
+    /// ```css
+    /// a { padding: 10px; padding-left: 20px; }
+    /// ```
+    ///
+    /// ```css
+    /// a { transition-property: opacity; } a { transition: opacity 1s linear; }
+    /// ```
+    ///
+    pub NoShorthandPropertyOverrides {
+        version: "next",
+        name: "noShorthandPropertyOverrides",
+        language: "css",
+        recommended: true,
+    }
+}
+
+fn get_css_declaration_list(property: &CssGenericProperty) -> Option<CssDeclarationOrRuleList> {
+    for ancestor in property.syntax().ancestors() {
+        if matches!(ancestor.kind(), CssSyntaxKind::CSS_DECLARATION_OR_RULE_LIST) {
+            return Some(ancestor.cast::<CssDeclarationOrRuleList>()?);
+        }
+    }
+
+    return None;
+}
+
+fn get_prior_property_names_in_block(
+    target_property: &CssGenericProperty,
+) -> Option<HashSet<String>> {
+    let declaration_list = get_css_declaration_list(target_property)?;
+
+    let mut prior_declarations = HashSet::new();
+    for declaration in declaration_list {
+        if let Some(declaration) = declaration.as_css_declaration_with_semicolon() {
+            let current_property = declaration.declaration().ok()?.property().ok()?;
+
+            let current_property =
+                if let Some(current_property) = current_property.as_css_generic_property() {
+                    current_property
+                } else {
+                    continue;
+                };
+
+            if current_property == target_property {
+                break;
+            }
+
+            let current_property_name = current_property.name().ok()?.text().to_lowercase();
+            prior_declarations.insert(current_property_name);
+        }
+    }
+
+    Some(prior_declarations)
+}
+
+pub struct NoDeclarationBlockShorthandPropertyOverridesState {
+    target_property_name: String,
+    override_property_name: String,
+    span: TextRange,
+}
+
+impl Rule for NoShorthandPropertyOverrides {
+    type Query = Ast<CssGenericProperty>;
+    type State = NoDeclarationBlockShorthandPropertyOverridesState;
+    type Signals = Option<Self::State>;
+    type Options = ();
+
+    fn run(ctx: &RuleContext<Self>) -> Option<Self::State> {
+        let node = ctx.query();
+        dbg!(node);
+
+        let target_property_name_node = node.name().ok()?;
+        let target_property_name = target_property_name_node.text().to_lowercase();
+
+        let prior_property_names = get_prior_property_names_in_block(node)?;
+        let longhand_sub_properties = get_longhand_sub_properties(&target_property_name);
+        let reset_to_initial_properties = get_reset_to_initial_properties(&target_property_name);
+
+        for prior_property_name in prior_property_names {
+            if longhand_sub_properties.contains(&prior_property_name.as_str())
+                || reset_to_initial_properties.contains(&prior_property_name.as_str())
+            {
+                return Some(NoDeclarationBlockShorthandPropertyOverridesState {
+                    target_property_name,
+                    override_property_name: prior_property_name,
+                    span: target_property_name_node.range(),
+                });
+            }
+        }
+
+        None
+    }
+
+    fn diagnostic(_: &RuleContext<Self>, state: &Self::State) -> Option<RuleDiagnostic> {
+        Some(RuleDiagnostic::new(
+            rule_category!(),
+            state.span,
+            markup! {
+                "Unexpected shorthand property "<Emphasis>{state.target_property_name}</Emphasis>" after "<Emphasis>{state.override_property_name}</Emphasis>
+            },
+        ))
+    }
+}

crates/biome_css_analyze/src/utils.rs

@@ -4,8 +4,10 @@ use crate::keywords::{
     FONT_WEIGHT_NUMERIC_KEYWORDS, FUNCTION_KEYWORDS, KNOWN_CHROME_PROPERTIES,
     KNOWN_EDGE_PROPERTIES, KNOWN_EXPLORER_PROPERTIES, KNOWN_FIREFOX_PROPERTIES, KNOWN_PROPERTIES,
     KNOWN_SAFARI_PROPERTIES, KNOWN_SAMSUNG_INTERNET_PROPERTIES, KNOWN_US_BROWSER_PROPERTIES,
-    LEVEL_ONE_AND_TWO_PSEUDO_ELEMENTS, LINE_HEIGHT_KEYWORDS, MEDIA_FEATURE_NAMES,
-    OTHER_PSEUDO_ELEMENTS, SHADOW_TREE_PSEUDO_ELEMENTS, SYSTEM_FAMILY_NAME_KEYWORDS,
+    LEVEL_ONE_AND_TWO_PSEUDO_ELEMENTS, LINE_HEIGHT_KEYWORDS,
+    LONGHAND_SUB_PROPERTIES_OF_SHORTHAND_PROPERTIES, MEDIA_FEATURE_NAMES, OTHER_PSEUDO_ELEMENTS,
+    RESET_TO_INITIAL_PROPERTIES_BY_BORDER, RESET_TO_INITIAL_PROPERTIES_BY_FONT,
+    SHADOW_TREE_PSEUDO_ELEMENTS, SHORTHAND_PROPERTIES, SYSTEM_FAMILY_NAME_KEYWORDS,
     VENDOR_PREFIXES, VENDOR_SPECIFIC_PSEUDO_ELEMENTS,
 };
 use biome_css_syntax::{AnyCssGenericComponentValue, AnyCssValue, CssGenericComponentValueList};
@@ -174,3 +176,19 @@ pub fn is_media_feature_name(prop: &str) -> bool {
     }
     false
 }
+
+pub fn get_longhand_sub_properties(shorthand_property: &str) -> &'static [&'static str] {
+    if let Ok(index) = SHORTHAND_PROPERTIES.binary_search(&shorthand_property) {
+        return LONGHAND_SUB_PROPERTIES_OF_SHORTHAND_PROPERTIES[index];
+    }
+
+    &[]
+}
+
+pub fn get_reset_to_initial_properties(shorthand_property: &str) -> &'static [&'static str] {
+    match shorthand_property {
+        "border" => &RESET_TO_INITIAL_PROPERTIES_BY_BORDER,
+        "font" => &RESET_TO_INITIAL_PROPERTIES_BY_FONT,
+        _ => &[],
+    }
+}

crates/biome_css_analyze/tests/specs/nursery/noShorthandPropertyOverrides/invalid.css

@@ -0,0 +1,43 @@
+a { padding-left: 10px; padding: 20px; }
+
+a { border-width: 20px; border: 1px solid black; }
+
+a { border-color: red; border: 1px solid black; }
+
+a { border-style: dotted; border: 1px solid black; }
+
+a { border-image: url("foo.png"); border: 1px solid black; }
+
+a { border-image-source: url("foo.png"); border: 1px solid black; }
+
+a { pAdDiNg-lEfT: 10Px; pAdDiNg: 20Px; }
+
+a { PADDING-LEFT: 10PX; PADDING: 20PX; }
+
+/* Overriding within nested rule */
+a { padding-left: 10px; { b { padding-top: 10px; padding: 20px; }}}
+
+a { border-top-width: 1px; top: 0; bottom: 3px; border: 2px solid blue; }
+
+a { transition-property: opacity; transition: opacity 1s linear; }
+
+a { background-repeat: no-repeat; background: url(lion.png); }
+
+/* @media (color) { background-repeat: no-repeat; background: url(lion.png); } */
+
+/* a { @media (color) { background-repeat: no-repeat; background: url(lion.png); }} */
+
+/* a { -webkit-transition-property: opacity; -webkit-transition: opacity 1s linear; } */
+
+/* a { -WEBKIT-transition-property: opacity; -webKIT-transition: opacity 1s linear; } */
+
+a { font-variant: small-caps; font: sans-serif; }
+
+a { font-variant: all-small-caps; font: sans-serif; }
+
+a { font-size-adjust: 0.545; font: Verdana; }
+
+/* a { font-variant-caps: small-caps; font-variant: normal; } */
+
+/* Multiple shorthand property overrides */
+a { padding-left: 10px; padding: 20px; border-width: 20px; border: 1px solid black; }