Add support for vendor prefixes in property-*-list (#6025)

* Handle prefixed properties for property-disallow-list * Fix type declaration for input parameter in matchesStringOrRegExp * Handle property-allowed-list for prefixes * Add new test cases for property-(dis)allowed-list * Remove unprefixed notice from readme for property-(dis)allowed-list
stylelint · Apr 20, 2022 · 65b5652 · 65b5652
1 parent b013ac0
commit 65b5652
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 5 deletions.
diff --git a/lib/rules/property-allowed-list/README.md b/lib/rules/property-allowed-list/README.md
@@ -13,7 +13,7 @@ This rule ignores variables (`$sass`, `@less`, `--custom-property`).
 
 ## Options
 
-`array|string|regex`: `["array", "of", "unprefixed", /properties/, "regex"]|"property"|"/regex/"|/regex/`
+`array|string|regex`: `["array", "of", /properties/, "regex"]|"property"|"/regex/"|/regex/`
 
 If a string is surrounded with `"/"` (e.g. `"/^background/"`), it is interpreted as a regular expression. This allows, for example, easy targeting of shorthands: `/^background/` will match `background`, `background-size`, `background-color`, etc.
 

diff --git a/lib/rules/property-allowed-list/__tests__/index.js b/lib/rules/property-allowed-list/__tests__/index.js
@@ -166,3 +166,39 @@ testRule({
 		},
 	],
 });
+
+testRule({
+	ruleName,
+
+	config: ['-webkit-text-stroke'],
+
+	accept: [
+		{
+			code: 'a { -webkit-text-stroke: 2px red; }',
+		},
+	],
+
+	reject: [
+		{
+			code: 'a { text-stroke: 2px red; }',
+			message: messages.rejected('text-stroke'),
+			line: 1,
+			column: 5,
+		},
+	],
+});
+
+testRule({
+	ruleName,
+
+	config: ['text-stroke'],
+
+	accept: [
+		{
+			code: 'a { -webkit-text-stroke: 2px red; }',
+		},
+		{
+			code: 'a { text-stroke: 2px red; }',
+		},
+	],
+});
diff --git a/lib/rules/property-allowed-list/index.js b/lib/rules/property-allowed-list/index.js
@@ -42,7 +42,8 @@ const rule = (primary) => {
 				return;
 			}
 
-			if (matchesStringOrRegExp(vendor.unprefixed(prop), primary)) {
+			// either the prefix or unprefixed version is in the list
+			if (matchesStringOrRegExp([prop, vendor.unprefixed(prop)], primary)) {
 				return;
 			}
 

diff --git a/lib/rules/property-disallowed-list/README.md b/lib/rules/property-disallowed-list/README.md
@@ -11,7 +11,7 @@ a { text-rendering: optimizeLegibility; }
 
 ## Options
 
-`array|string|regex`: `["array", "of", "unprefixed", /properties/, "regex"]|"property"|"/regex/"|/regex/`
+`array|string|regex`: `["array", "of", /properties/, "regex"]|"property"|"/regex/"|/regex/`
 
 If a string is surrounded with `"/"` (e.g. `"/^background/"`), it is interpreted as a regular expression. This allows, for example, easy targeting of shorthands: `/^background/` will match `background`, `background-size`, `background-color`, etc.
 

diff --git a/lib/rules/property-disallowed-list/__tests__/index.js b/lib/rules/property-disallowed-list/__tests__/index.js
@@ -157,3 +157,45 @@ testRule({
 		},
 	],
 });
+
+testRule({
+	ruleName,
+
+	config: ['-webkit-text-stroke'],
+
+	accept: [
+		{
+			code: 'a { text-stroke: 2px red; }',
+		},
+	],
+
+	reject: [
+		{
+			code: 'a { -webkit-text-stroke: 2px red; }',
+			message: messages.rejected('-webkit-text-stroke'),
+			line: 1,
+			column: 5,
+		},
+	],
+});
+
+testRule({
+	ruleName,
+
+	config: ['text-stroke'],
+
+	reject: [
+		{
+			code: 'a { -webkit-text-stroke: 2px red; }',
+			message: messages.rejected('-webkit-text-stroke'),
+			line: 1,
+			column: 5,
+		},
+		{
+			code: 'a { text-stroke: 2px red; }',
+			message: messages.rejected('text-stroke'),
+			line: 1,
+			column: 5,
+		},
+	],
+});
diff --git a/lib/rules/property-disallowed-list/index.js b/lib/rules/property-disallowed-list/index.js
@@ -42,7 +42,8 @@ const rule = (primary) => {
 				return;
 			}
 
-			if (!matchesStringOrRegExp(vendor.unprefixed(prop), primary)) {
+			// either the prefix or unprefixed version is in the list
+			if (!matchesStringOrRegExp([prop, vendor.unprefixed(prop)], primary)) {
 				return;
 			}
 

diff --git a/lib/utils/matchesStringOrRegExp.js b/lib/utils/matchesStringOrRegExp.js
@@ -8,7 +8,7 @@
  * Any strings starting and ending with `/` are interpreted
  * as regular expressions.
  *
- * @param {string} input
+ * @param {string | Array<string>} input
  * @param {string | RegExp | Array<string | RegExp>} comparison
  *
  * @returns {false | {match: string, pattern: (string | RegExp), substring: string}}