noDuplicateAtImportRules (CSS)

Language CSS

Summary

Rule available since: v1.8.0
Diagnostic Category: lint/suspicious/noDuplicateAtImportRules
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.
Sources:
- Same as no-duplicate-at-import-rules
- Inspired from css/no-duplicate-imports

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "suspicious": {
5
        "noDuplicateAtImportRules": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow duplicate @import rules.

Different quote styles and the url() form are treated as the same URL. Imports of that URL are duplicates when either import is unconditional or when their media lists share a condition. Two imports of the same URL remain valid only when both are conditional and their media conditions do not overlap. SCSS load imports are ignored because they don’t emit CSS @import rules.

Examples

Invalid

1
@import 'a.css';
2
@import 'a.css';

code-block.css:2:2 lint/suspicious/noDuplicateAtImportRules ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Each @import should be unique unless differing by media queries.
  
    1 │ @import 'a.css';
  > 2 │ @import 'a.css';
      │  ^^^^^^^^^^^^^^^
    3 │ 
  
  ℹ Importing the same stylesheet more than once is redundant and can cause an extra request.
  
  ℹ Consider removing one of the duplicated imports.

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

code-block.css:2:2 lint/suspicious/noDuplicateAtImportRules ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Each @import should be unique unless differing by media queries.
  
    1 │ @import "a.css";
  > 2 │ @import 'a.css';
      │  ^^^^^^^^^^^^^^^
    3 │ 
  
  ℹ Importing the same stylesheet more than once is redundant and can cause an extra request.
  
  ℹ Consider removing one of the duplicated imports.

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

code-block.css:2:2 lint/suspicious/noDuplicateAtImportRules ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Each @import should be unique unless differing by media queries.
  
    1 │ @import url('a.css');
  > 2 │ @import url('a.css');
      │  ^^^^^^^^^^^^^^^^^^^^
    3 │ 
  
  ℹ Importing the same stylesheet more than once is redundant and can cause an extra request.
  
  ℹ Consider removing one of the duplicated imports.

Valid

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

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