feat(biome_css_analyzer): noUnknownUnit

crates/biome_css_analyze/Cargo.toml

@@ -19,6 +19,7 @@ biome_css_syntax  = { workspace = true }
 biome_diagnostics = { workspace = true }
 biome_rowan       = { workspace = true }
 lazy_static       = { workspace = true }
+regex             = { workspace = true }
 
 [dev-dependencies]
 biome_css_parser = { path = "../biome_css_parser" }

crates/biome_css_analyze/src/lint/nursery.rs

@@ -4,13 +4,15 @@ use biome_analyze::declare_group;
 
 pub mod no_color_invalid_hex;
 pub mod no_duplicate_font_names;
+pub mod no_unknown_unit;
 
 declare_group! {
     pub Nursery {
         name : "nursery" ,
         rules : [
             self :: no_color_invalid_hex :: NoColorInvalidHex ,
             self :: no_duplicate_font_names :: NoDuplicateFontNames ,
+            self :: no_unknown_unit :: NoUnknownUnit ,
         ]
      }
 }

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

@@ -0,0 +1,191 @@
+use biome_analyze::{context::RuleContext, declare_rule, Ast, Rule, RuleDiagnostic, RuleSource};
+use biome_console::markup;
+use biome_css_syntax::{
+    AnyCssDimension, CssFunction, CssGenericProperty, CssQueryFeaturePlain, CssSyntaxKind,
+};
+use biome_rowan::{SyntaxNodeCast, TextRange};
+
+use crate::utils::strip_vendor_prefix;
+
+const RESOLUTION_MEDIA_FEATURE_NAMES: [&str; 3] =
+    ["resolution", "min-resolution", "max-resolution"];
+
+fn is_css_hack_unit(value: &str) -> bool {
+    value == "\\0"
+}
+
+declare_rule! {
+    /// Disallow unknown units.
+    ///
+    /// This rule considers units defined in the CSS Specifications, up to and including Editor's Drafts, to be known.
+    ///
+    ///
+    /// ## Examples
+    ///
+    /// ### Invalid
+    ///
+    /// ```css,expect_diagnostic
+    /// a {
+    ///   width: 10pixels;
+    /// }
+    /// ```
+    ///
+    /// ```css,expect_diagnostic
+    /// a {
+    ///   width: calc(10px + 10pixels);
+    /// }
+    /// ```
+    ///
+    /// ### Valid
+    ///
+    /// ```css
+    /// a {
+    ///   width: 10px;
+    /// }
+    /// ```
+    ///
+    /// ```css
+    /// a {
+    ///   width: 10Px;
+    /// }
+    /// ```
+    ///
+    /// ```css
+    /// a {
+    ///   width: 10pX;
+    /// }
+    /// ```
+    ///
+    /// ```css
+    /// a {
+    ///   width: calc(10px + 10px);
+    /// }
+    /// ```
+    ///
+    pub NoUnknownUnit {
+        version: "next",
+        name: "noUnknownUnit",
+        recommended: false,
+        sources: &[RuleSource::Stylelint("unit-no-unknown")],
+    }
+}
+
+pub struct RuleState {
+    value: String,
+    span: TextRange,
+}
+
+impl Rule for NoUnknownUnit {
+    type Query = Ast<AnyCssDimension>;
+    type State = RuleState;
+    type Signals = Option<Self::State>;
+    type Options = ();
+
+    fn run(ctx: &RuleContext<Self>) -> Option<Self::State> {
+        let node = ctx.query();
+
+        // dbg!(ctx.root());
+
+        match node {
+            AnyCssDimension::CssUnknownDimension(dimension) => {
+                let unit_token = dimension.unit_token().ok()?;
+                let unit = unit_token.text_trimmed().to_string();
+
+                if is_css_hack_unit(&unit) {
+                    return None;
+                }
+
+                Some(RuleState {
+                    value: unit,
+                    span: unit_token.text_trimmed_range(),
+                })
+            }
+            AnyCssDimension::CssRegularDimension(dimension) => {
+                let unit_token = dimension.unit_token().ok()?;
+                let unit = unit_token.text_trimmed().to_string();
+
+                if unit == "x" {
+                    let mut allow_x = false;
+
+                    for ancestor in dimension.unit_token().ok()?.ancestors() {
+                        match ancestor.kind() {
+                            CssSyntaxKind::CSS_FUNCTION => {
+                                let function_name = ancestor
+                                    .cast::<CssFunction>()?
+                                    .name()
+                                    .ok()?
+                                    .value_token()
+                                    .ok()?
+                                    .text_trimmed()
+                                    .to_lowercase();
+
+                                if strip_vendor_prefix(function_name.as_str()) == "image-set" {
+                                    allow_x = true;
+                                    break;
+                                }
+                            }
+                            CssSyntaxKind::CSS_QUERY_FEATURE_PLAIN => {
+                                let feature_name = ancestor
+                                    .cast::<CssQueryFeaturePlain>()?
+                                    .name()
+                                    .ok()?
+                                    .value_token()
+                                    .ok()?
+                                    .text_trimmed()
+                                    .to_lowercase();
+
+                                if RESOLUTION_MEDIA_FEATURE_NAMES.contains(&feature_name.as_str()) {
+                                    allow_x = true;
+                                    break;
+                                }
+                            }
+                            CssSyntaxKind::CSS_GENERIC_PROPERTY => {
+                                let property_name = ancestor
+                                    .cast::<CssGenericProperty>()?
+                                    .name()
+                                    .ok()?
+                                    .as_css_identifier()?
+                                    .value_token()
+                                    .ok()?
+                                    .text_trimmed()
+                                    .to_lowercase();
+
+                                if property_name == "image-resolution" {
+                                    allow_x = true;
+                                    break;
+                                }
+                            }
+                            _ => {}
+                        }
+                    }
+
+                    if !allow_x {
+                        return Some(RuleState {
+                            value: unit,
+                            span: unit_token.text_trimmed_range(),
+                        });
+                    }
+                }
+
+                None
+            }
+            _ => None,
+        }
+    }
+
+    fn diagnostic(_: &RuleContext<Self>, state: &Self::State) -> Option<RuleDiagnostic> {
+        let span = state.span;
+        Some(
+            RuleDiagnostic::new(
+                rule_category!(),
+                span,
+                markup! {
+                    "Unexpected unknown unit: "<Emphasis>{ state.value }</Emphasis>
+                },
+            )
+            .note(markup! {
+                "Fix to a known unit."
+            }),
+        )
+    }
+}

crates/biome_css_analyze/src/options.rs

@@ -6,3 +6,5 @@ pub type NoColorInvalidHex =
     <lint::nursery::no_color_invalid_hex::NoColorInvalidHex as biome_analyze::Rule>::Options;
 pub type NoDuplicateFontNames =
     <lint::nursery::no_duplicate_font_names::NoDuplicateFontNames as biome_analyze::Rule>::Options;
+pub type NoUnknownUnit =
+    <lint::nursery::no_unknown_unit::NoUnknownUnit as biome_analyze::Rule>::Options;

crates/biome_css_analyze/src/utils.rs

@@ -5,6 +5,7 @@ use crate::keywords::{
 };
 use biome_css_syntax::{AnyCssGenericComponentValue, AnyCssValue, CssGenericComponentValueList};
 use biome_rowan::{AstNode, SyntaxNodeCast};
+use regex::Regex;
 
 pub fn is_font_family_keyword(value: &str) -> bool {
     BASIC_KEYWORDS.contains(&value) || FONT_FAMILY_KEYWORDS.contains(&value)
@@ -92,3 +93,8 @@ pub fn find_font_family(value: CssGenericComponentValueList) -> Vec<AnyCssValue>
     }
     font_families
 }
+
+pub fn strip_vendor_prefix(property: &str) -> String {
+    let re = Regex::new(r"^-\w+-").unwrap();
+    re.replace(property, "").to_string()
+}

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

@@ -0,0 +1,28 @@
+a { font-size: 13pp; }
+a { margin: 13xpx; }
+a { font-size: .5remm; }
+a { font-size: 0.5remm; }
+a { color: rgb(255pix, 0, 51); }
+a { color: hsl(255pix, 0, 51); }
+a { color: rgba(255pix, 0, 51, 1); }
+a { color: hsla(255pix, 0, 51, 1); }
+a { margin: calc(13pix + 10px); }
+a { margin: calc(10pix*2); }
+a { margin: calc(2*10pix); }
+a { -webkit-transition-delay: 10pix; }
+a { margin: -webkit-calc(13pix + 10px); }
+a { margin: some-function(13pix + 10px); }
+root { --margin: 10pix; }
+@media (min-width: 13pix) {}
+@media (min-width: 10px)\n  and (max-width: 20PIX) {}
+@media (width < 10.01REMS) {}
+a { width: 1e4pz; }
+a { flex: 0 9r9 auto; }
+a { width: 400x; }
+@media (resolution: 2x) and (min-width: 200x) {}
+@media ( resolution: /* comment */ 2x ) and (min-width: 200x) {}
+a { background: image-set('img1x.png' 1x, 'img2x.png' 2x) left 20x / 15% 60% repeat-x; }
+a { background: /* comment */ image-set('img1x.png' 1x, 'img2x.png' 2x) left 20x / 15% 60% repeat-x; }
+a { background-image: image-set('img1x.png' 1pix, 'img2x.png' 2x); }
+@font-face { color: U+0100-024F; }
+a { unicode-range: U+0100-024F; }