diff --git a/package.json b/package.json index 9ee84c4..b591b0c 100644 --- a/package.json +++ b/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", diff --git a/src/data/baseline-data.js b/src/data/baseline-data.js index 6a43751..fcd13b6 100644 --- a/src/data/baseline-data.js +++ b/src/data/baseline-data.js @@ -562,45 +562,82 @@ 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], @@ -608,11 +645,6 @@ export const types = new Map([ ["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], diff --git a/tests/rules/require-baseline.test.js b/tests/rules/require-baseline.test.js index b08358f..5205be6 100644 --- a/tests/rules/require-baseline.test.js +++ b/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: [ diff --git a/tools/generate-baseline.js b/tools/generate-baseline.js index e5b42bc..047bd81 100644 --- a/tools/generate-baseline.js +++ b/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\.(?[a-zA-Z$\d-]+)$/u; const cssMediaConditionPattern = /^css\.at-rules\.media\.(?[a-zA-Z$\d-]+)$/u; - const cssTypePattern = /^css\.types\.(?[a-zA-Z$\d-]+)$/u; + const cssTypePattern = + /^css\.types\.(?:.*?\.)?(?[a-zA-Z\d-]+)(?:\.[^.]*$|[^.]*$)/u; const cssSelectorPattern = /^css\.selectors\.(?[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; }