Add no-invalid-position-at-import-rule

[kapouer]

What is the problem you're trying to solve?

:root {
	--bg: white;
}
@import './some.css';

Won't load some.css in chrome 88

What solution would you like to see?

A new rule that raises an error when @import is not at the top of the stylesheet.

[jeddy3]

@kapouer Thanks for the request and for using the template.

Sounds good to me. From the spec:

Any @import rules must precede all other valid at-rules and style rules in a style sheet (ignoring @charset), or else the @import rule is invalid.

The rule should check that @import rules are only preceded by @charset and comments.

The rule is scoped to the whole sheet, and the closest prior art is no-duplicate-at-import-rules and no-invalid-double-slash-comments.

Blue print:

• Name: no-invalid-position-at-import-rule
• Primary option: true
• Secondary options: None
• Autofixable: No
• Message: Unexpected invalid position @import rule ${atImport}
• Description: "Disallow invalid position @import rules within a stylesheet."
• Section: "Possible errors" -> "General / Sheet"

I've labelled the issue as ready to implement. Please consider contributing if you have time.

There are steps on how to add a new rule in the Developer guide.

[dmetzner]

Unfortunately, this new rule results in breaking changes when using both @use and @import in a file.

Error: @use rules must be written before any other rules.
   ╷
46 │ @use "@material/icon-button";
   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^

To disable the check:

"no-invalid-position-at-import-rule": null

[ybiquitous]

@dmetzner Because this rule is for the standard CSS spec, it does not support Sass at-rules fully.
So, you need to disable the check via .stylelintrc or stylelint-disable no-invalid-position-at-import-rule.

See also the following discussion:
#5202 (comment)