noDuplicateAtImportRules

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="CSS" icon="seti:css"> ## Summary - Rule available since: `v1.8.0` - Diagnostic Category: [`lint/suspicious/noDuplicateAtImportRules`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule doesn't have a fix. - The default severity of this rule is [**error**](/reference/diagnostics#error). - Sources: - Same as [`no-duplicate-at-import-rules`](https://github.com/stylelint/stylelint/blob/main/lib/rules/no-duplicate-at-import-rules/README.md)

How to configure

json

{
	"linter": {
		"rules": {
			"suspicious": {
				"noDuplicateAtImportRules": "error"
			}
		}
	}
}

Description

Disallow duplicate @import rules.

This rule checks if the file urls of the @import rules are duplicates.

This rule also checks the imported media queries and alerts of duplicates.

Examples

Invalid

css

@import 'a.css';
@import 'a.css';

<pre class="language-text"><code class="language-text">code-block.css:2:2 <a href="https://biomejs.dev/linter/rules/no-duplicate-at-import-rules">lint/suspicious/noDuplicateAtImportRules</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ Each @import should be unique unless differing by media queries. 1 │ @import 'a.css'; > 2 │ @import 'a.css'; │ ^^^^^^^^^^^^^^^ 3 │ ℹ Consider removing one of the duplicated imports. </code></pre>

css

@import "a.css";
@import 'a.css';

<pre class="language-text"><code class="language-text">code-block.css:2:2 <a href="https://biomejs.dev/linter/rules/no-duplicate-at-import-rules">lint/suspicious/noDuplicateAtImportRules</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ Each @import should be unique unless differing by media queries. 1 │ @import "a.css"; > 2 │ @import 'a.css'; │ ^^^^^^^^^^^^^^^ 3 │ ℹ Consider removing one of the duplicated imports. </code></pre>

css

@import url('a.css');
@import url('a.css');

<pre class="language-text"><code class="language-text">code-block.css:2:2 <a href="https://biomejs.dev/linter/rules/no-duplicate-at-import-rules">lint/suspicious/noDuplicateAtImportRules</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ Each @import should be unique unless differing by media queries. 1 │ @import url('a.css'); > 2 │ @import url('a.css'); │ ^^^^^^^^^^^^^^^^^^^^ 3 │ ℹ Consider removing one of the duplicated imports. </code></pre>

Valid

css

@import 'a.css';
@import 'b.css';

css

@import url('a.css') tv;
@import url('a.css') projection;

</TabItem> </Tabs>

How to configure

Description

Examples

Invalid

Valid

Related links