Skip to main content

no-duplicate-theme-classic-custom-css

Disallow duplicate customCss entries in Docusaurus classic theme config.

Targeted pattern scopeโ€‹

This rule focuses on docusaurus.config.* files.

It checks Docusaurus classic theme customCss arrays in:

  • classic preset theme.customCss
  • direct @docusaurus/theme-classic options

What this rule reportsโ€‹

This rule reports duplicate customCss entries when multiple array items resolve to the same stylesheet path.

Why this rule existsโ€‹

Loading the same classic-theme stylesheet path more than once adds noise to the config without adding value.

Duplicate entries make it harder to review the theme surface and suggest configuration drift that should be cleaned up.

โŒ Incorrectโ€‹

export default {
presets: [[
"@docusaurus/preset-classic",
{
theme: {
customCss: ["./src/css/custom.css", "./src/css/custom.css"],
},
},
]],
};

โœ… Correctโ€‹

export default {
presets: [[
"@docusaurus/preset-classic",
{
theme: {
customCss: ["./src/css/custom.css", "./src/css/extra.css"],
},
},
]],
};

Behavior and migration notesโ€‹

This rule autofixes duplicate array entries by removing later duplicates and keeping the first occurrence.

Additional examplesโ€‹

โŒ Incorrect โ€” duplicate through require.resolveโ€‹

export default {
themes: [[
"@docusaurus/theme-classic",
{
customCss: [
require.resolve("./src/css/custom.css"),
"./src/css/custom.css",
],
},
]],
};

โœ… Correct โ€” one resolved stylesheet pathโ€‹

export default {
themes: [[
"@docusaurus/theme-classic",
{
customCss: [require.resolve("./src/css/custom.css")],
},
]],
};

ESLint flat config exampleโ€‹

import docusaurus2 from "eslint-plugin-docusaurus-2";

export default [docusaurus2.configs.recommended];

When not to use itโ€‹

Do not use this rule if your project intentionally repeats the same stylesheet entry and you do not want linting to collapse those duplicates.

Rule catalog ID: R097

Further readingโ€‹