Fix false positives for dollar variables

stylelint · Apr 27, 2021 · 302e636 · 302e636
1 parent d034cc2
commit 302e636
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 5 deletions.
diff --git a/lib/rules/no-invalid-position-at-import-rule/__tests__/index.js b/lib/rules/no-invalid-position-at-import-rule/__tests__/index.js
@@ -111,3 +111,40 @@ testRule({
 		},
 	],
 });
+
+testRule({
+	ruleName,
+	config: [true],
+	syntax: 'scss',
+
+	accept: [
+		{
+			code: stripIndent`
+				$foo: 1;
+				@import 'bar.css';
+			`,
+			description: 'dollar variable',
+		},
+		{
+			code: stripIndent`
+				// comment
+				@import 'foo.css';
+			`,
+			description: 'double slash comment',
+		},
+	],
+
+	reject: [
+		{
+			code: stripIndent`
+				a {}
+				$foo: 0;
+				@import 'bar.css';
+			`,
+			message: messages.rejected,
+			description: '@import after selector with dollar variable',
+			line: 3,
+			column: 1,
+		},
+	],
+});
diff --git a/lib/rules/no-invalid-position-at-import-rule/index.js b/lib/rules/no-invalid-position-at-import-rule/index.js
@@ -2,6 +2,8 @@
 
 'use strict';
 
+const isStandardSyntaxAtRule = require('../../utils/isStandardSyntaxAtRule');
+const isStandardSyntaxRule = require('../../utils/isStandardSyntaxRule');
 const report = require('../../utils/report');
 const ruleMessages = require('../../utils/ruleMessages');
 const validateOptions = require('../../utils/validateOptions');
@@ -25,7 +27,15 @@ function rule(actual) {
 		root.walk((node) => {
 			const nodeName = node.name && node.name.toLowerCase();
 
-			if (node.type === 'comment' || (node.type === 'atrule' && nodeName === 'charset')) {
+			if (
+				(node.type === 'atrule' &&
+					nodeName !== 'charset' &&
+					nodeName !== 'import' &&
+					isStandardSyntaxAtRule(node)) ||
+				(node.type === 'rule' && isStandardSyntaxRule(node))
+			) {
+				invalidPosition = true;
+
 				return;
 			}
 
@@ -38,11 +48,7 @@ function rule(actual) {
 						ruleName,
 					});
 				}
-
-				return;
 			}
-
-			invalidPosition = true;
 		});
 	};
 }