feat(linter): eslint-plugin-next: no-head-element (#2006)

Part of: #1929 Based on: - code: https://github.com/vercel/next.js/blob/canary/packages/eslint-plugin-next/src/rules/no-head-element.ts - test: https://github.com/vercel/next.js/blob/canary/test/unit/eslint-plugin-next/no-head-element.test.ts - doc: https://nextjs.org/docs/messages/no-head-element --------- Co-authored-by: Cameron Clark <cameron.clark@hey.com>
oxc-project · Jan 13, 2024 · c70a065 · c70a065
1 parent 8f0f824
commit c70a065
Show file tree

Hide file tree

Showing 3 changed files with 196 additions and 0 deletions.
diff --git a/crates/oxc_linter/src/rules.rs b/crates/oxc_linter/src/rules.rs
@@ -284,6 +284,7 @@ mod nextjs {
     pub mod no_assign_module_variable;
     pub mod no_async_client_component;
     pub mod no_css_tags;
+    pub mod no_head_element;
     pub mod no_head_import_in_document;
     pub mod no_img_element;
     pub mod no_script_component_in_head;
@@ -543,6 +544,7 @@ oxc_macros::declare_all_lint_rules! {
     nextjs::no_assign_module_variable,
     nextjs::no_async_client_component,
     nextjs::no_css_tags,
+    nextjs::no_head_element,
     nextjs::no_head_import_in_document,
     nextjs::no_img_element,
     nextjs::no_script_component_in_head,

diff --git a/crates/oxc_linter/src/rules/nextjs/no_head_element.rs b/crates/oxc_linter/src/rules/nextjs/no_head_element.rs
@@ -0,0 +1,171 @@
+use oxc_ast::{ast::JSXElementName, AstKind};
+use oxc_diagnostics::{
+    miette::{self, Diagnostic},
+    thiserror::Error,
+};
+use oxc_macros::declare_oxc_lint;
+use oxc_span::Span;
+
+use crate::{context::LintContext, rule::Rule, AstNode};
+
+#[derive(Debug, Error, Diagnostic)]
+#[error("eslint-plugin-next(no-head-element): Do not use `<head>` element. Use `<Head />` from `next/head` instead.")]
+#[diagnostic(severity(warning), help("See https://nextjs.org/docs/messages/no-head-element"))]
+struct NoHeadElementDiagnostic(#[label] pub Span);
+
+#[derive(Debug, Default, Clone)]
+pub struct NoHeadElement;
+
+declare_oxc_lint!(
+    /// ### What it does
+    /// Prevent usage of `<head>` element.
+    ///
+    /// ### Why is this bad?
+    ///
+    ///
+    /// ### Example
+    /// ```javascript
+    /// ```
+    NoHeadElement,
+    correctness
+);
+
+impl Rule for NoHeadElement {
+    fn run<'a>(&self, node: &AstNode<'a>, ctx: &LintContext<'a>) {
+        let Some(full_file_path) = ctx.file_path().to_str() else { return };
+        let is_in_app_dir = full_file_path.contains("app/") || full_file_path.contains("app\\");
+        if is_in_app_dir {
+            return;
+        }
+        if let AstKind::JSXOpeningElement(elem) = node.kind() {
+            let JSXElementName::Identifier(id) = &elem.name else { return };
+            if id.name == "head" {
+                ctx.diagnostic(NoHeadElementDiagnostic(elem.span));
+            }
+        }
+    }
+}
+
+#[test]
+fn test() {
+    use crate::tester::Tester;
+    use std::path::PathBuf;
+
+    let pass = vec![
+        (
+            r"import Head from 'next/head';
+			
+			export class MyComponent {
+			  render() {
+				return (
+				  <div>
+					<Head>
+					  <title>My page title</title>
+					</Head>
+				  </div>
+				);
+			  }
+			}
+		",
+            None,
+            None,
+            Some(PathBuf::from("pages/index.js")),
+        ),
+        (
+            r"import Head from 'next/head';
+
+           	      export class MyComponent {
+           	        render() {
+           	          return (
+           	            <div>
+           	              <Head>
+           	                <title>My page title</title>
+           	              </Head>
+           	            </div>
+           	          );
+           	        }
+           	      }
+        ",
+            None,
+            None,
+            Some(PathBuf::from("pages/index.tsx")),
+        ),
+        (
+            r"
+        	      export default function Layout({ children }) {
+        	        return (
+        	          <html>
+        	            <head>
+        	              <title>layout</title>
+        	            </head>
+        	            <body>{children}</body>
+        	          </html>
+        	        );
+        	      }
+        	",
+            None,
+            None,
+            Some(PathBuf::from("./app/layout.js")),
+        ),
+        (
+            r"
+        	      export default function Layout({ children }) {
+        	        return (
+        	          <html>
+        	            <head>
+        	              <title>layout</title>
+        	            </head>
+        	            <body>{children}</body>
+        	          </html>
+        	        );
+        	      }
+        	",
+            None,
+            None,
+            Some(PathBuf::from("./app/layout.js")),
+        ),
+    ];
+
+    let fail = vec![
+        (
+            r"
+        	      export class MyComponent {
+        	        render() {
+        	          return (
+        	            <div>
+        	              <head>
+        	                <title>My page title</title>
+        	              </head>
+        	            </div>
+        	          );
+        	        }
+        	}",
+            None,
+            None,
+            Some(PathBuf::from("./pages/index.js")),
+        ),
+        (
+            r"import Head from 'next/head';
+
+        	      export class MyComponent {
+        	        render() {
+        	          return (
+        	            <div>
+        	              <head>
+        	                <title>My page title</title>
+        	              </head>
+        	              <Head>
+        	                <title>My page title</title>
+        	              </Head>
+        	            </div>
+        	          );
+        	        }
+        	}",
+            None,
+            None,
+            Some(PathBuf::from("pages/index.tsx")),
+        ),
+    ];
+
+    Tester::new(NoHeadElement::NAME, pass, fail).test_and_snapshot();
+}
diff --git a/crates/oxc_linter/src/snapshots/no_head_element.snap b/crates/oxc_linter/src/snapshots/no_head_element.snap
@@ -0,0 +1,23 @@
+---
+source: crates/oxc_linter/src/tester.rs
+expression: no_head_element
+---
+  ⚠ eslint-plugin-next(no-head-element): Do not use `<head>` element. Use `<Head />` from `next/head` instead.
+   ╭─[no_head_element.tsx:5:1]
+ 5 │                         <div>
+ 6 │                           <head>
+   ·                           ──────
+ 7 │                             <title>My page title</title>
+   ╰────
+  help: See https://nextjs.org/docs/messages/no-head-element
+
+  ⚠ eslint-plugin-next(no-head-element): Do not use `<head>` element. Use `<Head />` from `next/head` instead.
+   ╭─[no_head_element.tsx:6:1]
+ 6 │                         <div>
+ 7 │                           <head>
+   ·                           ──────
+ 8 │                             <title>My page title</title>
+   ╰────
+  help: See https://nextjs.org/docs/messages/no-head-element
+
+