feat(lint): add useTailwindShorthandClasses

Author: dyc3

Cargo.lock

@@ -92,6 +92,7 @@ biome_ruledoc_utils          = { path = "./crates/biome_ruledoc_utils" }
 biome_service                = { path = "./crates/biome_service" }
 biome_string_case            = { path = "./crates/biome_string_case", version = "0.5.7", features = ["biome_rowan"] }
 biome_suppression            = { path = "./crates/biome_suppression", version = "0.5.7" }
+biome_tailwind_logic         = { path = "./crates/biome_tailwind_logic", version = "0.1.0" }
 biome_tailwind_factory       = { path = "./crates/biome_tailwind_factory", version = "0.0.1" }
 biome_tailwind_parser        = { path = "./crates/biome_tailwind_parser", version = "0.0.1" }
 biome_tailwind_syntax        = { path = "./crates/biome_tailwind_syntax", version = "0.0.1" }

Cargo.toml

@@ -28,6 +28,8 @@ biome_rowan              = { workspace = true }
 biome_rule_options       = { workspace = true }
 biome_string_case        = { workspace = true }
 biome_suppression        = { workspace = true }
+biome_tailwind_logic     = { workspace = true }
+biome_tailwind_parser    = { workspace = true }
 phf                      = { workspace = true }
 schemars                 = { workspace = true, optional = true }
 serde                    = { workspace = true, features = ["derive"] }

crates/biome_configuration/src/analyzer/linter/rules.rs

@@ -5,6 +5,7 @@ mod assist;
 mod lint;
 mod registry;
 mod suppression_action;
+mod tailwind;
 mod utils;
 
 pub use crate::registry::visit_registry;

crates/biome_configuration/src/generated/linter_options_check.rs

@@ -0,0 +1,167 @@
+use crate::HtmlRuleAction;
+use crate::tailwind::{apply_fixed_class_string, class_string, host_range};
+use biome_analyze::{
+    Ast, FixKind, Rule, RuleAction, RuleDiagnostic, RuleDomain, RuleSource, context::RuleContext,
+    declare_lint_rule,
+};
+use biome_console::markup;
+use biome_html_syntax::HtmlAttribute;
+use biome_rowan::{AstNode, BatchMutationExt};
+use biome_rule_options::use_tailwind_shorthand_classes::UseTailwindShorthandClassesOptions;
+use biome_tailwind_logic::use_tailwind_shorthand_classes::{
+    TailwindShorthandViolation, analyze_tailwind_shorthand, auto_fix,
+};
+use biome_tailwind_parser::parse_tailwind;
+
+declare_lint_rule! {
+    /// Enforce using fewer Tailwind utilities instead of multiple utilities that are functionally the same.
+    ///
+    /// This rule detects sequences of Tailwind CSS utility classes that can be replaced by a single
+    /// shorter utility. Using shorthands reduces duplication, keeps class lists readable, and helps
+    /// prevent drift where one side gets updated but the matching side does not.
+    ///
+    /// ## Examples
+    ///
+    /// ### Invalid
+    ///
+    /// ```html,expect_diagnostic
+    /// <div class="w-4 h-4"></div>
+    /// ```
+    ///
+    /// ### Valid
+    ///
+    /// ```html
+    /// <div class="size-4"></div>
+    /// ```
+    ///
+    /// ## Options
+    ///
+    /// ### `attributes`
+    ///
+    /// ```json,options
+    /// {
+    ///     "options": {
+    ///         "attributes": ["data-classes"]
+    ///     }
+    /// }
+    /// ```
+    ///
+    /// Default: `[]`
+    ///
+    /// The `class` attribute is always checked.
+    /// Use this option to add more HTML attribute names that should be treated as Tailwind class lists.
+    ///
+    /// #### Invalid
+    ///
+    /// ```html,expect_diagnostic,use_options
+    /// <div data-classes="w-4 h-4"></div>
+    /// ```
+    ///
+    /// #### Valid
+    ///
+    /// ```html,use_options
+    /// <div data-classes="size-4"></div>
+    /// ```
+    ///
+    pub UseTailwindShorthandClasses {
+        version: "next",
+        name: "useTailwindShorthandClasses",
+        language: "html",
+        domains: &[RuleDomain::Tailwind],
+        sources: &[RuleSource::EslintBetterTailwindcss("enforce-shorthand-classes").inspired()],
+        recommended: false,
+        fix_kind: FixKind::Unsafe,
+    }
+}
+
+impl Rule for UseTailwindShorthandClasses {
+    type Query = Ast<HtmlAttribute>;
+    type State = TailwindShorthandViolation;
+    type Signals = Box<[Self::State]>;
+    type Options = UseTailwindShorthandClassesOptions;
+
+    fn run(ctx: &RuleContext<Self>) -> Self::Signals {
+        let Some(class_list) = class_string(ctx.query(), ctx.options()) else {
+            return Vec::new().into_boxed_slice();
+        };
+
+        let parse = parse_tailwind(class_list.text());
+        if parse.has_errors() {
+            return Vec::new().into_boxed_slice();
+        }
+
+        analyze_tailwind_shorthand(&parse.tree().candidates()).into_boxed_slice()
+    }
+
+    fn diagnostic(ctx: &RuleContext<Self>, state: &Self::State) -> Option<RuleDiagnostic> {
+        let first_range = host_range(ctx.query(), state.uncompressed_nodes.first()?.range())?;
+
+        let mut diagnostic = RuleDiagnostic::new(
+            rule_category!(),
+            first_range,
+            markup! {
+                "These Tailwind classes can be replaced with a shorthand class."
+            },
+        );
+
+        for candidate in state.uncompressed_nodes.iter().skip(1) {
+            if let Some(range) = host_range(ctx.query(), candidate.range()) {
+                diagnostic = diagnostic.detail(
+                    range,
+                    markup! {
+                        "Compressible utility used here."
+                    },
+                );
+            }
+        }
+
+        Some(diagnostic.note(markup! {
+            "Using fewer classes reduces duplication and improves readability."
+        }))
+    }
+
+    fn action(ctx: &RuleContext<Self>, state: &Self::State) -> Option<HtmlRuleAction> {
+        let class_list = class_string(ctx.query(), ctx.options())?;
+
+        let parse = parse_tailwind(class_list.text());
+        if parse.has_errors() {
+            return None;
+        }
+
+        let violations = analyze_tailwind_shorthand(&parse.tree().candidates());
+        let fresh_state = find_matching_violation(state, &violations)?;
+        let fixed = auto_fix(&parse.tree(), fresh_state)?.commit().to_string();
+
+        let mut mutation = ctx.root().begin();
+        apply_fixed_class_string(&mut mutation, ctx.query(), &fixed)?;
+
+        Some(RuleAction::new(
+            ctx.metadata().action_category(ctx.category(), ctx.group()),
+            ctx.metadata().applicability(),
+            markup! {
+                "Use the Tailwind shorthand classes."
+            }
+            .to_owned(),
+            mutation,
+        ))
+    }
+}
+
+fn find_matching_violation<'a>(
+    state: &TailwindShorthandViolation,
+    violations: &'a [TailwindShorthandViolation],
+) -> Option<&'a TailwindShorthandViolation> {
+    violations.iter().find(|violation| {
+        violation.replace_whole_node == state.replace_whole_node
+            && violation.replacement_bases == state.replacement_bases
+            && violation.uncompressed_nodes.len() == state.uncompressed_nodes.len()
+            && violation
+                .uncompressed_nodes
+                .iter()
+                .zip(&state.uncompressed_nodes)
+                .all(|(left, right)| {
+                    left.range() == right.range()
+                        && left.syntax().text_trimmed() == right.syntax().text_trimmed()
+                })
+    })
+}

crates/biome_diagnostics_categories/src/categories.rs

@@ -0,0 +1,73 @@
+use biome_html_factory::make;
+use biome_html_syntax::{HtmlAttribute, HtmlLanguage, HtmlString, HtmlSyntaxKind, HtmlSyntaxToken};
+use biome_rowan::{BatchMutation, TextRange, TextSize, TokenText};
+use biome_rule_options::use_tailwind_shorthand_classes::UseTailwindShorthandClassesOptions;
+
+pub(crate) trait TailwindClassStringOptions {
+    fn has_attribute(&self, name: &str) -> bool;
+}
+
+impl TailwindClassStringOptions for UseTailwindShorthandClassesOptions {
+    fn has_attribute(&self, name: &str) -> bool {
+        self.has_attribute(name)
+    }
+}
+
+pub(crate) fn class_string(
+    attribute: &HtmlAttribute,
+    options: &impl TailwindClassStringOptions,
+) -> Option<TokenText> {
+    if !options.has_attribute(attribute_name(attribute)?.text_trimmed()) {
+        return None;
+    }
+
+    html_string(attribute)?.inner_string_text().ok()
+}
+
+pub(crate) fn html_string(attribute: &HtmlAttribute) -> Option<HtmlString> {
+    attribute
+        .initializer()?
+        .value()
+        .ok()?
+        .as_html_string()
+        .cloned()
+}
+
+pub(crate) fn host_range(attribute: &HtmlAttribute, range: TextRange) -> Option<TextRange> {
+    let start = html_string(attribute)?
+        .value_token()
+        .ok()?
+        .text_trimmed_range()
+        .start()
+        + TextSize::from(1);
+    Some(TextRange::new(start + range.start(), start + range.end()))
+}
+
+pub(crate) fn apply_fixed_class_string(
+    mutation: &mut BatchMutation<HtmlLanguage>,
+    attribute: &HtmlAttribute,
+    fixed: &str,
+) -> Option<()> {
+    let html_string = html_string(attribute)?;
+    let value_token = html_string.value_token().ok()?;
+    let new_token = if value_token.text_trimmed().starts_with('\'') {
+        html_string_literal_single_quotes(fixed)
+    } else {
+        make::html_string_literal(fixed)
+    };
+    mutation.replace_node(html_string, make::html_string(new_token));
+    Some(())
+}
+
+fn attribute_name(attribute: &HtmlAttribute) -> Option<biome_html_syntax::HtmlSyntaxToken> {
+    attribute.name().ok()?.value_token().ok()
+}
+
+fn html_string_literal_single_quotes(text: &str) -> HtmlSyntaxToken {
+    HtmlSyntaxToken::new_detached(
+        HtmlSyntaxKind::HTML_STRING_LITERAL,
+        &format!("'{text}'"),
+        [],
+        [],
+    )
+}

crates/biome_html_analyze/Cargo.toml

@@ -0,0 +1 @@
+<div data-classes="px-2 py-2"></div>