Repository: eslint/css (js)

Issue:
Bug: generate-baseline misses many functions
### Environment

Node version: v20.0.0
npm version: v9.6.4
Local ESLint version: v9.21.0 (Currently used)
Global ESLint version: Not found
@eslint/css version: 0.4.0
Operating System: darwin 23.6.0

### Which language are you using?

stylesheet

### What did you do?

<details>
<summary>Configuration</summary>

```
import globals from "globals";
import css from "@eslint/css";


/** @type {import('eslint').Linter.Config[]} */
export default [
  {
    languageOptions: {
      globals: globals.browser
    }
  },
  {
    files: ["**/*.css"],
    plugins: {
      css,
    },
    language: "css/css",
    rules: {
      "css/require-baseline": ["warn", {
        "available": "widely"
      }],
    },
  },
];
```
</details>

```css
/** src/functions.css */
a {
  background: color-mix(in srgb, lightblue, white 80%);
}

div {
  background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg);
}
```

```sh
npx eslint src/functions.css
```

### What did you expect to happen?

ESLint should warn when Baseline newly available features like `color-mix` and `conic-gradient` are used.

I'd also expect the `types` map within [baseline-data.js](https://github.com/eslint/css/blob/9c7fd6aa06b62c70d979ff5f7b9c06a95fdeed56/src/data/baseline-data.js#L560) to include entries for functions like `color-mix` and `conic-gradient`.

There is a related [`color`](https://github.com/eslint/css/blob/9c7fd6aa06b62c70d979ff5f7b9c06a95fdeed56/src/data/baseline-data.js#L573) entry, but its Baseline status should be Newly available (5) according to [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color).

### What actually happened?

ESLint doesn't emit any warnings for these newly available features, despite the config being set to widely available.

`color-mix` and `conic-gradient` aren't listed in the `types` map, and `color` has a Baseline status of Widely available (10).

### Link to Minimal Reproducible Example

https://github.com/rviscomi/baseline-demos/blob/main/eslint/src/functions.css

### Participation

- [x] I am willing to submit a pull request for this issue.

### Additional comments

The `cssTypePattern` regex seems to be responsible for this:

https://github.com/eslint/css/blob/9c7fd6aa06b62c70d979ff5f7b9c06a95fdeed56/tools/generate-baseline.js#L77

Pull request description:
fix: expand supported types in baseline-data
<!--
    Thank you for contributing!

    ESLint adheres to the [OpenJS Foundation Code of Conduct](https://eslint.org/conduct).
-->

#### Prerequisites checklist

- [x] I have read the [contributing guidelines](https://github.com/eslint/eslint/blob/HEAD/CONTRIBUTING.md).

<!--
    Please ensure your pull request is ready:

    - Read the pull request guide (https://eslint.org/docs/latest/contribute/pull-requests)
    - Update or create tests
    - If performance-related, include a benchmark
    - Update documentation for this change (if appropriate)
-->

<!--
    The following is required for all pull requests:
-->

#### What is the purpose of this pull request?

Expand support for more CSS "types" like `color-mix`, `conic-gradient`, and ~100 more

#### What changes did you make? (Give an overview)

- adjusted the `cssTypePattern` regex
- added a test for `color-mix`

#### Related Issues

fixes #72 

#### Is there anything you'd like reviewers to focus on?

<!-- markdownlint-disable-file MD004 -->


Patch:
diff --git a/package.json b/package.json
index b4a54e2..530f241 100644
--- a/package.json
+++ b/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",
diff --git a/src/data/baseline-data.js b/src/data/baseline-data.js
index 9614de6..e5cd49d 100644
--- a/src/data/baseline-data.js
+++ b/src/data/baseline-data.js
@@ -565,48 +565,84 @@ 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"],
@@ -614,11 +650,6 @@ export const types = new Map([
 	["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:"],
diff --git a/tools/generate-baseline.js b/tools/generate-baseline.js
index dda0168..e8d45f1 100644
--- a/tools/generate-baseline.js
+++ b/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;
 		}
 


Test patch:
diff --git a/tests/rules/require-baseline.test.js b/tests/rules/require-baseline.test.js
index 0723904..e94137f 100644
--- a/tests/rules/require-baseline.test.js
+++ b/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: [