fix: expand supported types in baseline-data (eslint#74)

* fix type regex

* use non-capturing group

* add mdn-data for css functions

* regenerate baseline data

Author: rviscomi

package.json

@@ -100,6 +100,7 @@
     "got": "^14.4.2",
     "lint-staged": "^15.2.7",
     "mdast-util-from-markdown": "^2.0.2",
+    "mdn-data": "^2.17.0",
     "mocha": "^10.4.0",
     "prettier": "^3.4.1",
     "rollup": "^4.16.2",

src/data/baseline-data.js

@@ -565,60 +565,91 @@ export const types = new Map([
 	["sign", "0:"],
 	["anchor", "0:"],
 	["anchor-size", "0:"],
-	["time", "10:2015"],
+	["inset", "10:2020"],
 	["attr", "10:2015"],
-	["blend-mode", "10:2020"],
-	["line-style", "10:2015"],
 	["calc", "10:2015"],
-	["calc-keyword", "5:2022"],
 	["calc-size", "0:"],
-	["shape", "0:"],
-	["color", "10:2015"],
-	["string", "10:2015"],
+	["rect", "0:"],
+	["color", "5:2024"],
+	["color-mix", "5:2023"],
+	["conic-gradient", "5:2024"],
+	["repeating-conic-gradient", "5:2024"],
 	["counter", "10:2015"],
 	["counters", "10:2015"],
-	["easing-function", "10:2015"],
+	["cross-fade", "0:"],
 	["var", "10:2017"],
+	["element", "0:"],
 	["exp", "5:2023"],
 	["hypot", "5:2023"],
 	["log", "5:2023"],
 	["pow", "5:2023"],
 	["sqrt", "5:2023"],
-	["filter-function", "10:2016"],
-	["url", "10:2015"],
-	["gradient", "10:2015"],
+	["blur", "10:2016"],
+	["brightness", "10:2016"],
+	["contrast", "10:2016"],
+	["drop-shadow", "10:2016"],
+	["grayscale", "10:2016"],
+	["hue-rotate", "10:2016"],
+	["invert", "10:2016"],
+	["opacity", "10:2016"],
+	["saturate", "10:2016"],
+	["sepia", "10:2016"],
+	["linear-gradient", "10:2017"],
+	["radial-gradient", "10:2021"],
+	["repeating-linear-gradient", "10:2017"],
+	["repeating-radial-gradient", "10:2020"],
 	["image", "10:2015"],
-	["flex", "10:2017"],
-	["ratio", "10:2015"],
+	["hsl", "5:2024"],
+	["hwb", "5:2024"],
+	["image-set", "5:2023"],
+	["lab", "5:2024"],
+	["lch", "5:2024"],
+	["light-dark", "5:2024"],
 	["clamp", "10:2020"],
 	["max", "10:2020"],
 	["min", "10:2020"],
 	["ray", "5:2024"],
-	["number", "10:2015"],
-	["overflow", "10:2015"],
-	["resolution", "5:2022"],
-	["mod", "5:2024"],
+	["oklab", "5:2024"],
+	["oklch", "5:2024"],
+	["paint", "0:"],
+	["path", "0:"],
+	["rgb", "10:2015"],
 	["rem", "5:2024"],
+	["mod", "5:2024"],
 	["round", "5:2024"],
 	["env", "10:2020"],
-	["basic-shape", "10:2020"],
-	["text-edge", "0:"],
-	["angle", "10:2015"],
-	["angle-percentage", "10:2015"],
-	["position", "10:2015"],
-	["transform-function", "10:2015"],
+	["circle", "10:2020"],
+	["ellipse", "10:2020"],
+	["polygon", "10:2020"],
+	["xywh", "0:"],
+	["matrix", "10:2015"],
+	["rotate", "10:2015"],
+	["scale", "10:2015"],
+	["scaleX", "10:2015"],
+	["scaleY", "10:2015"],
+	["skew", "10:2015"],
+	["skewX", "10:2015"],
+	["skewY", "10:2015"],
+	["translate", "10:2015"],
+	["translateX", "10:2015"],
+	["translateY", "10:2015"],
+	["matrix3d", "10:2015"],
+	["perspective", "10:2022"],
+	["rotate3d", "10:2015"],
+	["rotateX", "10:2015"],
+	["rotateY", "10:2015"],
+	["rotateZ", "10:2015"],
+	["scale3d", "10:2015"],
+	["scaleZ", "10:2015"],
+	["translate3d", "10:2015"],
+	["translateZ", "10:2015"],
 	["acos", "5:2023"],
 	["asin", "5:2023"],
 	["atan", "5:2023"],
 	["atan2", "5:2023"],
 	["cos", "5:2023"],
 	["sin", "5:2023"],
 	["tan", "5:2023"],
-	["dimension", "10:2015"],
-	["length", "10:2015"],
-	["length-percentage", "10:2015"],
-	["percentage", "10:2015"],
-	["integer", "10:2015"],
 ]);
 export const selectors = new Map([
 	["active-view-transition", "0:"],

tests/rules/require-baseline.test.js

@@ -276,6 +276,22 @@ ruleTester.run("require-baseline", rule, {
 				},
 			],
 		},
+		{
+			code: "a { color: color-mix(in hsl, hsl(200 50 80), coral 80%); }",
+			errors: [
+				{
+					messageId: "notBaselineType",
+					data: {
+						type: "color-mix",
+						availability: "widely",
+					},
+					line: 1,
+					column: 12,
+					endLine: 1,
+					endColumn: 56,
+				},
+			],
+		},
 		{
 			code: "@media (color-gamut: srgb) { a { color: red; } }",
 			errors: [

tools/generate-baseline.js

@@ -11,6 +11,7 @@
 
 import { getStatus as getBaselineStatus } from "compute-baseline";
 import { features as webFeatures } from "web-features";
+import mdnData from "mdn-data";
 import prettier from "prettier";
 import fs from "node:fs";
 
@@ -101,7 +102,8 @@ function extractCSSFeatures(features) {
 	const cssAtRulePattern = /^css\.at-rules\.(?<atRule>[a-zA-Z$\d-]+)$/u;
 	const cssMediaConditionPattern =
 		/^css\.at-rules\.media\.(?<condition>[a-zA-Z$\d-]+)$/u;
-	const cssTypePattern = /^css\.types\.(?<type>[a-zA-Z$\d-]+)$/u;
+	const cssTypePattern =
+		/^css\.types\.(?:.*?\.)?(?<type>[a-zA-Z\d-]+)(?:\.[^.]*$|[^.]*$)/u;
 	const cssSelectorPattern = /^css\.selectors\.(?<selector>[a-zA-Z$\d-]+)$/u;
 
 	const properties = {};
@@ -153,7 +155,11 @@ function extractCSSFeatures(features) {
 
 		// types
 		if ((match = cssTypePattern.exec(key)) !== null) {
-			types[match.groups.type] = mapFeatureStatus(status);
+			const type = match.groups.type;
+			if (!(`${type}()` in mdnData.css.functions)) {
+				continue;
+			}
+			types[type] = mapFeatureStatus(status);
 			continue;
 		}