fix: expand supported types in baseline-data

package.json

@@ -101,6 +101,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

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

tests/rules/require-baseline.test.js

@@ -267,6 +267,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

@@ -10,6 +10,7 @@
 //------------------------------------------------------------------------------
 
 import { features as webFeatures } from "web-features";
+import mdnData from "mdn-data";
 import prettier from "prettier";
 import fs from "node:fs";
 
@@ -74,7 +75,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 = {};
@@ -125,7 +127,11 @@ function extractCSSFeatures(features) {
 
 		// types
 		if ((match = cssTypePattern.exec(key)) !== null) {
-			types[match.groups.type] = baselineIds.get(baseline);
+			const type = match.groups.type;
+			if (!(`${type}()` in mdnData.css.functions)) {
+				continue;
+			}
+			types[type] = baselineIds.get(baseline);
 			continue;
 		}