{"record":{"id":"4017df6589052263","repo":"oxc-project/oxc","slug":"styled-jsx-should-not-be-used-in-pages-documen","errorCode":null,"errorMessage":"`styled-jsx` should not be used in `pages/_document.js`","messagePattern":"`styled-jsx` should not be used in `pages/_document\\.js`","errorType":"validation","errorClass":"OxcDiagnostic","httpStatus":null,"severity":"warning","filePath":"crates/oxc_linter/src/rules/nextjs/no_styled_jsx_in_document.rs","lineNumber":12,"sourceCode":"use oxc_ast::{\n    AstKind,\n    ast::{JSXAttributeItem, JSXElementName},\n};\nuse oxc_diagnostics::OxcDiagnostic;\nuse oxc_macros::declare_oxc_lint;\nuse oxc_span::Span;\n\nuse crate::{AstNode, context::LintContext, rule::Rule};\n\nfn no_styled_jsx_in_document_diagnostic(span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(\"`styled-jsx` should not be used in `pages/_document.js`\")\n        .with_help(\"Possible to fix it please see: https://nextjs.org/docs/messages/no-styled-jsx-in-document#possible-ways-to-fix-it\")\n        .with_label(span)\n}\n\n#[derive(Debug, Default, Clone)]\npub struct NoStyledJsxInDocument;\n\ndeclare_oxc_lint!(\n    /// ### What it does\n    ///\n    /// Prevent usage of styled-jsx in `pages/_document.js`.\n    ///\n    /// ### Why is this bad?\n    ///\n    /// Custom CSS like styled-jsx is not allowed in a [Custom Document](https://nextjs.org/docs/pages/building-your-application/routing/custom-document).\n    ///\n    /// ### Examples\n    ///","sourceCodeStart":1,"sourceCodeEnd":30,"githubUrl":"https://github.com/oxc-project/oxc/blob/e1e7af627c8843ab64044ed466b128fcc21a035b/crates/oxc_linter/src/rules/nextjs/no_styled_jsx_in_document.rs#L1-L30","documentation":"Warning from oxlint rule `nextjs/no-styled-jsx-in-document`. `pages/_document.js` is the server-rendered shell; styled-jsx styles are scoped and applied at render time, so `<style jsx>` there has no effect or leaks across pages. The rule flags styled-jsx style elements inside the custom document.","triggerScenarios":"A `<style jsx>` (styled-jsx attributed) element rendered anywhere in `pages/_document.js`.","commonSituations":"Trying to set global reset styles directly on the document; moving shared styles 'up' to the wrong root file while consolidating CSS.","solutions":["Move the styled-jsx block to `pages/_app.js` or the component that needs it.","For true global CSS, `import './globals.css'` in `_app.js` instead of any inline style element."],"exampleFix":"// before (pages/_document.js)\n<style jsx global>{`body { margin: 0 }`}</style>\n\n// after (pages/_app.js)\nimport './globals.css'; // body { margin: 0 }","handlingStrategy":"validation","validationCode":"// styled-jsx inside the custom document:\n// rg -n '<style jsx' pages/_document.*","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Global styles belong in a CSS file imported from `_app.js`, not styled-jsx in `_document.js`.","Keep `_document.js` free of anything but Html/Head/Body/Main/NextScript structure.","Lint `_document.js` with the nextjs plugin in CI."],"tags":["nextjs","styled-jsx","pages-router","lint"],"backgroundTag":"lint-styled-jsx-scope","analyzedSha":"e1e7af627c8843ab64044ed466b128fcc21a035b","analyzedAt":"2026-08-20T07:01:07.079Z","contentChangedAt":"2026-08-20T07:01:07.079Z","schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}