diff --git a/crates/oxc_linter/src/rules.rs b/crates/oxc_linter/src/rules.rs index 8e08161b7..8357eb0b5 100644 --- 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 new file mode 100644 index 000000000..6811475fc --- /dev/null +++ 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 `` element. Use `` 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 `` 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 ( +
+ + My page title + +
+ ); + } + } + ", + None, + None, + Some(PathBuf::from("pages/index.js")), + ), + ( + r"import Head from 'next/head'; + + export class MyComponent { + render() { + return ( +
+ + My page title + +
+ ); + } + } + ", + None, + None, + Some(PathBuf::from("pages/index.tsx")), + ), + ( + r" + export default function Layout({ children }) { + return ( + + + layout + + {children} + + ); + } + ", + None, + None, + Some(PathBuf::from("./app/layout.js")), + ), + ( + r" + export default function Layout({ children }) { + return ( + + + layout + + {children} + + ); + } + ", + None, + None, + Some(PathBuf::from("./app/layout.js")), + ), + ]; + + let fail = vec![ + ( + r" + export class MyComponent { + render() { + return ( +
+ + My page title + +
+ ); + } + }", + None, + None, + Some(PathBuf::from("./pages/index.js")), + ), + ( + r"import Head from 'next/head'; + + export class MyComponent { + render() { + return ( +
+ + My page title + + + My page title + +
+ ); + } + }", + 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 new file mode 100644 index 000000000..42ed7b563 --- /dev/null +++ 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 `` element. Use `` from `next/head` instead. + ╭─[no_head_element.tsx:5:1] + 5 │
+ 6 │ + · ────── + 7 │ My page title + ╰──── + help: See https://nextjs.org/docs/messages/no-head-element + + ⚠ eslint-plugin-next(no-head-element): Do not use `` element. Use `` from `next/head` instead. + ╭─[no_head_element.tsx:6:1] + 6 │
+ 7 │ + · ────── + 8 │ My page title + ╰──── + help: See https://nextjs.org/docs/messages/no-head-element + +