Fix false positives for namespaced variables in property-no-unknown (#…

…4803)
stylelint · Jun 9, 2020 · 80f3fab · 80f3fab
1 parent 038daf4
commit 80f3fab
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 4 deletions.
diff --git a/lib/rules/property-no-unknown/__tests__/index.js b/lib/rules/property-no-unknown/__tests__/index.js
@@ -86,6 +86,10 @@ testRule({
 			code: '.foo { $bgColor: white; }',
 			description: 'ignore SCSS variables',
 		},
+		{
+			code: '.foo { namespace.$bgColor: white; }',
+			description: 'ignore SCSS variables within namespace',
+		},
 		{
 			code: '.foo { #{$prop}: black; }',
 			description: 'ignore property interpolation',

diff --git a/lib/utils/__tests__/isScssVariable.test.js b/lib/utils/__tests__/isScssVariable.test.js
@@ -0,0 +1,36 @@
+'use strict';
+
+const isScssVariable = require('../isScssVariable');
+
+describe('isScssVariable', () => {
+	it('sass variable', () => {
+		expect(isScssVariable('$sass-variable')).toBeTruthy();
+	});
+	it('sass variable within namespace', () => {
+		expect(isScssVariable('namespace.$sass-variable')).toBeTruthy();
+	});
+	it('sass interpolation', () => {
+		expect(isScssVariable('#{$Attr}-color')).toBeFalsy();
+	});
+	it('single word property', () => {
+		expect(isScssVariable('top')).toBeFalsy();
+	});
+	it('hyphenated property', () => {
+		expect(isScssVariable('border-top-left-radius')).toBeFalsy();
+	});
+	it('property with vendor prefix', () => {
+		expect(isScssVariable('-webkit-appearance')).toBeFalsy();
+	});
+	it('custom property', () => {
+		expect(isScssVariable('--custom-property')).toBeFalsy();
+	});
+	it('less variable', () => {
+		expect(isScssVariable('@var')).toBeFalsy();
+	});
+	it('less append property value with comma', () => {
+		expect(isScssVariable('transform+')).toBeFalsy();
+	});
+	it('less append property value with space', () => {
+		expect(isScssVariable('transform+_')).toBeFalsy();
+	});
+});
diff --git a/lib/utils/__tests__/isStandardSyntaxDeclaration.test.js b/lib/utils/__tests__/isStandardSyntaxDeclaration.test.js
@@ -121,6 +121,18 @@ describe('isStandardSyntaxDeclaration', () => {
 		});
 	});
 
+	it('scss var within namespace', () => {
+		scssDecls('namespace.$var: b', (decl) => {
+			expect(isStandardSyntaxDeclaration(decl)).toBeFalsy();
+		});
+	});
+
+	it('nested scss var within namespace', () => {
+		scssDecls('a { namespace.$var: b }', (decl) => {
+			expect(isStandardSyntaxDeclaration(decl)).toBeFalsy();
+		});
+	});
+
 	it('sass list', () => {
 		sassDecls('$list: (key: value, key2: value2)', (decl) => {
 			expect(isStandardSyntaxDeclaration(decl)).toBeFalsy();

diff --git a/lib/utils/__tests__/isStandardSyntaxProperty.test.js b/lib/utils/__tests__/isStandardSyntaxProperty.test.js
@@ -18,6 +18,9 @@ describe('isStandardSyntaxProperty', () => {
 	it('sass variable', () => {
 		expect(isStandardSyntaxProperty('$sass-variable')).toBeFalsy();
 	});
+	it('sass variable within namespace', () => {
+		expect(isStandardSyntaxProperty('namespace.$sass-variable')).toBeFalsy();
+	});
 	it('sass interpolation', () => {
 		expect(isStandardSyntaxProperty('#{$Attr}-color')).toBeFalsy();
 	});

diff --git a/lib/utils/isScssVariable.js b/lib/utils/isScssVariable.js
@@ -0,0 +1,21 @@
+'use strict';
+
+/**
+ * Check whether a property is SCSS variable
+ *
+ * @param {string} property
+ * @returns {boolean}
+ */
+module.exports = function (property) {
+	// SCSS var (e.g. $var: x), list (e.g. $list: (x)) or map (e.g. $map: (key:value))
+	if (property.startsWith('$')) {
+		return true;
+	}
+
+	// SCSS var within a namespace (e.g. namespace.$var: x)
+	if (property.includes('.$')) {
+		return true;
+	}
+
+	return false;
+};
diff --git a/lib/utils/isStandardSyntaxDeclaration.js b/lib/utils/isStandardSyntaxDeclaration.js
@@ -1,5 +1,6 @@
 'use strict';
 
+const isScssVariable = require('./isScssVariable');
 const { isRoot } = require('./typeGuards');
 
 /**
@@ -29,8 +30,8 @@ module.exports = function (decl) {
 		return false;
 	}
 
-	// Sass var (e.g. $var: x), nested list (e.g. $list: (x)) or nested map (e.g. $map: (key:value))
-	if (prop[0] === '$') {
+	// SCSS var
+	if (isScssVariable(prop)) {
 		return false;
 	}
 

diff --git a/lib/utils/isStandardSyntaxProperty.js b/lib/utils/isStandardSyntaxProperty.js
@@ -1,6 +1,7 @@
 'use strict';
 
 const hasInterpolation = require('../utils/hasInterpolation');
+const isScssVariable = require('./isScssVariable');
 
 /**
  * Check whether a property is standard
@@ -9,8 +10,8 @@ const hasInterpolation = require('../utils/hasInterpolation');
  * @returns {boolean}
  */
 module.exports = function (property) {
-	// SCSS var (e.g. $var: x), list (e.g. $list: (x)) or map (e.g. $map: (key:value))
-	if (property.startsWith('$')) {
+	// SCSS var
+	if (isScssVariable(property)) {
 		return false;
 	}