feat: add allow* options to use-baseline rule (#310)

* feat: add `allow*` options to `use-baseline` rule

* validate `allow*` options against baseline data

Author: thecalamiity

docs/rules/use-baseline.md

@@ -105,7 +105,10 @@ This rule accepts an options object with the following properties:
     - change to `"newly"` to allow features that are at the Baseline newly available stage: features that have been supported on all core browsers for less than 30 months
     - set to a numeric baseline year, such as `2023`, to allow features that became Baseline newly available that year, or earlier
 - `allowAtRules` (default: `[]`) - Specify an array of at-rules that are allowed to be used.
+- `allowFunctions` (default: `[]`) - Specify an array of functions that are allowed to be used.
+- `allowMediaConditions` (default: `[]`) - Specify an array of media conditions inside `@media` that are allowed to be used.
 - `allowProperties` (default: `[]`) - Specify an array of properties that are allowed to be used.
+- `allowPropertyValues` (default: `{}`) - Specify an object mapping properties to an array of allowed identifier values for that property.
 - `allowSelectors` (default: `[]`) - Specify an array of selectors that are allowed to be used.
 
 #### `allowAtRules`
@@ -122,6 +125,32 @@ Examples of **correct** code with `{ allowAtRules: ["container"] }`:
 }
 ```
 
+#### `allowFunctions`
+
+Examples of **correct** code with `{ allowFunctions: ["color-mix"] }`:
+
+```css
+/* eslint css/use-baseline: ["error", { allowFunctions: ["color-mix"] }] */
+
+.selector {
+	color: color-mix(in srgb, plum, #123456);
+}
+```
+
+#### `allowMediaConditions`
+
+Examples of **correct** code with `{ allowMediaConditions: ["scripting"] }`:
+
+```css
+/* eslint css/use-baseline: ["error", { allowMediaConditions: ["scripting"] }] */
+
+@media (scripting: none) {
+	.selector {
+		color: red;
+	}
+}
+```
+
 #### `allowProperties`
 
 Examples of **correct** code with `{ allowProperties: ["user-select"] }`:
@@ -134,6 +163,18 @@ Examples of **correct** code with `{ allowProperties: ["user-select"] }`:
 }
 ```
 
+#### `allowPropertyValues`
+
+Examples of **correct** code with `{ allowPropertyValues: { "clip-path": ["fill-box"] } }`:
+
+```css
+/* eslint css/use-baseline: ["error", { allowPropertyValues: { "clip-path": ["fill-box"] } }] */
+
+.selector {
+	clip-path: fill-box;
+}
+```
+
 #### `allowSelectors`
 
 When you want to allow the [& nesting selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector), you can use `"nesting"`.

src/rules/use-baseline.js

@@ -30,7 +30,10 @@ import { namedColors } from "../data/colors.js";
  * @typedef {[{
  *     available?: "widely" | "newly" | number,
  *     allowAtRules?: string[],
+ *     allowFunctions?: string[],
+ *     allowMediaConditions?: string[],
  *     allowProperties?: string[],
+ *     allowPropertyValues?: { [property: string]: string[] },
  *     allowSelectors?: string[]
  * }]} UseBaselineOptions
  * @typedef {CSSRuleDefinition<{ RuleOptions: UseBaselineOptions, MessageIds: UseBaselineMessageIds }>} UseBaselineRuleDefinition
@@ -436,21 +439,53 @@ export default {
 					allowAtRules: {
 						type: "array",
 						items: {
-							type: "string",
+							enum: Array.from(atRules.keys()),
+						},
+						uniqueItems: true,
+					},
+					allowFunctions: {
+						type: "array",
+						items: {
+							enum: Array.from(functions.keys()),
+						},
+						uniqueItems: true,
+					},
+					allowMediaConditions: {
+						type: "array",
+						items: {
+							enum: Array.from(mediaConditions.keys()),
 						},
 						uniqueItems: true,
 					},
 					allowProperties: {
 						type: "array",
 						items: {
-							type: "string",
+							enum: Array.from(properties.keys()),
 						},
 						uniqueItems: true,
 					},
+					allowPropertyValues: {
+						type: "object",
+						properties: Object.fromEntries(
+							Array.from(propertyValues.entries()).map(
+								([prop, valuesMap]) => [
+									prop,
+									{
+										type: "array",
+										items: {
+											enum: Array.from(valuesMap.keys()),
+										},
+										uniqueItems: true,
+									},
+								],
+							),
+						),
+						additionalProperties: false,
+					},
 					allowSelectors: {
 						type: "array",
 						items: {
-							type: "string",
+							enum: Array.from(selectors.keys()),
 						},
 						uniqueItems: true,
 					},
@@ -463,7 +498,10 @@ export default {
 			{
 				available: "widely",
 				allowAtRules: [],
+				allowFunctions: [],
+				allowMediaConditions: [],
 				allowProperties: [],
+				allowPropertyValues: {},
 				allowSelectors: [],
 			},
 		],
@@ -492,6 +530,16 @@ export default {
 		const allowAtRules = new Set(context.options[0].allowAtRules);
 		const allowProperties = new Set(context.options[0].allowProperties);
 		const allowSelectors = new Set(context.options[0].allowSelectors);
+		const allowFunctions = new Set(context.options[0].allowFunctions);
+		const allowMediaConditions = new Set(
+			context.options[0].allowMediaConditions,
+		);
+		const allowPropertyValuesMap = new Map();
+		for (const [prop, values] of Object.entries(
+			context.options[0].allowPropertyValues,
+		)) {
+			allowPropertyValuesMap.set(prop, new Set(values));
+		}
 
 		/**
 		 * Checks a property value identifier to see if it's a baseline feature.
@@ -504,6 +552,12 @@ export default {
 			if (namedColors.has(child.name)) {
 				return;
 			}
+
+			const allowedValues = allowPropertyValuesMap.get(property);
+			if (allowedValues?.has(child.name)) {
+				return;
+			}
+
 			const possiblePropertyValues = propertyValues.get(property);
 
 			// if we don't know of any possible property values, just skip it
@@ -537,6 +591,10 @@ export default {
 		 * @returns {void}
 		 **/
 		function checkPropertyValueFunction(child) {
+			if (allowFunctions.has(child.name)) {
+				return;
+			}
+
 			const featureStatus = functions.get(child.name);
 
 			// if we don't know of any possible property values, just skip it
@@ -718,6 +776,10 @@ export default {
 						continue;
 					}
 
+					if (allowMediaConditions.has(child.name)) {
+						continue;
+					}
+
 					const featureStatus = mediaConditions.get(child.name);
 
 					if (!baselineAvailability.isSupported(featureStatus)) {

tests/rules/use-baseline.test.js

@@ -123,6 +123,33 @@ ruleTester.run("use-baseline", rule, {
 			code: "a { accent-color: bar; backdrop-filter: auto }",
 			options: [{ allowProperties: ["accent-color", "backdrop-filter"] }],
 		},
+		{
+			code: "a { color: color-mix(in srgb, plum, #123456); }",
+			options: [{ allowFunctions: ["color-mix"] }],
+		},
+		{
+			code: "@media (scripting: none) { a { color: red; } }",
+			options: [{ allowMediaConditions: ["scripting"] }],
+		},
+		{
+			code: "a { clip-path: fill-box; }",
+			options: [{ allowPropertyValues: { "clip-path": ["fill-box"] } }],
+		},
+		{
+			code: ".a { clip-path: fill-box; }\n.b { clip-path: stroke-box; }\n.c { max-height: stretch; }",
+			options: [
+				{
+					allowPropertyValues: {
+						"clip-path": ["fill-box", "stroke-box"],
+						"max-height": ["stretch"],
+					},
+				},
+			],
+		},
+		{
+			code: "@supports (clip-path: fill-box) { .a { clip-path: fill-box; }\n.b { clip-path: stroke-box; } }",
+			options: [{ allowPropertyValues: { "clip-path": ["stroke-box"] } }],
+		},
 	],
 	invalid: [
 		{
@@ -604,5 +631,87 @@ ruleTester.run("use-baseline", rule, {
 				},
 			],
 		},
+		{
+			code: "a { width: abs(20% - 100px); }",
+			options: [{ allowFunctions: ["color-mix"] }],
+			errors: [
+				{
+					messageId: "notBaselineFunction",
+					data: {
+						function: "abs",
+						availability: "widely",
+					},
+					line: 1,
+					column: 12,
+					endLine: 1,
+					endColumn: 28,
+				},
+			],
+		},
+		{
+			code: "@media (inverted-colors: inverted) { a { color: red; } }",
+			options: [{ allowMediaConditions: ["scripting"] }],
+			errors: [
+				{
+					messageId: "notBaselineMediaCondition",
+					data: {
+						condition: "inverted-colors",
+						availability: "widely",
+					},
+					line: 1,
+					column: 9,
+					endLine: 1,
+					endColumn: 24,
+				},
+			],
+		},
+		{
+			code: "@supports (clip-path: fill-box) { a { clip-path: stroke-box; } }",
+			options: [{ allowPropertyValues: { "clip-path": ["fill-box"] } }],
+			errors: [
+				{
+					messageId: "notBaselinePropertyValue",
+					data: {
+						property: "clip-path",
+						value: "stroke-box",
+						availability: "widely",
+					},
+					line: 1,
+					column: 50,
+					endLine: 1,
+					endColumn: 60,
+				},
+			],
+		},
+		{
+			code: ".a { clip-path: fill-box; }\n.b { clip-path: stroke-box; }\n.c { max-height: stretch; }",
+			options: [{ allowPropertyValues: { "clip-path": ["fill-box"] } }],
+			errors: [
+				{
+					messageId: "notBaselinePropertyValue",
+					data: {
+						property: "clip-path",
+						value: "stroke-box",
+						availability: "widely",
+					},
+					line: 2,
+					column: 17,
+					endLine: 2,
+					endColumn: 27,
+				},
+				{
+					messageId: "notBaselinePropertyValue",
+					data: {
+						property: "max-height",
+						value: "stretch",
+						availability: "widely",
+					},
+					line: 3,
+					column: 18,
+					endLine: 3,
+					endColumn: 25,
+				},
+			],
+		},
 	],
 });