{"record":{"id":"2bd84ffe1528f2a5","repo":"oxc-project/oxc","slug":"do-not-include-stylesheets-manually","errorCode":null,"errorMessage":"Do not include stylesheets manually.","messagePattern":"Do not include stylesheets manually\\.","errorType":"validation","errorClass":"OxcDiagnostic","httpStatus":null,"severity":"warning","filePath":"crates/oxc_linter/src/rules/nextjs/no_css_tags.rs","lineNumber":12,"sourceCode":"use oxc_ast::{\n AstKind,\n ast::{JSXAttributeItem, JSXAttributeName, JSXElementName},\n};\nuse oxc_diagnostics::OxcDiagnostic;\nuse oxc_macros::declare_oxc_lint;\nuse oxc_span::Span;\n\nuse crate::{AstNode, context::LintContext, rule::Rule, utils::get_string_literal_prop_value};\n\nfn no_css_tags_diagnostic(span: Span) -> OxcDiagnostic {\n OxcDiagnostic::warn(\"Do not include stylesheets manually.\")\n .with_help(\"See https://nextjs.org/docs/messages/no-css-tags\")\n .with_label(span)\n}\n\n#[derive(Debug, Default, Clone)]\npub struct NoCssTags;\n\ndeclare_oxc_lint!(\n /// ### What it does\n ///\n /// Prevents manual inclusion of stylesheets using `` tags in Next.js applications.\n /// This rule checks for `` tags with `rel=\"stylesheet\"` that reference local CSS files.\n ///\n /// ### Why is this bad?\n ///\n /// Next.js handles CSS imports automatically through its built-in CSS support.\n /// Manual stylesheet inclusion bypasses Next.js's built-in CSS optimization,\n /// prevents proper code splitting and optimization of styles, and may cause","sourceCodeStart":1,"sourceCodeEnd":30,"githubUrl":"https://github.com/oxc-project/oxc/blob/e1e7af627c8843ab64044ed466b128fcc21a035b/crates/oxc_linter/src/rules/nextjs/no_css_tags.rs#L1-L30","documentation":"Warning from oxlint rule `nextjs/no-css-tags`. Manually adding `` for a local CSS file bypasses the Next.js stylesheet pipeline (bundling, code-splitting, deduplication), which causes unstyled flashes and duplicated CSS. The rule flags link tags pointing at a project-local stylesheet rather than an external URL.","triggerScenarios":"JSX `` with `rel=\"stylesheet\"` whose `href` is a string literal referencing a local CSS path (not an absolute http(s) URL), rendered in any page or component.","commonSituations":"Porting a static site's `` links into components; adding a downloaded template's css link per page. Full `https://` CDN links are the common false-positive escape and are allowed.","solutions":["Import the stylesheet instead: `import './styles.css'` in `pages/_app.js` (pages router) or the consuming layout/component (app router).","For third-party CSS keep `href` as a full `https://` URL; external links are not flagged.","For global styles, import the CSS once in the root layout."],"exampleFix":"// before\n\n\n// after (top of pages/_app.tsx)\nimport '../styles/globals.css';","handlingStrategy":"validation","validationCode":"// find local stylesheet link tags:\n// rg -n ']*rel=\"stylesheet\"[^>]*href=\"(?![a-z]+://)' --pcre2 -g '*.tsx' src","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Import CSS files in `_app.js` / root layout; never link them from markup.","Keep full `https://` URLs on genuinely external CDN stylesheets so tooling can distinguish them.","Gate merges on an oxlint run with the nextjs plugin enabled."],"tags":["nextjs","css","jsx","lint"],"backgroundTag":"lint-manual-asset-loading","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"}