feat: noValueAtRule css lint rule

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

@@ -0,0 +1,72 @@
+use biome_analyze::{context::RuleContext, declare_lint_rule, Ast, Rule, RuleDiagnostic};
+use biome_console::markup;
+use biome_css_syntax::CssAtRule;
+use biome_rowan::AstNode;
+
+declare_lint_rule! {
+    /// Disallow use of `@value` rule in css modules.
+    ///
+    /// Use of CSS variables is recommended instead of `@value` rule.
+    ///
+    /// ## Examples
+    ///
+    /// ### Invalid
+    ///
+    /// ```css,expect_diagnostic
+    /// @value red: #FF0000;
+    /// ```
+    ///
+    /// ### Valid
+    ///
+    /// ```css
+    /// :root {
+    ///   --red: #FF0000
+    /// }
+    ///
+    /// p {
+    ///   background-color: var(--red);
+    /// }
+    /// ```
+    ///
+    pub NoValueAtRule {
+        version: "1.8.0",
+        name: "noValueAtRule",
+        language: "css",
+        recommended: false,
+    }
+}
+
+impl Rule for NoValueAtRule {
+    type Query = Ast<CssAtRule>;
+    type State = CssAtRule;
+    type Signals = Option<Self::State>;
+    type Options = ();
+
+    fn run(ctx: &RuleContext<Self>) -> Option<Self::State> {
+        let node = ctx.query();
+
+        if node.rule().ok()?.as_css_value_at_rule().is_some() {
+            return Some(node.clone());
+        }
+
+        None
+    }
+
+    fn diagnostic(_: &RuleContext<Self>, node: &Self::State) -> Option<RuleDiagnostic> {
+        let span = node.range();
+        Some(
+            RuleDiagnostic::new(
+                rule_category!(),
+                span,
+                markup! {
+                    "Use of "<Emphasis>"@value"</Emphasis>" rule is disallowed"
+                },
+            )
+            .note(markup! {
+                "Using @value is not recommended, consider using CSS variables instead."
+            }).note(markup! {
+                "See "<Hyperlink href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">"MDN web docs"</Hyperlink>" for more details."
+            }),
+        )
+    }
+}

crates/biome_css_analyze/tests/spec_tests.rs

@@ -43,6 +43,15 @@ fn run_test(input: &'static str, _: &str, _: &str, _: &str) {
     let mut snapshot = String::new();
     let extension = input_file.extension().unwrap_or_default();
 
+    let parser_options = if file_name.ends_with(".module.css") {
+        CssParserOptions {
+            css_modules: true,
+            ..CssParserOptions::default()
+        }
+    } else {
+        CssParserOptions::default()
+    };
+
     let input_code = read_to_string(input_file)
         .unwrap_or_else(|err| panic!("failed to read {input_file:?}: {err:?}"));
     let quantity_diagnostics = if let Some(scripts) = scripts_from_json(extension, &input_code) {
@@ -55,7 +64,7 @@ fn run_test(input: &'static str, _: &str, _: &str, _: &str) {
                 file_name,
                 input_file,
                 CheckActionType::Lint,
-                CssParserOptions::default(),
+                parser_options,
             );
         }
 
@@ -72,7 +81,7 @@ fn run_test(input: &'static str, _: &str, _: &str, _: &str) {
             file_name,
             input_file,
             CheckActionType::Lint,
-            CssParserOptions::default(),
+            parser_options,
         )
     };
 

crates/biome_css_analyze/tests/specs/nursery/noValueAtRule/invalid.module.css

@@ -0,0 +1,17 @@
+/* css variables */
+@value primary: #BF4040;
+@value secondary: #1F4F7F;
+
+/* breakpoints */
+@value small: (max-width: 599px);
+@value medium: (min-width: 600px) and (max-width: 959px);
+@value large: (min-width: 960px);
+
+/* alias paths for other values or composition */
+@value colors: "./colors.css";
+/* import multiple from a single file */
+@value primary, secondary from colors;
+/* make local aliases to imported values */
+@value small as bp-small, large as bp-large from "./breakpoints.css";
+/* value as selector name */
+@value selectorValue: secondary-color;

crates/biome_css_analyze/tests/specs/nursery/noValueAtRule/invalid.module.css.snap

@@ -0,0 +1,193 @@
+---
+source: crates/biome_css_analyze/tests/spec_tests.rs
+expression: invalid.module.css
+---
+# Input
+```css
+/* css variables */
+@value primary: #BF4040;
+@value secondary: #1F4F7F;
+
+/* breakpoints */
+@value small: (max-width: 599px);
+@value medium: (min-width: 600px) and (max-width: 959px);
+@value large: (min-width: 960px);
+
+/* alias paths for other values or composition */
+@value colors: "./colors.css";
+/* import multiple from a single file */
+@value primary, secondary from colors;
+/* make local aliases to imported values */
+@value small as bp-small, large as bp-large from "./breakpoints.css";
+/* value as selector name */
+@value selectorValue: secondary-color;
+
+```
+
+# Diagnostics
+```
+invalid.module.css:2:1 lint/nursery/noValueAtRule ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Use of @value rule is disallowed
+
+    1 │ /* css variables */
+  > 2 │ @value primary: #BF4040;
+      │ ^^^^^^^^^^^^^^^^^^^^^^^^
+    3 │ @value secondary: #1F4F7F;
+    4 │ 
+
+  i Using @value is not recommended, consider using CSS variables instead.
+
+  i See MDN web docs for more details.
+
+
+```
+
+```
+invalid.module.css:3:1 lint/nursery/noValueAtRule ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Use of @value rule is disallowed
+
+    1 │ /* css variables */
+    2 │ @value primary: #BF4040;
+  > 3 │ @value secondary: #1F4F7F;
+      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^
+    4 │ 
+    5 │ /* breakpoints */
+
+  i Using @value is not recommended, consider using CSS variables instead.
+
+  i See MDN web docs for more details.
+
+
+```
+
+```
+invalid.module.css:6:1 lint/nursery/noValueAtRule ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Use of @value rule is disallowed
+
+    5 │ /* breakpoints */
+  > 6 │ @value small: (max-width: 599px);
+      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    7 │ @value medium: (min-width: 600px) and (max-width: 959px);
+    8 │ @value large: (min-width: 960px);
+
+  i Using @value is not recommended, consider using CSS variables instead.
+
+  i See MDN web docs for more details.
+
+
+```
+
+```
+invalid.module.css:7:1 lint/nursery/noValueAtRule ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Use of @value rule is disallowed
+
+    5 │ /* breakpoints */
+    6 │ @value small: (max-width: 599px);
+  > 7 │ @value medium: (min-width: 600px) and (max-width: 959px);
+      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    8 │ @value large: (min-width: 960px);
+    9 │ 
+
+  i Using @value is not recommended, consider using CSS variables instead.
+
+  i See MDN web docs for more details.
+
+
+```
+
+```
+invalid.module.css:8:1 lint/nursery/noValueAtRule ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Use of @value rule is disallowed
+
+     6 │ @value small: (max-width: 599px);
+     7 │ @value medium: (min-width: 600px) and (max-width: 959px);
+   > 8 │ @value large: (min-width: 960px);
+       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+     9 │ 
+    10 │ /* alias paths for other values or composition */
+
+  i Using @value is not recommended, consider using CSS variables instead.
+
+  i See MDN web docs for more details.
+
+
+```
+
+```
+invalid.module.css:11:1 lint/nursery/noValueAtRule ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Use of @value rule is disallowed
+
+    10 │ /* alias paths for other values or composition */
+  > 11 │ @value colors: "./colors.css";
+       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    12 │ /* import multiple from a single file */
+    13 │ @value primary, secondary from colors;
+
+  i Using @value is not recommended, consider using CSS variables instead.
+
+  i See MDN web docs for more details.
+
+
+```
+
+```
+invalid.module.css:13:1 lint/nursery/noValueAtRule ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Use of @value rule is disallowed
+
+    11 │ @value colors: "./colors.css";
+    12 │ /* import multiple from a single file */
+  > 13 │ @value primary, secondary from colors;
+       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    14 │ /* make local aliases to imported values */
+    15 │ @value small as bp-small, large as bp-large from "./breakpoints.css";
+
+  i Using @value is not recommended, consider using CSS variables instead.
+
+  i See MDN web docs for more details.
+
+
+```
+
+```
+invalid.module.css:15:1 lint/nursery/noValueAtRule ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Use of @value rule is disallowed
+
+    13 │ @value primary, secondary from colors;
+    14 │ /* make local aliases to imported values */
+  > 15 │ @value small as bp-small, large as bp-large from "./breakpoints.css";
+       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    16 │ /* value as selector name */
+    17 │ @value selectorValue: secondary-color;
+
+  i Using @value is not recommended, consider using CSS variables instead.
+
+  i See MDN web docs for more details.
+
+
+```
+
+```
+invalid.module.css:17:1 lint/nursery/noValueAtRule ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Use of @value rule is disallowed
+
+    15 │ @value small as bp-small, large as bp-large from "./breakpoints.css";
+    16 │ /* value as selector name */
+  > 17 │ @value selectorValue: secondary-color;
+       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    18 │ 
+
+  i Using @value is not recommended, consider using CSS variables instead.
+
+  i See MDN web docs for more details.
+
+
+```

crates/biome_css_analyze/tests/specs/nursery/noValueAtRule/valid.module.css

@@ -0,0 +1,4 @@
+@import "./colors.module.css";
+:root {
+    --main-color: red;
+}

crates/biome_css_analyze/tests/specs/nursery/noValueAtRule/valid.module.css.snap

@@ -0,0 +1,11 @@
+---
+source: crates/biome_css_analyze/tests/spec_tests.rs
+expression: valid.module.css
+---
+# Input
+```css
+@import "./colors.module.css";
+:root {
+    --main-color: red;
+}
+```

crates/biome_diagnostics_categories/src/categories.rs

@@ -150,6 +150,7 @@ define_categories! {
     "lint/nursery/noUnusedFunctionParameters": "https://biomejs.dev/linter/rules/no-unused-function-parameters",
     "lint/nursery/noUselessStringConcat": "https://biomejs.dev/linter/rules/no-useless-string-concat",
     "lint/nursery/noUselessUndefinedInitialization": "https://biomejs.dev/linter/rules/no-useless-undefined-initialization",
+    "lint/nursery/noValueAtRule": "https://biomejs.dev/linter/rules/no-value-at-rule",
     "lint/nursery/noYodaExpression": "https://biomejs.dev/linter/rules/no-yoda-expression",
     "lint/nursery/useAdjacentOverloadSignatures": "https://biomejs.dev/linter/rules/use-adjacent-overload-signatures",
     "lint/nursery/useBiomeSuppressionComment": "https://biomejs.dev/linter/rules/use-biome-suppression-comment",