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

docs/user-guide/rules/list.md

@@ -79,6 +79,7 @@ Grouped first by the following categories and then by the [_thing_](http://apps.
 - [`no-empty-source`](../../../lib/rules/no-empty-source/README.md): Disallow empty sources.
 - [`no-extra-semicolons`](../../../lib/rules/no-extra-semicolons/README.md): Disallow extra semicolons (Autofixable).
 - [`no-invalid-double-slash-comments`](../../../lib/rules/no-invalid-double-slash-comments/README.md): Disallow double-slash comments (`//...`) which are not supported by CSS.
+- [`no-invalid-position-at-import-rule`](../../../lib/rules/no-invalid-position-at-import-rule/README.md): Disallow invalid position @import rules within a stylesheet.
 
 ## Limit language features
 

lib/rules/index.js

@@ -242,6 +242,9 @@ const rules = {
 	'no-invalid-double-slash-comments': importLazy(() =>
 		require('./no-invalid-double-slash-comments'),
 	)(),
+	'no-invalid-position-at-import-rule': importLazy(() =>
+		require('./no-invalid-position-at-import-rule'),
+	)(),
 	'no-missing-end-of-source-newline': importLazy(() =>
 		require('./no-missing-end-of-source-newline'),
 	)(),

lib/rules/no-invalid-position-at-import-rule/README.md

@@ -0,0 +1,49 @@
+# no-invalid-position-at-import-rule
+
+Disallow invalid position `@import` rules within a stylesheet.
+
+<!-- prettier-ignore -->
+```css
+a {}
+@import 'foo.css';
+/**   ↑
+  * Invalid position */
+```
+
+## Options
+
+### `true`
+
+The following patterns are considered violations:
+
+<!-- prettier-ignore -->
+```css
+a {}
+@import 'foo.css';
+```
+
+<!-- prettier-ignore -->
+```css
+@media print {}
+@import 'foo.css';
+```
+
+The following patterns are _not_ considered violations:
+
+<!-- prettier-ignore -->
+```css
+@import 'foo.css';
+a {}
+```
+
+<!-- prettier-ignore -->
+```css
+/* some comment */
+@import 'foo.css';
+```
+
+<!-- prettier-ignore -->
+```css
+@charset 'utf-8';
+@import 'foo.css';
+```

lib/rules/no-invalid-position-at-import-rule/__tests__/index.js

@@ -0,0 +1,80 @@
+'use strict';
+
+const { messages, ruleName } = require('..');
+
+testRule({
+	ruleName,
+	config: [true],
+
+	accept: [
+		{
+			code: `
+			@import 'foo.css';
+			a {}
+			`,
+			description: '@import on first line',
+		},
+		{
+			code: `
+			/* some comment */
+			@import 'foo.css';
+			`,
+			description: '@import after comment',
+		},
+		{
+			code: `
+			@charset 'utf-8';
+			@import 'foo.css';
+			`,
+			description: '@import after @charset ',
+		},
+		{
+			code: `
+			@import 'foo.css';
+			@import 'bar.css';
+			`,
+			description: '@import after another @import',
+		},
+		{
+			code: `
+			@CHARSET 'utf-8';
+			@imPORT 'foo.css';
+			@import 'bar.css';
+			`,
+			description: 'case insensitive',
+		},
+	],
+
+	reject: [
+		{
+			code: `
+			a {}
+			@import 'foo.css';
+			`,
+			message: messages.rejected('foo.css'),
+			description: '@import after selector',
+			line: 3,
+			column: 4,
+		},
+		{
+			code: `
+			@media print {}
+			@import url('foo.css');
+			`,
+			message: messages.rejected('foo.css'),
+			description: '@import after another at-rule',
+			line: 3,
+			column: 4,
+		},
+		{
+			code: `
+			@media print {}
+			@imPort URl('foo.css');
+			`,
+			message: messages.rejected('foo.css'),
+			description: 'case insensitive',
+			line: 3,
+			column: 4,
+		},
+	],
+});

lib/rules/no-invalid-position-at-import-rule/index.js

@@ -0,0 +1,67 @@
+// @ts-nocheck
+
+'use strict';
+
+const report = require('../../utils/report');
+const ruleMessages = require('../../utils/ruleMessages');
+const validateOptions = require('../../utils/validateOptions');
+const valueParser = require('postcss-value-parser');
+
+const ruleName = 'no-invalid-position-at-import-rule';
+
+const messages = ruleMessages(ruleName, {
+	rejected: (atImport) => `Unexpected invalid position @import rule ${atImport}`,
+});
+
+function rule(actual) {
+	return (root, result) => {
+		const validOptions = validateOptions(result, ruleName, { actual });
+
+		if (!validOptions) {
+			return;
+		}
+
+		let invalidPosition = false;
+
+		root.walk((node) => {
+			if (node.type === 'comment' || (node.type === 'atrule' && /^charset$/i.test(node.name))) {
+				return;
+			}
+
+			if (node.type === 'atrule' && /^import$/i.test(node.name)) {
+				if (invalidPosition) {
+					const url = getAtImportUrl(node);
+
+					if (url) {
+						report({
+							message: messages.rejected(url),
+							node,
+							result,
+							ruleName,
+						});
+					}
+				}
+
+				return;
+			}
+
+			invalidPosition = true;
+		});
+	};
+}
+
+function getAtImportUrl(node) {
+	const params = valueParser(node.params).nodes;
+
+	if (!params.length) {
+		return null;
+	}
+
+	return params[0].type === 'function' && /^url$/i.test(params[0].value)
+		? params[0].nodes[0].value
+		: params[0].value;
+}
+
+rule.ruleName = ruleName;
+rule.messages = messages;
+module.exports = rule;