From 1d66ae51383aef42932966b199e7cb0fbf9f3121 Mon Sep 17 00:00:00 2001 From: Rick Viscomi Date: Tue, 25 Feb 2025 21:15:05 -0500 Subject: [PATCH 1/3] fix type regex --- src/data/baseline-data.js | 128 +++++++++++++++++++++++++-- tests/rules/require-baseline.test.js | 16 ++++ tools/generate-baseline.js | 3 +- 3 files changed, 140 insertions(+), 7 deletions(-) diff --git a/src/data/baseline-data.js b/src/data/baseline-data.js index 6a43751..0283b51 100644 --- a/src/data/baseline-data.js +++ b/src/data/baseline-data.js @@ -562,45 +562,153 @@ export const types = new Map([ ["sign", 0], ["anchor", 0], ["anchor-size", 0], + ["inset", 10], ["time", 10], + ["fallback", 0], + ["type-or-unit", 0], ["attr", 10], ["blend-mode", 10], ["line-style", 10], ["calc", 10], + ["gradient", 10], + ["nested", 10], + ["number", 10], ["calc-keyword", 5], + ["NaN", 5], + ["e", 5], + ["infinity", 5], + ["pi", 5], ["calc-size", 0], - ["shape", 0], - ["color", 10], + ["cap", 0], + ["revert-layer", 10], + ["ch", 10], + ["shape", 10], + ["rect", 10], + ["color", 5], + ["color-mix", 5], + ["conic-gradient", 5], + ["repeating-conic-gradient", 5], + ["container", 5], ["string", 10], + ["unicode", 10], ["counter", 10], ["counters", 10], + ["cross-fade", 0], ["easing-function", 10], + ["cubic-bezier", 10], + ["currentcolor", 10], + ["element", 0], + ["em", 10], + ["ex", 0], ["exp", 5], ["hypot", 5], ["log", 5], ["pow", 5], ["sqrt", 5], ["filter-function", 10], + ["blur", 10], + ["brightness", 10], + ["contrast", 10], + ["drop-shadow", 10], + ["grayscale", 10], + ["hue-rotate", 10], + ["invert", 10], + ["opacity", 10], + ["saturate", 10], + ["sepia", 10], ["url", 10], - ["gradient", 10], + ["linear-gradient", 10], + ["radial-gradient", 10], + ["repeating-linear-gradient", 10], + ["repeating-radial-gradient", 10], ["image", 10], ["flex", 10], + ["hsl", 5], + ["hwb", 5], + ["ic", 5], + ["image-set", 5], + ["global", 10], + ["inherit", 10], + ["initial", 10], + ["lab", 5], + ["lch", 5], + ["lh", 5], + ["light-dark", 5], + ["linear-function", 5], ["ratio", 10], ["clamp", 10], ["max", 10], ["min", 10], ["ray", 5], - ["number", 10], + ["position", 10], + ["size", 5], + ["named-color", 10], + ["oklab", 5], + ["oklch", 5], + ["scientific", 10], + ["overlay", 0], ["overflow", 5], + ["clip", 5], + ["paint", 0], + ["path", 0], + ["Q", 10], + ["rcap", 0], + ["rch", 0], + ["rgb", 10], + ["rem", 5], ["resolution", 5], + ["dpcm", 5], + ["dpi", 5], + ["dppx", 5], + ["x", 5], + ["revert", 10], + ["rex", 0], + ["alpha", 10], + ["ric", 0], + ["rlh", 5], ["mod", 5], - ["rem", 5], ["round", 5], ["basic-shape", 10], + ["animation", 10], + ["circle", 10], + ["ellipse", 10], + ["polygon", 10], + ["xywh", 10], + ["steps", 10], + ["system-color", 10], + ["text-edge", 0], + ["alphabetic", 0], + ["text", 0], ["angle", 10], ["angle-percentage", 10], - ["position", 10], + ["deg", 10], + ["grad", 10], + ["rad", 10], + ["turn", 10], + ["four", 10], + ["keyword", 10], ["transform-function", 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,6 +716,14 @@ export const types = new Map([ ["cos", 5], ["sin", 5], ["tan", 5], + ["unset", 10], + ["vb", 5], + ["vi", 5], + ["viewport", 5], + ["vh", 10], + ["vmax", 10], + ["vmin", 10], + ["vw", 10], ["dimension", 10], ["length", 10], ["length-percentage", 10], 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..a959a21 100644 --- a/tools/generate-baseline.js +++ b/tools/generate-baseline.js @@ -74,7 +74,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 = {}; From 68dc0076685f9c800b93848481627ec2bdd99b14 Mon Sep 17 00:00:00 2001 From: Rick Viscomi Date: Wed, 26 Feb 2025 08:32:25 -0500 Subject: [PATCH 2/3] use non-capturing group --- tools/generate-baseline.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tools/generate-baseline.js b/tools/generate-baseline.js index a959a21..845b43c 100644 --- a/tools/generate-baseline.js +++ b/tools/generate-baseline.js @@ -75,7 +75,7 @@ function extractCSSFeatures(features) { const cssMediaConditionPattern = /^css\.at-rules\.media\.(?[a-zA-Z$\d-]+)$/u; const cssTypePattern = - /^css\.types\.(?:.*?\.)?(?[a-zA-Z\d-]+)(?=\.[^.]*$|[^.]*$)/u; + /^css\.types\.(?:.*?\.)?(?[a-zA-Z\d-]+)(?:\.[^.]*$|[^.]*$)/u; const cssSelectorPattern = /^css\.selectors\.(?[a-zA-Z$\d-]+)$/u; const properties = {}; From acba6e3be2843c8dd02d445c5dce3441ff07dd92 Mon Sep 17 00:00:00 2001 From: Rick Viscomi Date: Mon, 3 Mar 2025 14:13:13 -0500 Subject: [PATCH 3/3] add mdn-data for css functions --- package.json | 1 + src/data/baseline-data.js | 84 -------------------------------------- tools/generate-baseline.js | 7 +++- 3 files changed, 7 insertions(+), 85 deletions(-) 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 0283b51..fcd13b6 100644 --- a/src/data/baseline-data.js +++ b/src/data/baseline-data.js @@ -563,49 +563,23 @@ export const types = new Map([ ["anchor", 0], ["anchor-size", 0], ["inset", 10], - ["time", 10], - ["fallback", 0], - ["type-or-unit", 0], ["attr", 10], - ["blend-mode", 10], - ["line-style", 10], ["calc", 10], - ["gradient", 10], - ["nested", 10], - ["number", 10], - ["calc-keyword", 5], - ["NaN", 5], - ["e", 5], - ["infinity", 5], - ["pi", 5], ["calc-size", 0], - ["cap", 0], - ["revert-layer", 10], - ["ch", 10], - ["shape", 10], ["rect", 10], ["color", 5], ["color-mix", 5], ["conic-gradient", 5], ["repeating-conic-gradient", 5], - ["container", 5], - ["string", 10], - ["unicode", 10], ["counter", 10], ["counters", 10], ["cross-fade", 0], - ["easing-function", 10], - ["cubic-bezier", 10], - ["currentcolor", 10], ["element", 0], - ["em", 10], - ["ex", 0], ["exp", 5], ["hypot", 5], ["log", 5], ["pow", 5], ["sqrt", 5], - ["filter-function", 10], ["blur", 10], ["brightness", 10], ["contrast", 10], @@ -616,78 +590,33 @@ export const types = new Map([ ["opacity", 10], ["saturate", 10], ["sepia", 10], - ["url", 10], ["linear-gradient", 10], ["radial-gradient", 10], ["repeating-linear-gradient", 10], ["repeating-radial-gradient", 10], ["image", 10], - ["flex", 10], ["hsl", 5], ["hwb", 5], - ["ic", 5], ["image-set", 5], - ["global", 10], - ["inherit", 10], - ["initial", 10], ["lab", 5], ["lch", 5], - ["lh", 5], ["light-dark", 5], - ["linear-function", 5], - ["ratio", 10], ["clamp", 10], ["max", 10], ["min", 10], ["ray", 5], - ["position", 10], - ["size", 5], - ["named-color", 10], ["oklab", 5], ["oklch", 5], - ["scientific", 10], - ["overlay", 0], - ["overflow", 5], - ["clip", 5], ["paint", 0], ["path", 0], - ["Q", 10], - ["rcap", 0], - ["rch", 0], ["rgb", 10], ["rem", 5], - ["resolution", 5], - ["dpcm", 5], - ["dpi", 5], - ["dppx", 5], - ["x", 5], - ["revert", 10], - ["rex", 0], - ["alpha", 10], - ["ric", 0], - ["rlh", 5], ["mod", 5], ["round", 5], - ["basic-shape", 10], - ["animation", 10], ["circle", 10], ["ellipse", 10], ["polygon", 10], ["xywh", 10], - ["steps", 10], - ["system-color", 10], - ["text-edge", 0], - ["alphabetic", 0], - ["text", 0], - ["angle", 10], - ["angle-percentage", 10], - ["deg", 10], - ["grad", 10], - ["rad", 10], - ["turn", 10], - ["four", 10], - ["keyword", 10], - ["transform-function", 10], ["matrix", 10], ["rotate", 10], ["scale", 10], @@ -716,19 +645,6 @@ export const types = new Map([ ["cos", 5], ["sin", 5], ["tan", 5], - ["unset", 10], - ["vb", 5], - ["vi", 5], - ["viewport", 5], - ["vh", 10], - ["vmax", 10], - ["vmin", 10], - ["vw", 10], - ["dimension", 10], - ["length", 10], - ["length-percentage", 10], - ["percentage", 10], - ["integer", 10], ]); export const selectors = new Map([ ["active-view-transition", 0], diff --git a/tools/generate-baseline.js b/tools/generate-baseline.js index 845b43c..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"; @@ -126,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; }