feat(lint/css): add noHexColors

.changeset/quiet-hounds-shout.md

@@ -0,0 +1,5 @@
+---
+"@biomejs/biome": patch
+---
+
+Added the nursery rule [`noHexColors`](https://biomejs.dev/linter/rules/no-hex-colors/), which flags the use of hexadecimal color codes in CSS and suggests using named colors or RGB/RGBA/HSL/HSLA formats instead.

crates/biome_css_analyze/src/lint/nursery.rs

@@ -5,4 +5,5 @@
 use biome_analyze::declare_lint_group;
 pub mod no_empty_source;
 pub mod no_excessive_lines_per_file;
-declare_lint_group! { pub Nursery { name : "nursery" , rules : [self :: no_empty_source :: NoEmptySource , self :: no_excessive_lines_per_file :: NoExcessiveLinesPerFile ,] } }
+pub mod no_hex_colors;
+declare_lint_group! { pub Nursery { name : "nursery" , rules : [self :: no_empty_source :: NoEmptySource , self :: no_excessive_lines_per_file :: NoExcessiveLinesPerFile , self :: no_hex_colors :: NoHexColors ,] } }

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

@@ -0,0 +1,85 @@
+use biome_analyze::{
+    Ast, Rule, RuleDiagnostic, RuleSource, context::RuleContext, declare_lint_rule,
+};
+use biome_console::markup;
+use biome_css_syntax::CssColor;
+use biome_rowan::AstNode;
+use biome_rule_options::no_hex_colors::NoHexColorsOptions;
+
+declare_lint_rule! {
+    /// Disallow hex colors.
+    ///
+    /// While hex colors are widely supported and compact, they can be less readable
+    /// and have limitations in terms of color representation compared to color models
+    /// like HSL or OKLCH. This rule encourages the use of more expressive color formats.
+    ///
+    /// This rule is inspired by the Stylelint rule
+    /// [`color-no-hex`](https://stylelint.io/user-guide/rules/color-no-hex/).
+    ///
+    /// ## Examples
+    ///
+    /// ### Invalid
+    ///
+    /// ```css,expect_diagnostic
+    /// a { color: #000; }
+    /// ```
+    ///
+    /// ```css,expect_diagnostic
+    /// a { color: #fff1aa; }
+    /// ```
+    ///
+    /// ```css,expect_diagnostic
+    /// a { color: #123456aa; }
+    /// ```
+    ///
+    /// ### Valid
+    ///
+    /// ```css
+    /// a { color: black; }
+    /// ```
+    ///
+    /// ```css
+    /// a { color: rgb(0, 0, 0); }
+    /// ```
+    ///
+    /// ### References
+    ///
+    /// - [MDN Web Docs on CSS color values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value)
+    ///
+    pub NoHexColors {
+        version: "next",
+        name: "noHexColors",
+        language: "css",
+        sources: &[RuleSource::Stylelint("color-no-hex").same()],
+        recommended: false,
+    }
+}
+
+impl Rule for NoHexColors {
+    type Query = Ast<CssColor>;
+    type State = ();
+    type Signals = Option<Self::State>;
+    type Options = NoHexColorsOptions;
+
+    fn run(_ctx: &RuleContext<Self>) -> Self::Signals {
+        Some(())
+    }
+
+    fn diagnostic(ctx: &RuleContext<Self>, _state: &Self::State) -> Option<RuleDiagnostic> {
+        Some(
+            RuleDiagnostic::new(
+                rule_category!(),
+                ctx.query().range(),
+                markup! {
+                    "Unexpected hex color."
+                },
+            )
+            .note(markup! {
+                "Hex colors are less readable and have limitations compared to other color models."
+            })
+            .note(markup! {
+                "Consider using a named color or a color function like rgb(), hsl() or oklch(). See "<Hyperlink href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value">"MDN Web Docs on CSS color values"</Hyperlink>" for more information."
+            }),
+        )
+    }
+}

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

@@ -0,0 +1,5 @@
+/* should generate diagnostics */
+a { color: #000; }
+a { color: #fff1aa; }
+a { color: #123456aa; }
+a { color: #0000000000000000; }

crates/biome_css_analyze/tests/specs/nursery/noHexColors/invalid.css.snap

@@ -0,0 +1,98 @@
+---
+source: crates/biome_css_analyze/tests/spec_tests.rs
+expression: invalid.css
+---
+# Input
+```css
+/* should generate diagnostics */
+a { color: #000; }
+a { color: #fff1aa; }
+a { color: #123456aa; }
+a { color: #0000000000000000; }
+
+```
+
+_Note: The parser emitted 1 diagnostics which are not shown here._
+
+# Diagnostics
+```
+invalid.css:2:12 lint/nursery/noHexColors ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i Unexpected hex color.
+
+    1 │ /* should generate diagnostics */
+  > 2 │ a { color: #000; }
+      │            ^^^^
+    3 │ a { color: #fff1aa; }
+    4 │ a { color: #123456aa; }
+
+  i Hex colors are less readable and have limitations compared to other color models.
+
+  i Consider using a named color or a color function like rgb(), hsl() or oklch(). See MDN Web Docs on CSS color values for more information.
+
+  i This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
+
+
+```
+
+```
+invalid.css:3:12 lint/nursery/noHexColors ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i Unexpected hex color.
+
+    1 │ /* should generate diagnostics */
+    2 │ a { color: #000; }
+  > 3 │ a { color: #fff1aa; }
+      │            ^^^^^^^
+    4 │ a { color: #123456aa; }
+    5 │ a { color: #0000000000000000; }
+
+  i Hex colors are less readable and have limitations compared to other color models.
+
+  i Consider using a named color or a color function like rgb(), hsl() or oklch(). See MDN Web Docs on CSS color values for more information.
+
+  i This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
+
+
+```
+
+```
+invalid.css:4:12 lint/nursery/noHexColors ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i Unexpected hex color.
+
+    2 │ a { color: #000; }
+    3 │ a { color: #fff1aa; }
+  > 4 │ a { color: #123456aa; }
+      │            ^^^^^^^^^
+    5 │ a { color: #0000000000000000; }
+    6 │ 
+
+  i Hex colors are less readable and have limitations compared to other color models.
+
+  i Consider using a named color or a color function like rgb(), hsl() or oklch(). See MDN Web Docs on CSS color values for more information.
+
+  i This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
+
+
+```
+
+```
+invalid.css:5:12 lint/nursery/noHexColors ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  i Unexpected hex color.
+
+    3 │ a { color: #fff1aa; }
+    4 │ a { color: #123456aa; }
+  > 5 │ a { color: #0000000000000000; }
+      │            ^^^^^^^^^^^^^^^^^
+    6 │ 
+
+  i Hex colors are less readable and have limitations compared to other color models.
+
+  i Consider using a named color or a color function like rgb(), hsl() or oklch(). See MDN Web Docs on CSS color values for more information.
+
+  i This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
+
+
+```

crates/biome_css_analyze/tests/specs/nursery/noHexColors/valid.css

@@ -0,0 +1,7 @@
+/* should not generate diagnostics */
+p {
+	color: red;
+}
+a { color: black; }
+a { color: rgb(0, 0, 0); }
+a { color: rgba(0, 0, 0, 1); }

crates/biome_css_analyze/tests/specs/nursery/noHexColors/valid.css.snap

@@ -0,0 +1,16 @@
+---
+source: crates/biome_css_analyze/tests/spec_tests.rs
+assertion_line: 111
+expression: valid.css
+---
+# Input
+```css
+/* should not generate diagnostics */
+p {
+	color: red;
+}
+a { color: black; }
+a { color: rgb(0, 0, 0); }
+a { color: rgba(0, 0, 0, 1); }
+
+```

crates/biome_rule_options/src/lib.rs

@@ -114,6 +114,7 @@ pub mod no_global_object_calls;
 pub mod no_head_element;
 pub mod no_head_import_in_document;
 pub mod no_header_scope;
+pub mod no_hex_colors;
 pub mod no_img_element;
 pub mod no_implicit_any_let;
 pub mod no_implicit_boolean;

crates/biome_rule_options/src/no_hex_colors.rs

@@ -0,0 +1,6 @@
+use biome_deserialize_macros::{Deserializable, Merge};
+use serde::{Deserialize, Serialize};
+#[derive(Default, Clone, Debug, Deserialize, Deserializable, Merge, Eq, PartialEq, Serialize)]
+#[cfg_attr(feature = "schema", derive(schemars::JsonSchema))]
+#[serde(rename_all = "camelCase", deny_unknown_fields, default)]
+pub struct NoHexColorsOptions {}