noInvalidPositionAtImportRule (CSS)

Language CSS

Summary

Rule available since: v1.8.0
Diagnostic Category: lint/correctness/noInvalidPositionAtImportRule
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-invalid-position-at-import-rule
- Inspired from css/no-invalid-at-rule-placement

How to configure

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

Description

Disallow @import after other rules.

An @import must appear before style rules and most at-rules. Only @charset and @layer may appear before it. Browsers ignore an @import placed later in the stylesheet.

Examples

Invalid

1
a {}
2
@import 'foo.css';

code-block.css:2:2 lint/correctness/noInvalidPositionAtImportRule ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This @import is in the wrong position.
  
    1 │ a {}
  > 2 │ @import 'foo.css';
      │  ^^^^^^^^^^^^^^^^^
    3 │ 
  
  ℹ Any @import rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the @import rule is invalid.
  
  ℹ Consider moving import position.

Valid

1
@import 'foo.css';
2
a {}