From 4c981ecf7ee9a04730ce4c104a353c3a763e64b9 Mon Sep 17 00:00:00 2001 From: "Nicholas C. Zakas" Date: Mon, 12 May 2025 11:53:24 -0400 Subject: [PATCH 1/3] feat: Update Baseline data --- package.json | 6 +- src/data/baseline-data.js | 210 +++++++++++++++++-------------- tests/rules/use-baseline.test.js | 24 ++-- 3 files changed, 128 insertions(+), 112 deletions(-) diff --git a/package.json b/package.json index 7ee4ccc..acf122a 100644 --- a/package.json +++ b/package.json @@ -100,7 +100,7 @@ "devDependencies": { "@eslint/json": "^0.5.0", "c8": "^9.1.0", - "compute-baseline": "^0.3.0", + "compute-baseline": "^0.3.1", "dedent": "^1.5.3", "eslint": "^9.24.0", "eslint-config-eslint": "^11.0.0", @@ -108,14 +108,14 @@ "got": "^14.4.2", "lint-staged": "^15.2.7", "mdast-util-from-markdown": "^2.0.2", - "mdn-data": "^2.17.0", + "mdn-data": "^2.21.0", "mocha": "^10.4.0", "prettier": "^3.4.1", "rollup": "^4.16.2", "rollup-plugin-copy": "^3.5.0", "rollup-plugin-delete": "^3.0.1", "typescript": "^5.8.2", - "web-features": "^2.23.0", + "web-features": "^2.35.0", "yorkie": "^2.0.0" }, "engines": { diff --git a/src/data/baseline-data.js b/src/data/baseline-data.js index e5cd49d..0ed7b5d 100644 --- a/src/data/baseline-data.js +++ b/src/data/baseline-data.js @@ -10,7 +10,7 @@ export const BASELINE_LOW = 5; export const BASELINE_FALSE = 0; export const properties = new Map([ - ["accent-color", "0:"], + ["accent-color", "10:2022"], ["alignment-baseline", "0:"], ["all", "10:2020"], ["anchor-name", "0:"], @@ -282,12 +282,12 @@ export const properties = new Map([ ["min-height", "10:2015"], ["min-width", "10:2015"], ["mix-blend-mode", "10:2020"], - ["offset", "5:2022"], + ["offset", "10:2022"], ["offset-anchor", "5:2023"], - ["offset-distance", "5:2022"], + ["offset-distance", "10:2022"], ["offset-path", "10:2022"], ["offset-position", "5:2024"], - ["offset-rotate", "5:2022"], + ["offset-rotate", "10:2022"], ["column-count", "10:2017"], ["column-gap", "10:2015"], ["column-rule", "10:2017"], @@ -300,8 +300,8 @@ export const properties = new Map([ ["object-position", "10:2020"], ["object-view-box", "0:"], ["opacity", "10:2015"], - ["fill-opacity", "10:2020"], - ["stroke-opacity", "10:2020"], + ["fill-opacity", "10:2017"], + ["stroke-opacity", "10:2017"], ["outline", "5:2023"], ["outline-color", "10:2015"], ["outline-offset", "10:2017"], @@ -314,11 +314,11 @@ export const properties = new Map([ ["overflow-y", "10:2015"], ["overflow-wrap", "10:2018"], ["overlay", "0:"], - ["overscroll-behavior", "5:2022"], - ["overscroll-behavior-block", "5:2022"], - ["overscroll-behavior-inline", "5:2022"], - ["overscroll-behavior-x", "5:2022"], - ["overscroll-behavior-y", "5:2022"], + ["overscroll-behavior", "10:2022"], + ["overscroll-behavior-block", "10:2022"], + ["overscroll-behavior-inline", "10:2022"], + ["overscroll-behavior-x", "10:2022"], + ["overscroll-behavior-y", "10:2022"], ["padding", "10:2015"], ["padding-bottom", "10:2015"], ["padding-left", "10:2015"], @@ -342,7 +342,6 @@ export const properties = new Map([ ["quotes", "10:2015"], ["reading-flow", "0:"], ["resize", "0:"], - ["line-height-step", "0:"], ["ruby-align", "5:2024"], ["ruby-overhang", "0:"], ["ruby-position", "5:2024"], @@ -360,6 +359,7 @@ export const properties = new Map([ ["view-timeline-inset", "0:"], ["view-timeline-name", "0:"], ["scroll-initial-target", "0:"], + ["scroll-marker-group", "0:"], ["scroll-margin", "10:2021"], ["scroll-margin-block", "10:2021"], ["scroll-margin-block-end", "10:2021"], @@ -394,31 +394,31 @@ export const properties = new Map([ ["speak", "0:"], ["speak-as", "0:"], ["clip-rule", "10:2020"], - ["color-interpolation", "0:"], + ["color-interpolation", "10:2020"], ["cx", "10:2020"], ["cy", "10:2020"], ["d", "0:"], - ["fill", "10:2020"], - ["fill-rule", "10:2020"], - ["marker", "10:2020"], - ["marker-end", "10:2020"], - ["marker-mid", "10:2020"], - ["marker-start", "10:2020"], + ["fill", "10:2017"], + ["fill-rule", "10:2017"], + ["marker", "10:2017"], + ["marker-end", "10:2017"], + ["marker-mid", "10:2017"], + ["marker-start", "10:2017"], ["r", "10:2020"], ["rx", "0:"], ["ry", "0:"], ["shape-rendering", "10:2020"], - ["stop-color", "10:2020"], - ["stop-opacity", "10:2020"], - ["stroke", "10:2020"], + ["stop-color", "10:2017"], + ["stop-opacity", "10:2017"], + ["stroke", "10:2017"], ["stroke-color", "0:"], - ["stroke-dasharray", "10:2020"], - ["stroke-dashoffset", "10:2020"], - ["stroke-linecap", "10:2020"], - ["stroke-linejoin", "10:2020"], - ["stroke-miterlimit", "10:2020"], - ["stroke-width", "10:2020"], - ["text-anchor", "10:2020"], + ["stroke-dasharray", "10:2017"], + ["stroke-dashoffset", "10:2017"], + ["stroke-linecap", "10:2017"], + ["stroke-linejoin", "10:2017"], + ["stroke-miterlimit", "10:2017"], + ["stroke-width", "10:2017"], + ["text-anchor", "10:2016"], ["text-rendering", "10:2020"], ["vector-effect", "10:2020"], ["x", "10:2020"], @@ -434,7 +434,7 @@ export const properties = new Map([ ["empty-cells", "10:2015"], ["table-layout", "10:2015"], ["text-align", "10:2015"], - ["text-align-last", "5:2022"], + ["text-align-last", "10:2022"], ["text-autospace", "0:"], ["text-box", "0:"], ["text-box-edge", "0:"], @@ -517,7 +517,7 @@ export const atRules = new Map([ ["page", "5:2024"], ["property", "5:2024"], ["scope", "0:"], - ["starting-style", "0:"], + ["starting-style", "5:2024"], ["supports", "10:2015"], ]); export const mediaConditions = new Map([ @@ -528,7 +528,7 @@ export const mediaConditions = new Map([ ["device-width", "0:"], ["display-mode", "0:"], ["dynamic-range", "10:2022"], - ["forced-colors", "5:2022"], + ["forced-colors", "10:2022"], ["any-hover", "10:2018"], ["any-pointer", "10:2018"], ["hover", "10:2018"], @@ -551,7 +551,7 @@ export const mediaConditions = new Map([ ["prefers-reduced-data", "0:"], ["prefers-reduced-motion", "10:2020"], ["prefers-reduced-transparency", "0:"], - ["resolution", "5:2022"], + ["resolution", "10:2022"], ["-webkit-device-pixel-ratio", "10:2018"], ["-webkit-max-device-pixel-ratio", "10:2018"], ["-webkit-min-device-pixel-ratio", "10:2018"], @@ -572,11 +572,12 @@ export const types = new Map([ ["rect", "0:"], ["color", "5:2024"], ["color-mix", "5:2023"], - ["conic-gradient", "5:2024"], - ["repeating-conic-gradient", "5:2024"], + ["conic-gradient", "5:2025"], + ["repeating-conic-gradient", "5:2025"], ["counter", "10:2015"], ["counters", "10:2015"], ["cross-fade", "0:"], + ["cubic-bezier", "10:2015"], ["var", "10:2017"], ["element", "0:"], ["exp", "5:2023"], @@ -594,10 +595,10 @@ export const types = new Map([ ["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"], + ["linear-gradient", "5:2025"], + ["radial-gradient", "5:2025"], + ["repeating-linear-gradient", "5:2025"], + ["repeating-radial-gradient", "5:2025"], ["image", "10:2015"], ["hsl", "5:2024"], ["hwb", "5:2024"], @@ -622,6 +623,7 @@ export const types = new Map([ ["ellipse", "10:2020"], ["polygon", "10:2020"], ["xywh", "0:"], + ["steps", "10:2020"], ["matrix", "10:2015"], ["rotate", "10:2015"], ["scale", "10:2015"], @@ -659,6 +661,9 @@ export const selectors = new Map([ ["backdrop", "10:2022"], ["after", "10:2015"], ["before", "10:2015"], + ["checkmark", "0:"], + ["picker", "0:"], + ["picker-icon", "0:"], ["default", "10:2020"], ["details-content", "0:"], ["dir", "5:2023"], @@ -725,6 +730,8 @@ export const selectors = new Map([ ["read-write", "10:2020"], ["root", "10:2015"], ["scope", "10:2020"], + ["scroll-marker", "0:"], + ["scroll-marker-group", "0:"], ["selection", "0:"], ["attribute", "10:2015"], ["child", "10:2015"], @@ -770,7 +777,7 @@ export const propertyValues = new Map([ ["sticky", "10:2019"], ]), ], - ["accent-color", new Map([["auto", "0:"]])], + ["accent-color", new Map([["auto", "10:2022"]])], [ "alignment-baseline", new Map([ @@ -1159,6 +1166,7 @@ export const propertyValues = new Map([ ["searchfield", "10:2022"], ["textarea", "10:2022"], ["textfield", "10:2022"], + ["base-select", "0:"], ]), ], ["aspect-ratio", new Map([["auto", "10:2021"]])], @@ -1254,10 +1262,10 @@ export const propertyValues = new Map([ [ "border-image-repeat", new Map([ - ["repeat", "10:2020"], + ["repeat", "10:2016"], ["round", "10:2016"], ["space", "10:2017"], - ["stretch", "10:2020"], + ["stretch", "10:2016"], ]), ], ["border-image-width", new Map([["auto", "10:2015"]])], @@ -1382,7 +1390,7 @@ export const propertyValues = new Map([ ["content", "10:2022"], ["none", "10:2022"], ["strict", "10:2022"], - ["inline-size", "5:2022"], + ["inline-size", "10:2022"], ["layout", "10:2022"], ["paint", "10:2022"], ["size", "10:2022"], @@ -1478,7 +1486,7 @@ export const propertyValues = new Map([ ["ruby-text-container", "0:"], ["inline-table", "10:2015"], ["table", "10:2015"], - ["table-caption", "10:2020"], + ["table-caption", "10:2017"], ["table-cell", "10:2015"], ["table-column", "10:2015"], ["table-column-group", "10:2015"], @@ -1517,9 +1525,9 @@ export const propertyValues = new Map([ new Map([ ["auto", "10:2015"], ["content", "10:2022"], - ["fit-content", "5:2022"], - ["max-content", "5:2022"], - ["min-content", "5:2022"], + ["fit-content", "10:2022"], + ["max-content", "10:2022"], + ["min-content", "10:2022"], ]), ], [ @@ -1805,7 +1813,7 @@ export const propertyValues = new Map([ ["minmax", "10:2017"], ["none", "10:2020"], ["repeat", "10:2020"], - ["animation", "5:2022"], + ["animation", "10:2022"], ["masonry", "0:"], ["subgrid", "5:2023"], ]), @@ -1820,7 +1828,7 @@ export const propertyValues = new Map([ ["minmax", "10:2017"], ["none", "10:2020"], ["repeat", "10:2020"], - ["animation", "5:2022"], + ["animation", "10:2022"], ["masonry", "0:"], ["subgrid", "5:2023"], ]), @@ -1938,7 +1946,7 @@ export const propertyValues = new Map([ ["malayalam", "10:2020"], ["mongolian", "10:2020"], ["myanmar", "10:2020"], - ["none", "10:2020"], + ["none", "10:2015"], ["oriya", "10:2020"], ["persian", "10:2020"], ["simp-chinese-formal", "10:2021"], @@ -2056,7 +2064,7 @@ export const propertyValues = new Map([ ["margin-box", "0:"], ["none", "5:2024"], ["padding-box", "5:2024"], - ["path", "5:2022"], + ["path", "10:2022"], ["ray", "5:2024"], ["stroke-box", "5:2024"], ["url", "5:2024"], @@ -2078,8 +2086,8 @@ export const propertyValues = new Map([ [ "offset-rotate", new Map([ - ["auto", "5:2022"], - ["reverse", "5:2022"], + ["auto", "10:2022"], + ["reverse", "10:2022"], ]), ], ["column-count", new Map([["auto", "10:2017"]])], @@ -2118,19 +2126,11 @@ export const propertyValues = new Map([ ["none", "0:"], ]), ], - [ - "overflow-clip-margin", - new Map([ - ["border-box", "0:"], - ["content-box", "0:"], - ["padding-box", "0:"], - ]), - ], [ "overflow-x", new Map([ + ["clip", "10:2022"], ["auto", "10:2015"], - ["clip", "5:2022"], ["hidden", "10:2015"], ["scroll", "10:2015"], ["visible", "10:2015"], @@ -2139,8 +2139,8 @@ export const propertyValues = new Map([ [ "overflow-y", new Map([ + ["clip", "10:2022"], ["auto", "10:2015"], - ["clip", "5:2022"], ["hidden", "10:2015"], ["scroll", "10:2015"], ["visible", "10:2015"], @@ -2149,13 +2149,21 @@ export const propertyValues = new Map([ [ "overflow", new Map([ + ["clip", "10:2022"], ["auto", "10:2015"], - ["clip", "5:2022"], ["hidden", "10:2015"], ["scroll", "10:2015"], ["visible", "10:2015"], ]), ], + [ + "overflow-clip-margin", + new Map([ + ["border-box", "0:"], + ["content-box", "0:"], + ["padding-box", "0:"], + ]), + ], [ "overflow-wrap", new Map([ @@ -2174,41 +2182,41 @@ export const propertyValues = new Map([ [ "overscroll-behavior-block", new Map([ - ["auto", "5:2022"], - ["contain", "5:2022"], - ["none", "5:2022"], + ["auto", "10:2022"], + ["contain", "10:2022"], + ["none", "10:2022"], ]), ], [ "overscroll-behavior-inline", new Map([ - ["auto", "5:2022"], - ["contain", "5:2022"], - ["none", "5:2022"], + ["auto", "10:2022"], + ["contain", "10:2022"], + ["none", "10:2022"], ]), ], [ "overscroll-behavior-x", new Map([ - ["auto", "5:2022"], - ["contain", "5:2022"], - ["none", "5:2022"], + ["auto", "10:2022"], + ["contain", "10:2022"], + ["none", "10:2022"], ]), ], [ "overscroll-behavior-y", new Map([ - ["auto", "5:2022"], - ["contain", "5:2022"], - ["none", "5:2022"], + ["auto", "10:2022"], + ["contain", "10:2022"], + ["none", "10:2022"], ]), ], [ "overscroll-behavior", new Map([ - ["auto", "5:2022"], - ["contain", "5:2022"], - ["none", "5:2022"], + ["auto", "10:2022"], + ["contain", "10:2022"], + ["none", "10:2022"], ]), ], [ @@ -2333,6 +2341,14 @@ export const propertyValues = new Map([ ["none", "0:"], ]), ], + [ + "scroll-marker-group", + new Map([ + ["after", "0:"], + ["before", "0:"], + ["none", "0:"], + ]), + ], ["scroll-padding-block-end", new Map([["auto", "10:2021"]])], ["scroll-padding-block-start", new Map([["auto", "10:2021"]])], ["scroll-padding-block", new Map([["auto", "10:2021"]])], @@ -2417,31 +2433,31 @@ export const propertyValues = new Map([ "color-interpolation", new Map([ ["linearGradient", "0:"], - ["sRGB", "0:"], + ["sRGB", "10:2020"], ]), ], [ "fill-rule", new Map([ - ["evenodd", "10:2020"], - ["nonzero", "10:2020"], + ["evenodd", "10:2017"], + ["nonzero", "10:2017"], ]), ], - ["stroke-dasharray", new Map([["none", "10:2020"]])], + ["stroke-dasharray", new Map([["none", "10:2017"]])], [ "stroke-linecap", new Map([ - ["butt", "10:2020"], - ["round", "10:2020"], - ["square", "10:2020"], + ["butt", "10:2017"], + ["round", "10:2017"], + ["square", "10:2017"], ]), ], [ "stroke-linejoin", new Map([ - ["bevel", "10:2020"], - ["miter", "10:2020"], - ["round", "10:2020"], + ["bevel", "10:2017"], + ["miter", "10:2017"], + ["round", "10:2017"], ]), ], [ @@ -2488,7 +2504,7 @@ export const propertyValues = new Map([ ["start", "10:2020"], ]), ], - ["text-align-last", new Map([["auto", "5:2022"]])], + ["text-align-last", new Map([["auto", "10:2022"]])], [ "text-autospace", new Map([ @@ -2678,11 +2694,11 @@ export const propertyValues = new Map([ [ "transform-origin", new Map([ - ["bottom", "10:2020"], - ["center", "10:2020"], - ["left", "10:2020"], - ["right", "10:2020"], - ["top", "10:2020"], + ["bottom", "10:2015"], + ["center", "10:2015"], + ["left", "10:2015"], + ["right", "10:2015"], + ["top", "10:2015"], ]), ], [ @@ -2782,8 +2798,8 @@ export const propertyValues = new Map([ "writing-mode", new Map([ ["horizontal-tb", "10:2017"], - ["sideways-lr", "0:"], - ["sideways-rl", "0:"], + ["sideways-lr", "5:2025"], + ["sideways-rl", "5:2025"], ["vertical-lr", "10:2017"], ["vertical-rl", "10:2017"], ["lr", "0:"], diff --git a/tests/rules/use-baseline.test.js b/tests/rules/use-baseline.test.js index 19fb8b4..9bb8e97 100644 --- a/tests/rules/use-baseline.test.js +++ b/tests/rules/use-baseline.test.js @@ -91,18 +91,18 @@ ruleTester.run("use-baseline", rule, { ], invalid: [ { - code: "a { accent-color: bar; backdrop-filter: auto }", + code: "a { alignment-baseline: baseline; backdrop-filter: auto }", errors: [ { messageId: "notBaselineProperty", data: { - property: "accent-color", + property: "alignment-baseline", availability: "widely", }, line: 1, column: 5, endLine: 1, - endColumn: 17, + endColumn: 23, }, { messageId: "notBaselineProperty", @@ -111,26 +111,26 @@ ruleTester.run("use-baseline", rule, { availability: "widely", }, line: 1, - column: 24, + column: 35, endLine: 1, - endColumn: 39, + endColumn: 50, }, ], }, { - code: "a { accent-color: bar; backdrop-filter: auto }", + code: "a { alignment-baseline: baseline; backdrop-filter: auto }", options: [{ available: "newly" }], errors: [ { messageId: "notBaselineProperty", data: { - property: "accent-color", + property: "alignment-baseline", availability: "newly", }, line: 1, column: 5, endLine: 1, - endColumn: 17, + endColumn: 23, }, ], }, @@ -246,18 +246,18 @@ ruleTester.run("use-baseline", rule, { ], }, { - code: "@supports not (accent-color: auto) { a { accent-color: auto } }", + code: "@supports not (alignment-baseline: baseline) { a { alignment-baseline: baseline } }", errors: [ { messageId: "notBaselineProperty", data: { - property: "accent-color", + property: "alignment-baseline", availability: "widely", }, line: 1, - column: 42, + column: 52, endLine: 1, - endColumn: 54, + endColumn: 70, }, ], }, From 03ad0e818c65697d328a9a2008ab5951db628c58 Mon Sep 17 00:00:00 2001 From: "Nicholas C. Zakas" Date: Mon, 12 May 2025 16:40:31 -0400 Subject: [PATCH 2/3] Fix accent-color entry --- src/data/baseline-data.js | 2 +- tests/rules/use-baseline.test.js | 24 ++++++++++++------------ 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/data/baseline-data.js b/src/data/baseline-data.js index 0ed7b5d..9cfddba 100644 --- a/src/data/baseline-data.js +++ b/src/data/baseline-data.js @@ -10,7 +10,7 @@ export const BASELINE_LOW = 5; export const BASELINE_FALSE = 0; export const properties = new Map([ - ["accent-color", "10:2022"], + ["accent-color", "0:"], ["alignment-baseline", "0:"], ["all", "10:2020"], ["anchor-name", "0:"], diff --git a/tests/rules/use-baseline.test.js b/tests/rules/use-baseline.test.js index 9bb8e97..19fb8b4 100644 --- a/tests/rules/use-baseline.test.js +++ b/tests/rules/use-baseline.test.js @@ -91,18 +91,18 @@ ruleTester.run("use-baseline", rule, { ], invalid: [ { - code: "a { alignment-baseline: baseline; backdrop-filter: auto }", + code: "a { accent-color: bar; backdrop-filter: auto }", errors: [ { messageId: "notBaselineProperty", data: { - property: "alignment-baseline", + property: "accent-color", availability: "widely", }, line: 1, column: 5, endLine: 1, - endColumn: 23, + endColumn: 17, }, { messageId: "notBaselineProperty", @@ -111,26 +111,26 @@ ruleTester.run("use-baseline", rule, { availability: "widely", }, line: 1, - column: 35, + column: 24, endLine: 1, - endColumn: 50, + endColumn: 39, }, ], }, { - code: "a { alignment-baseline: baseline; backdrop-filter: auto }", + code: "a { accent-color: bar; backdrop-filter: auto }", options: [{ available: "newly" }], errors: [ { messageId: "notBaselineProperty", data: { - property: "alignment-baseline", + property: "accent-color", availability: "newly", }, line: 1, column: 5, endLine: 1, - endColumn: 23, + endColumn: 17, }, ], }, @@ -246,18 +246,18 @@ ruleTester.run("use-baseline", rule, { ], }, { - code: "@supports not (alignment-baseline: baseline) { a { alignment-baseline: baseline } }", + code: "@supports not (accent-color: auto) { a { accent-color: auto } }", errors: [ { messageId: "notBaselineProperty", data: { - property: "alignment-baseline", + property: "accent-color", availability: "widely", }, line: 1, - column: 52, + column: 42, endLine: 1, - endColumn: 70, + endColumn: 54, }, ], }, From dcbc97341389c8d3efc57e6901d6ee5bab643b33 Mon Sep 17 00:00:00 2001 From: "Nicholas C. Zakas" Date: Wed, 14 May 2025 14:07:13 -0400 Subject: [PATCH 3/3] Update web-features to fix accent-color bug --- package.json | 2 +- src/data/baseline-data.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index acf122a..9771606 100644 --- a/package.json +++ b/package.json @@ -115,7 +115,7 @@ "rollup-plugin-copy": "^3.5.0", "rollup-plugin-delete": "^3.0.1", "typescript": "^5.8.2", - "web-features": "^2.35.0", + "web-features": "^2.35.1", "yorkie": "^2.0.0" }, "engines": { diff --git a/src/data/baseline-data.js b/src/data/baseline-data.js index 9cfddba..b044e89 100644 --- a/src/data/baseline-data.js +++ b/src/data/baseline-data.js @@ -777,7 +777,7 @@ export const propertyValues = new Map([ ["sticky", "10:2019"], ]), ], - ["accent-color", new Map([["auto", "10:2022"]])], + ["accent-color", new Map([["auto", "0:"]])], [ "alignment-baseline", new Map([