Fix invalid option warnings for strings in *-list (#5934)

lib/rules/at-rule-property-required-list/README.md

@@ -11,7 +11,7 @@ Specify a list of required properties for an at-rule.
 
 ## Options
 
-`object`: `{ "at-rule-name": ["array", "of", "properties"] }`
+`object`: `{ "at-rule-name": ["array", "of", "properties"]|"property" }`
 
 Given:
 

lib/rules/at-rule-property-required-list/__tests__/index.js

@@ -6,7 +6,7 @@ testRule({
 	ruleName,
 	config: {
 		'font-face': ['font-display', 'font-family'],
-		page: ['margin'],
+		page: 'margin',
 	},
 
 	accept: [

lib/rules/at-rule-property-required-list/index.js

@@ -1,5 +1,6 @@
 'use strict';
 
+const flattenArray = require('../../utils/flattenArray');
 const isStandardSyntaxAtRule = require('../../utils/isStandardSyntaxAtRule');
 const report = require('../../utils/report');
 const ruleMessages = require('../../utils/ruleMessages');
@@ -17,7 +18,7 @@ const meta = {
 	url: 'https://stylelint.io/user-guide/rules/list/at-rule-property-required-list',
 };
 
-/** @type {import('stylelint').Rule<Record<string, string[]>>} */
+/** @type {import('stylelint').Rule<Record<string, string | string[]>>} */
 const rule = (primary) => {
 	return (root, result) => {
 		const validOptions = validateOptions(result, ruleName, {
@@ -36,12 +37,13 @@ const rule = (primary) => {
 
 			const { name, nodes } = atRule;
 			const atRuleName = name.toLowerCase();
+			const propList = flattenArray(primary[atRuleName]);
 
-			if (!primary[atRuleName]) {
+			if (!propList) {
 				return;
 			}
 
-			for (const property of primary[atRuleName]) {
+			for (const property of propList) {
 				const propertyName = property.toLowerCase();
 
 				const hasProperty = nodes.find(

lib/rules/declaration-property-unit-allowed-list/README.md

@@ -11,7 +11,7 @@ a { width: 100px; }
 
 ## Options
 
-`object`: `{ "unprefixed-property-name": ["array", "of", "units"] }`
+`object`: `{ "unprefixed-property-name": ["array", "of", "units"]|"unit" }`
 
 If a property name is surrounded with `"/"` (e.g. `"/^animation/"`), it is interpreted as a regular expression. This allows, for example, easy targeting of shorthands: `/^animation/` will match `animation`, `animation-duration`, `animation-timing-function`, etc.
 
@@ -20,7 +20,7 @@ Given:
 ```json
 {
   "font-size": ["em", "px"],
-  "/^animation/": ["s"],
+  "/^animation/": "s",
   "line-height": []
 }
 ```

lib/rules/declaration-property-unit-allowed-list/__tests__/index.js

@@ -8,7 +8,7 @@ testRule({
 	config: [
 		{
 			'font-size': ['px', 'em'],
-			margin: ['em'],
+			margin: 'em',
 			'background-position': ['%'],
 			animation: ['s'],
 			'line-height': [],

lib/rules/declaration-property-unit-allowed-list/index.js

@@ -3,6 +3,7 @@
 const valueParser = require('postcss-value-parser');
 
 const declarationValueIndex = require('../../utils/declarationValueIndex');
+const flattenArray = require('../../utils/flattenArray');
 const getUnitFromValueNode = require('../../utils/getUnitFromValueNode');
 const matchesStringOrRegExp = require('../../utils/matchesStringOrRegExp');
 const optionsMatches = require('../../utils/optionsMatches');
@@ -23,7 +24,7 @@ const meta = {
 	url: 'https://stylelint.io/user-guide/rules/list/declaration-property-unit-allowed-list',
 };
 
-/** @type {import('stylelint').Rule<Record<string, string[]>>} */
+/** @type {import('stylelint').Rule<Record<string, string | string[]>>} */
 const rule = (primary, secondaryOptions) => {
 	return (root, result) => {
 		const validOptions = validateOptions(
@@ -60,7 +61,7 @@ const rule = (primary, secondaryOptions) => {
 				return;
 			}
 
-			const propList = primary[propKey];
+			const propList = flattenArray(primary[propKey]);
 
 			if (!propList) {
 				return;
@@ -84,7 +85,7 @@ const rule = (primary, secondaryOptions) => {
 
 				const unit = getUnitFromValueNode(node);
 
-				if (!unit || (unit && propList.indexOf(unit.toLowerCase())) !== -1) {
+				if (!unit || (unit && propList.includes(unit.toLowerCase()))) {
 					return;
 				}
 

lib/rules/declaration-property-unit-disallowed-list/README.md

@@ -11,7 +11,7 @@ a { width: 100px; }
 
 ## Options
 
-`object`: `{ "unprefixed-property-name": ["array", "of", "units"] }`
+`object`: `{ "unprefixed-property-name": ["array", "of", "units"]|"unit" }`
 
 If a property name is surrounded with `"/"` (e.g. `"/^animation/"`), it is interpreted as a regular expression. This allows, for example, easy targeting of shorthands: `/^animation/` will match `animation`, `animation-duration`, `animation-timing-function`, etc.
 
@@ -20,7 +20,7 @@ Given:
 ```json
 {
   "font-size": ["em", "px"],
-  "/^animation/": ["s"]
+  "/^animation/": "s"
 }
 ```
 

lib/rules/declaration-property-unit-disallowed-list/__tests__/index.js

@@ -8,7 +8,7 @@ testRule({
 	config: [
 		{
 			'font-size': ['px', 'em'],
-			margin: ['em'],
+			margin: 'em',
 			'background-position': ['%'],
 			animation: ['s'],
 		},

lib/rules/declaration-property-unit-disallowed-list/index.js

@@ -3,6 +3,7 @@
 const valueParser = require('postcss-value-parser');
 
 const declarationValueIndex = require('../../utils/declarationValueIndex');
+const flattenArray = require('../../utils/flattenArray');
 const getUnitFromValueNode = require('../../utils/getUnitFromValueNode');
 const matchesStringOrRegExp = require('../../utils/matchesStringOrRegExp');
 const report = require('../../utils/report');
@@ -22,7 +23,7 @@ const meta = {
 	url: 'https://stylelint.io/user-guide/rules/list/declaration-property-unit-disallowed-list',
 };
 
-/** @type {import('stylelint').Rule<Record<string, string[]>>} */
+/** @type {import('stylelint').Rule<Record<string, string | string[]>>} */
 const rule = (primary) => {
 	return (root, result) => {
 		const validOptions = validateOptions(result, ruleName, {
@@ -48,7 +49,7 @@ const rule = (primary) => {
 				return;
 			}
 
-			const propList = primary[propKey];
+			const propList = flattenArray(primary[propKey]);
 
 			if (!propList) {
 				return;

lib/rules/declaration-property-value-allowed-list/README.md

@@ -11,7 +11,7 @@ a { text-transform: uppercase; }
 
 ## Options
 
-`object`: `{ "unprefixed-property-name": ["array", "of", "values"], "unprefixed-property-name": ["/regex/", "non-regex", /regex/] }`
+`object`: `{ "unprefixed-property-name": ["array", "of", "values", "/regex/", /regex/]|"value"|"/regex/"|/regex/ }`
 
 If a property name is found in the object, only the listed property values are allowed. This rule complains about all non-matching values. (If the property name is not included in the object, anything goes.)
 
@@ -26,7 +26,7 @@ Given:
 ```json
 {
   "transform": ["/scale/"],
-  "whitespace": ["nowrap"],
+  "whitespace": "nowrap",
   "/color/": ["/^green/"]
 }
 ```

lib/rules/declaration-property-value-allowed-list/__tests__/index.js

@@ -8,7 +8,7 @@ testRule({
 	config: [
 		{
 			transform: ['/scale/'],
-			whitespace: ['nowrap'],
+			whitespace: 'nowrap',
 			'/color/': ['/^green/'],
 		},
 	],

lib/rules/declaration-property-value-allowed-list/index.js

@@ -20,12 +20,12 @@ const meta = {
 	url: 'https://stylelint.io/user-guide/rules/list/declaration-property-value-allowed-list',
 };
 
-/** @type {import('stylelint').Rule<Record<string, (string | RegExp)[]>>} */
+/** @type {import('stylelint').Rule<Record<string, string | RegExp | Array<string | RegExp>>>} */
 const rule = (primary) => {
 	return (root, result) => {
 		const validOptions = validateOptions(result, ruleName, {
 			actual: primary,
-			possible: [validateObjectWithArrayProps([isString, isRegExp])],
+			possible: [validateObjectWithArrayProps(isString, isRegExp)],
 		});
 
 		if (!validOptions) {

lib/rules/declaration-property-value-disallowed-list/README.md

@@ -11,7 +11,7 @@ a { text-transform: uppercase; }
 
 ## Options
 
-`object`: `{ "unprefixed-property-name": ["array", "of", "values"], "unprefixed-property-name": ["/regex/", "non-regex", /regex/] }`
+`object`: `{ "unprefixed-property-name": ["array", "of", "values", "/regex/", /regex/]|"value"|"/regex/"|/regex/ }`
 
 If a property name is surrounded with `"/"` (e.g. `"/^animation/"`), it is interpreted as a regular expression. This allows, for example, easy targeting of shorthands: `/^animation/` will match `animation`, `animation-duration`, `animation-timing-function`, etc.
 
@@ -24,7 +24,7 @@ Given:
 ```json
 {
   "transform": ["/scale3d/", "/rotate3d/", "/translate3d/"],
-  "position": ["fixed"],
+  "position": "fixed",
   "color": ["/^green/"],
   "/^animation/": ["/ease/"]
 }

lib/rules/declaration-property-value-disallowed-list/__tests__/index.js

@@ -8,7 +8,7 @@ testRule({
 	config: [
 		{
 			// regular string
-			'text-transform': ['uppercase'],
+			'text-transform': 'uppercase',
 			// regexes
 			transform: ['/scale3d/', '/rotate3d/', '/translate3d/'],
 			// mixed string and regex

lib/rules/declaration-property-value-disallowed-list/index.js

@@ -20,12 +20,12 @@ const meta = {
 	url: 'https://stylelint.io/user-guide/rules/list/declaration-property-value-disallowed-list',
 };
 
-/** @type {import('stylelint').Rule<Record<string, (string | RegExp)[]>>} */
+/** @type {import('stylelint').Rule<Record<string, string | RegExp | Array<string | RegExp>>>} */
 const rule = (primary) => {
 	return (root, result) => {
 		const validOptions = validateOptions(result, ruleName, {
 			actual: primary,
-			possible: [validateObjectWithArrayProps([isString, isRegExp])],
+			possible: [validateObjectWithArrayProps(isString, isRegExp)],
 		});
 
 		if (!validOptions) {

lib/rules/media-feature-name-value-allowed-list/README.md

@@ -11,26 +11,20 @@ Specify a list of allowed media feature name and value pairs.
 
 ## Options
 
-```js
-{
-  "unprefixed-media-feature-name": ["array", "of", "values"],
-  "/unprefixed-media-feature-name/": ["/regex/", "non-regex", /real-regex/]
-}
-```
+`object`: `{ "unprefixed-media-feature-name": ["array", "of", "values", "/regex/", /regex/]|"value"|"/regex/"|/regex/ }`
 
 If a media feature name is found in the object, only its allowed-listed values are
 allowed. If the media feature name is not included in the object, anything goes.
 
 If a name or value is surrounded with `/` (e.g. `"/width$/"`), it is interpreted
-as a regular expression. For example, `/width$/` will match `max-width` and
-`min-width`.
+as a regular expression. For example, `/width$/` will match `max-width` and `min-width`.
 
 Given:
 
 ```json
 {
   "min-width": ["768px", "1024px"],
-  "/resolution/": ["/dpcm$/"]
+  "/resolution/": "/dpcm$/"
 }
 ```
 

lib/rules/media-feature-name-value-allowed-list/__tests__/index.js

@@ -7,7 +7,7 @@ testRule({
 	config: [
 		{
 			'min-width': ['768px', '$sm'],
-			'/resolution/': ['/dpcm$/'], // Only dpcm unit
+			'/resolution/': '/dpcm$/', // Only dpcm unit
 			color: [], // Test boolean context
 			width: [], // Test range context
 		},

lib/rules/media-feature-name-value-allowed-list/index.js

@@ -24,12 +24,12 @@ const meta = {
 	url: 'https://stylelint.io/user-guide/rules/list/media-feature-name-value-allowed-list',
 };
 
-/** @type {import('stylelint').Rule<Record<string, Array<string | RegExp>>>} */
+/** @type {import('stylelint').Rule<Record<string, string | RegExp | Array<string | RegExp>>>} */
 const rule = (primary) => {
 	return (root, result) => {
 		const validOptions = validateOptions(result, ruleName, {
 			actual: primary,
-			possible: [validateObjectWithArrayProps([isString, isRegExp])],
+			possible: [validateObjectWithArrayProps(isString, isRegExp)],
 		});
 
 		if (!validOptions) {

lib/rules/rule-selector-property-disallowed-list/README.md

@@ -11,7 +11,7 @@ Specify a list of disallowed properties for selectors within rules.
 
 ## Options
 
-`object`: `{ "selector": ["array", "of", "properties"]`
+`object`: `{ "selector": ["array", "of", "properties", "/regex/", /regex/]|"property"|"/regex/"|/regex/`
 
 If a selector name is surrounded with `"/"` (e.g. `"/anchor/"`), it is interpreted as a regular expression. This allows, for example, easy targeting of all the potential anchors: `/anchor/` will match `.anchor`, `[data-anchor]`, etc.
 
@@ -22,7 +22,7 @@ Given:
 ```json
 {
   "a": ["color", "/margin/"],
-  "/foo/": ["/size/"]
+  "/foo/": "/size/"
 }
 ```
 

lib/rules/rule-selector-property-disallowed-list/__tests__/index.js

@@ -6,7 +6,7 @@ testRule({
 	ruleName,
 	config: {
 		a: ['color', '/margin/'],
-		'/foo/': ['/size/'],
+		'/foo/': '/size/',
 	},
 
 	accept: [

lib/rules/rule-selector-property-disallowed-list/index.js

@@ -18,12 +18,12 @@ const meta = {
 	url: 'https://stylelint.io/user-guide/rules/list/rule-selector-property-disallowed-list',
 };
 
-/** @type {import('stylelint').Rule<Record<string, Array<string | RegExp>>>} */
+/** @type {import('stylelint').Rule<Record<string, string | RegExp | Array<string | RegExp>>>} */
 const rule = (primary) => {
 	return (root, result) => {
 		const validOptions = validateOptions(result, ruleName, {
 			actual: primary,
-			possible: [validateObjectWithArrayProps([isString, isRegExp])],
+			possible: [validateObjectWithArrayProps(isString, isRegExp)],
 		});
 
 		if (!validOptions) {

lib/rules/unit-allowed-list/README.md

@@ -65,7 +65,7 @@ a { transform: rotate(30deg); }
 
 ## Optional secondary options
 
-### `ignoreProperties: { unit: ["property", "/regex/", /regex/] }`
+### `ignoreProperties: { "unit": ["property", "/regex/", /regex/]|"property"|"/regex/"|/regex/ }`
 
 Ignore units in the values of declarations with the specified properties.
 
@@ -114,7 +114,7 @@ a { -moz-border-radius-topright: 20rem; }
 a { height: 100%; }
 ```
 
-### `ignoreFunctions: ["/regex/", /regex/, "string"]`
+### `ignoreFunctions: ["function", "/regex/", /regex/]|"function"|"/regex/"|/regex/`
 
 Ignore units that are inside of the specified functions.