From 375f5609831cd16e438d162c5793b1ee3995cc98 Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Sun, 24 Mar 2024 23:17:41 +0100 Subject: [PATCH] map web-features --- cssdb.json | 78 +++++----- cssdb.mjs | 78 +++++----- cssdb.settings.json | 274 ++++++++++++++++++----------------- package-lock.json | 105 ++++++++------ package.json | 5 +- tasks/check-web-features.mjs | 40 +++++ tasks/populate-db.mjs | 3 + utils/web-features-data.mjs | 25 ++++ 8 files changed, 362 insertions(+), 246 deletions(-) create mode 100644 tasks/check-web-features.mjs create mode 100644 utils/web-features-data.mjs diff --git a/cssdb.json b/cssdb.json index 07d7789..c5467d0 100644 --- a/cssdb.json +++ b/cssdb.json @@ -167,7 +167,8 @@ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-cascade-layers" } ], - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "cascade-layers" }, { "id": "case-insensitive-attributes", @@ -297,7 +298,8 @@ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-function" } ], - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "color-function" }, { "id": "color-functional-notation", @@ -362,7 +364,8 @@ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-mix-function" } ], - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "color-mix" }, { "id": "color-mod-function", @@ -400,7 +403,7 @@ "samsung": "20.0" }, "docs": { - "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries" + "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries" }, "example": ".container {\n contain: layout inline-size;\n}\n\n@container (min-width: 700px) {\n .container {\n /* styles applied when a container is at least 700px */\n }\n}", "interoperable_at": 1676332800, @@ -410,7 +413,8 @@ "link": "https://www.npmjs.com/package/container-query-polyfill" } ], - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "container-queries" }, { "id": "custom-media-queries", @@ -459,7 +463,8 @@ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-properties" } ], - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "custom-properties" }, { "id": "custom-property-sets", @@ -724,7 +729,8 @@ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-visible" } ], - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "focus-visible" }, { "id": "focus-within-pseudo-class", @@ -984,7 +990,8 @@ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo" } ], - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "has" }, { "id": "hexadecimal-alpha-notation", @@ -1082,7 +1089,8 @@ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-ic-unit" } ], - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "ic" }, { "id": "image-set-function", @@ -1175,7 +1183,8 @@ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-is-pseudo-class" } ], - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "is" }, { "id": "lab-function", @@ -1206,7 +1215,8 @@ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-lab-function" } ], - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "lab" }, { "id": "lch-function", @@ -1237,7 +1247,8 @@ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-lab-function" } ], - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "lab" }, { "id": "light-dark-function", @@ -1414,7 +1425,8 @@ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-viewport-units" } ], - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "viewport-relative-unit-variants" }, { "id": "matches-pseudo-class", @@ -1422,32 +1434,18 @@ "description": "A pseudo-class for matching elements in a selector list", "specification": "https://www.w3.org/TR/selectors-4/#selectordef-matches", "stage": -1, - "browser_support": { - "and_chr": "88", - "and_ff": "82", - "android": "88", - "chrome": "88", - "edge": "88", - "firefox": "82", - "ios_saf": "14", - "oculus": "14.0", - "op_mob": "63", - "opera": "74", - "safari": "14", - "samsung": "15.0" - }, + "browser_support": {}, "docs": { "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:is" }, "example": "p:matches(:first-child, .special) {\n margin-top: 1em;\n}", - "interoperable_at": 1611187200, "polyfills": [ { "type": "PostCSS Plugin", "link": "https://github.com/postcss/postcss-selector-matches" } ], - "vendors_implementations": 3 + "vendors_implementations": 0 }, { "id": "media-queries-aspect-ratio-number-values", @@ -1509,7 +1507,8 @@ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-media-minmax" } ], - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "media-query-range-syntax" }, { "id": "nested-calc", @@ -1573,7 +1572,8 @@ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting" } ], - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "nesting" }, { "id": "not-pseudo-class", @@ -1636,7 +1636,8 @@ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-oklab-function" } ], - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "oklab" }, { "id": "opacity-percentage", @@ -1885,7 +1886,8 @@ }, "example": "input:read-only {\n background-color: #ccc;\n}", "interoperable_at": 1593475200, - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "read-write-pseudos" }, { "id": "rebeccapurple-color", @@ -1928,7 +1930,9 @@ "specification": "https://www.w3.org/TR/css-color-5/#relative-colors", "stage": 2, "browser_support": {}, - "docs": {}, + "docs": { + "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors" + }, "example": "p {\n color: lch(from peru calc(l * 0.8) c h);\n}", "polyfills": [ { @@ -1936,7 +1940,8 @@ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-relative-color-syntax" } ], - "vendors_implementations": 0 + "vendors_implementations": 0, + "web-feature": "relative-color" }, { "id": "scope-pseudo-class", @@ -2192,6 +2197,7 @@ }, "example": "a:where(:not(:hover)) {\n text-decoration: none;\n}", "interoperable_at": 1611187200, - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "where" } ] diff --git a/cssdb.mjs b/cssdb.mjs index b071ff1..0a59535 100644 --- a/cssdb.mjs +++ b/cssdb.mjs @@ -167,7 +167,8 @@ export default [ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-cascade-layers" } ], - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "cascade-layers" }, { "id": "case-insensitive-attributes", @@ -297,7 +298,8 @@ export default [ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-function" } ], - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "color-function" }, { "id": "color-functional-notation", @@ -362,7 +364,8 @@ export default [ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-mix-function" } ], - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "color-mix" }, { "id": "color-mod-function", @@ -400,7 +403,7 @@ export default [ "samsung": "20.0" }, "docs": { - "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries" + "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries" }, "example": ".container {\n contain: layout inline-size;\n}\n\n@container (min-width: 700px) {\n .container {\n /* styles applied when a container is at least 700px */\n }\n}", "interoperable_at": 1676332800, @@ -410,7 +413,8 @@ export default [ "link": "https://www.npmjs.com/package/container-query-polyfill" } ], - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "container-queries" }, { "id": "custom-media-queries", @@ -459,7 +463,8 @@ export default [ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-properties" } ], - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "custom-properties" }, { "id": "custom-property-sets", @@ -724,7 +729,8 @@ export default [ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-visible" } ], - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "focus-visible" }, { "id": "focus-within-pseudo-class", @@ -984,7 +990,8 @@ export default [ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo" } ], - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "has" }, { "id": "hexadecimal-alpha-notation", @@ -1082,7 +1089,8 @@ export default [ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-ic-unit" } ], - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "ic" }, { "id": "image-set-function", @@ -1175,7 +1183,8 @@ export default [ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-is-pseudo-class" } ], - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "is" }, { "id": "lab-function", @@ -1206,7 +1215,8 @@ export default [ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-lab-function" } ], - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "lab" }, { "id": "lch-function", @@ -1237,7 +1247,8 @@ export default [ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-lab-function" } ], - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "lab" }, { "id": "light-dark-function", @@ -1414,7 +1425,8 @@ export default [ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-viewport-units" } ], - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "viewport-relative-unit-variants" }, { "id": "matches-pseudo-class", @@ -1422,32 +1434,18 @@ export default [ "description": "A pseudo-class for matching elements in a selector list", "specification": "https://www.w3.org/TR/selectors-4/#selectordef-matches", "stage": -1, - "browser_support": { - "and_chr": "88", - "and_ff": "82", - "android": "88", - "chrome": "88", - "edge": "88", - "firefox": "82", - "ios_saf": "14", - "oculus": "14.0", - "op_mob": "63", - "opera": "74", - "safari": "14", - "samsung": "15.0" - }, + "browser_support": {}, "docs": { "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:is" }, "example": "p:matches(:first-child, .special) {\n margin-top: 1em;\n}", - "interoperable_at": 1611187200, "polyfills": [ { "type": "PostCSS Plugin", "link": "https://github.com/postcss/postcss-selector-matches" } ], - "vendors_implementations": 3 + "vendors_implementations": 0 }, { "id": "media-queries-aspect-ratio-number-values", @@ -1509,7 +1507,8 @@ export default [ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-media-minmax" } ], - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "media-query-range-syntax" }, { "id": "nested-calc", @@ -1573,7 +1572,8 @@ export default [ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting" } ], - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "nesting" }, { "id": "not-pseudo-class", @@ -1636,7 +1636,8 @@ export default [ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-oklab-function" } ], - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "oklab" }, { "id": "opacity-percentage", @@ -1885,7 +1886,8 @@ export default [ }, "example": "input:read-only {\n background-color: #ccc;\n}", "interoperable_at": 1593475200, - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "read-write-pseudos" }, { "id": "rebeccapurple-color", @@ -1928,7 +1930,9 @@ export default [ "specification": "https://www.w3.org/TR/css-color-5/#relative-colors", "stage": 2, "browser_support": {}, - "docs": {}, + "docs": { + "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors" + }, "example": "p {\n color: lch(from peru calc(l * 0.8) c h);\n}", "polyfills": [ { @@ -1936,7 +1940,8 @@ export default [ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-relative-color-syntax" } ], - "vendors_implementations": 0 + "vendors_implementations": 0, + "web-feature": "relative-color" }, { "id": "scope-pseudo-class", @@ -2192,6 +2197,7 @@ export default [ }, "example": "a:where(:not(:hover)) {\n text-decoration: none;\n}", "interoperable_at": 1611187200, - "vendors_implementations": 3 + "vendors_implementations": 3, + "web-feature": "where" } ] diff --git a/cssdb.settings.json b/cssdb.settings.json index e167776..911c097 100644 --- a/cssdb.settings.json +++ b/cssdb.settings.json @@ -29,9 +29,9 @@ "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link" }, "example": "nav :any-link > span {\n background-color: yellow;\n}", - "mdn_path": "css.selectors['any-link']", + "mdn_path": "css.selectors.any-link", "mdn_count_prefixed_as_supported": { - "css.selectors['any-link']": true + "css.selectors.any-link": true }, "polyfills": [ { @@ -75,12 +75,12 @@ }, "example": "a {\n break-inside: avoid;\n break-before: avoid-column;\n break-after: always;\n}", "mdn_path": [ - "css.properties['break-after'].paged_context", - "css.properties['break-after'].paged_context.page", - "css.properties['break-before'].paged_context", - "css.properties['break-before'].paged_context.page", - "css.properties['break-inside'].paged_context", - "css.properties['break-inside'].paged_context['avoid-page']" + "css.properties.break-after.paged_context", + "css.properties.break-after.paged_context.page", + "css.properties.break-before.paged_context", + "css.properties.break-before.paged_context.page", + "css.properties.break-inside.paged_context", + "css.properties.break-inside.paged_context.avoid-page" ], "polyfills": [ { @@ -101,11 +101,11 @@ }, "example": "p {\n font-size: calc(pow(e, pi) * 1rem);\n}", "mdn_path": [ - "css.types['calc-constant']", - "css.types['calc-constant'].NaN", - "css.types['calc-constant'].e", - "css.types['calc-constant'].infinity", - "css.types['calc-constant'].pi" + "css.types.calc-constant", + "css.types.calc-constant.NaN", + "css.types.calc-constant.e", + "css.types.calc-constant.infinity", + "css.types.calc-constant.pi" ] }, { @@ -115,11 +115,12 @@ "specification": "https://www.w3.org/TR/css-cascade-5/#layering", "stage": 2, "browser_support": {}, + "web-feature": "cascade-layers", "docs": { "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/@layer" }, "example": "/* Un-layered styles have the highest priority */\na {\n color: mediumvioletred;\n}\n\n@layer defaults {\n a { color: maroon; }\n}", - "mdn_path": "css['at-rules'].layer", + "mdn_path": "css.at-rules.layer", "polyfills": [ { "type": "PostCSS Plugin", @@ -176,7 +177,7 @@ "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/print-color-adjust" }, "example": ".background {\n background-color:#ccc;\n}\n.background.color-adjust {\n color-adjust: economy;\n}\n.background.color-adjust-exact {\n color-adjust: exact;\n}", - "mdn_path": "css.properties['print-color-adjust']" + "mdn_path": "css.properties.print-color-adjust" }, { "id": "color-contrast", @@ -189,7 +190,7 @@ "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-contrast" }, "example": "p {\n color: color-contrast(wheat vs tan, sienna, var(--myAccent), #d2691e);\n}", - "mdn_path": "css.types.color['color-contrast']", + "mdn_path": "css.types.color.color-contrast", "polyfills": [] }, { @@ -199,6 +200,7 @@ "specification": "https://www.w3.org/TR/css-color-4/#funcdef-color", "stage": 2, "browser_support": {}, + "web-feature": "color-function", "docs": { "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color" }, @@ -243,9 +245,10 @@ "specification": "https://www.w3.org/TR/css-color-5/#color-mix", "stage": 2, "mdn_path": [ - "css.types.color['color-mix']" + "css.types.color.color-mix" ], "browser_support": {}, + "web-feature": "color-mix", "docs": { "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix" }, @@ -278,10 +281,11 @@ "description": "New container property and container at rule to make changes depending on the container's size", "specification": "https://www.w3.org/TR/css-contain-3/#container-queries", "stage": 2, - "mdn_path": "css['at-rules'].container", + "mdn_path": "css.at-rules.container", "browser_support": {}, + "web-feature": "container-queries", "docs": { - "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries" + "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries" }, "example": ".container {\n contain: layout inline-size;\n}\n\n@container (min-width: 700px) {\n .container {\n /* styles applied when a container is at least 700px */\n }\n}", "polyfills": [ @@ -313,11 +317,12 @@ "specification": "https://www.w3.org/TR/css-variables-1/", "stage": 3, "browser_support": {}, + "web-feature": "custom-properties", "docs": { "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/var" }, "example": ":root {\n --some-length: 32px;\n\n height: var(--some-length);\n width: var(--some-length);\n}", - "mdn_path": "css.properties['custom-property'].var", + "mdn_path": "css.properties.custom-property.var", "polyfills": [ { "type": "PostCSS Plugin", @@ -391,7 +396,7 @@ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-normalize-display-values" } ], - "mdn_path": "css.properties.display['multi-keyword_values']" + "mdn_path": "css.properties.display.multi-keyword_values" }, { "id": "double-position-gradients", @@ -400,11 +405,11 @@ "specification": "https://www.w3.org/TR/css-images-4/#color-stop-syntax", "stage": 2, "mdn_path": [ - "css.types.image.gradient['conic-gradient'].doubleposition", - "css.types.image.gradient['linear-gradient'].doubleposition", - "css.types.image.gradient['radial-gradient'].doubleposition", - "css.types.image.gradient['repeating-linear-gradient'].doubleposition", - "css.types.image.gradient['repeating-radial-gradient'].doubleposition" + "css.types.image.gradient.conic-gradient.doubleposition", + "css.types.image.gradient.linear-gradient.doubleposition", + "css.types.image.gradient.radial-gradient.doubleposition", + "css.types.image.gradient.repeating-linear-gradient.doubleposition", + "css.types.image.gradient.repeating-radial-gradient.doubleposition" ], "browser_support": {}, "docs": { @@ -491,10 +496,10 @@ }, "example": "span:first-child {\n float: inline-start;\n}", "mdn_path": [ - "css.properties.float['inline-end']", - "css.properties.float['inline-start']", - "css.properties.clear['inline-end']", - "css.properties.clear['inline-start']" + "css.properties.float.inline-end", + "css.properties.float.inline-start", + "css.properties.clear.inline-end", + "css.properties.clear.inline-start" ], "polyfills": [ { @@ -510,6 +515,7 @@ "specification": "https://www.w3.org/TR/selectors-4/#focus-visible-pseudo", "stage": 2, "browser_support": {}, + "web-feature": "focus-visible", "docs": { "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible" }, @@ -524,7 +530,7 @@ "link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-visible" } ], - "mdn_path": "css.selectors['focus-visible']" + "mdn_path": "css.selectors.focus-visible" }, { "id": "focus-within-pseudo-class", @@ -537,7 +543,7 @@ "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within" }, "example": "form:focus-within {\n background: rgb(0 128 0);\n}", - "mdn_path": "css.selectors['focus-within']", + "mdn_path": "css.selectors.focus-within", "polyfills": [ { "type": "JavaScript Library", @@ -560,7 +566,7 @@ "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face" }, "example": "@font-face {\n src: url(file.woff2) format(woff2);\n}", - "mdn_path": "css['at-rules']['font-face'].src.format_keyword", + "mdn_path": "css.at-rules.font-face.src.format_keyword", "polyfills": [ { "type": "PostCSS Plugin", @@ -580,14 +586,14 @@ }, "example": "h2 {\n font-variant: small-caps;\n}", "mdn_path": [ - "css.properties['font-variant-caps']", - "css.properties['font-variant-numeric']", - "css.properties['font-variant-alternates']", - "css.properties['font-variant-ligatures']", - "css.properties['font-variant-position']" + "css.properties.font-variant-caps", + "css.properties.font-variant-numeric", + "css.properties.font-variant-alternates", + "css.properties.font-variant-ligatures", + "css.properties.font-variant-position" ], "mdn_count_prefixed_as_supported": { - "css.properties['font-variant-ligatures']": true + "css.properties.font-variant-ligatures": true }, "polyfills": [ { @@ -638,18 +644,18 @@ "specification": "https://www.w3.org/TR/css-images-4/#color-interpolation", "stage": 2, "mdn_path": [ - "css.types.image.gradient['conic-gradient'].hue_interpolation_method", - "css.types.image.gradient['conic-gradient'].interpolation_color_space", - "css.types.image.gradient['linear-gradient'].hue_interpolation_method", - "css.types.image.gradient['linear-gradient'].interpolation_color_space", - "css.types.image.gradient['radial-gradient'].hue_interpolation_method", - "css.types.image.gradient['radial-gradient'].interpolation_color_space", - "css.types.image.gradient['repeating-conic-gradient'].hue_interpolation_method", - "css.types.image.gradient['repeating-conic-gradient'].interpolation_color_space", - "css.types.image.gradient['repeating-linear-gradient'].hue_interpolation_method", - "css.types.image.gradient['repeating-linear-gradient'].interpolation_color_space", - "css.types.image.gradient['repeating-radial-gradient'].hue_interpolation_method", - "css.types.image.gradient['repeating-radial-gradient'].interpolation_color_space" + "css.types.image.gradient.conic-gradient.hue_interpolation_method", + "css.types.image.gradient.conic-gradient.interpolation_color_space", + "css.types.image.gradient.linear-gradient.hue_interpolation_method", + "css.types.image.gradient.linear-gradient.interpolation_color_space", + "css.types.image.gradient.radial-gradient.hue_interpolation_method", + "css.types.image.gradient.radial-gradient.interpolation_color_space", + "css.types.image.gradient.repeating-conic-gradient.hue_interpolation_method", + "css.types.image.gradient.repeating-conic-gradient.interpolation_color_space", + "css.types.image.gradient.repeating-linear-gradient.hue_interpolation_method", + "css.types.image.gradient.repeating-linear-gradient.interpolation_color_space", + "css.types.image.gradient.repeating-radial-gradient.hue_interpolation_method", + "css.types.image.gradient.repeating-radial-gradient.interpolation_color_space" ], "browser_support": {}, "docs": { @@ -704,6 +710,7 @@ "specification": "https://www.w3.org/TR/selectors-4/#has-pseudo", "stage": 2, "browser_support": {}, + "web-feature": "has", "docs": { "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:has" }, @@ -767,6 +774,7 @@ "specification": "https://www.w3.org/TR/css-values-4/#ic", "stage": 2, "browser_support": {}, + "web-feature": "ic", "docs": { "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units#dimensions" }, @@ -790,9 +798,9 @@ "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set" }, "example": "p {\n background-image: image-set(\n \"foo.png\" 1x,\n \"foo-2x.png\" 2x,\n \"foo-print.png\" 600dpi\n );\n}", - "mdn_path": "css.types.image['image-set']", + "mdn_path": "css.types.image.image-set", "mdn_count_prefixed_as_supported": { - "css.types.image['image-set']": true + "css.types.image.image-set": true }, "polyfills": [ { @@ -811,7 +819,7 @@ "docs": { "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:in-range" }, - "mdn_path": "css.selectors['in-range']", + "mdn_path": "css.selectors.in-range", "example": "input:in-range {\n background-color: rgb(0 255 0 / 0.25);\n}\ninput:out-of-range {\n background-color: rgb(255 0 0 / 0.25);\n border: 2px solid red;\n}" }, { @@ -821,6 +829,7 @@ "specification": "https://www.w3.org/TR/selectors-4/#matches-pseudo", "stage": 2, "browser_support": {}, + "web-feature": "is", "docs": { "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:is" }, @@ -843,6 +852,7 @@ "specification": "https://www.w3.org/TR/css-color-4/#funcdef-lab", "stage": 2, "browser_support": {}, + "web-feature": "lab", "docs": { "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lab" }, @@ -867,6 +877,7 @@ "specification": "https://www.w3.org/TR/css-color-4/#funcdef-lch", "stage": 2, "browser_support": {}, + "web-feature": "lab", "docs": { "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lch" }, @@ -913,8 +924,8 @@ }, "example": "div {\n overflow-block: scroll;\n}", "mdn_path": [ - "css.properties['overflow-block']", - "css.properties['overflow-inline']" + "css.properties.overflow-block", + "css.properties.overflow-inline" ], "polyfills": [ { @@ -935,8 +946,8 @@ }, "example": "div {\n overscroll-behavior-block: scroll;\n}", "mdn_path": [ - "css.properties['overscroll-behavior-block']", - "css.properties['overscroll-behavior-inline']" + "css.properties.overscroll-behavior-block", + "css.properties.overscroll-behavior-inline" ], "polyfills": [ { @@ -957,61 +968,61 @@ }, "example": "span:first-child {\n margin-inline-start: 10px;\n}", "mdn_path": [ - "css.properties['block-size']", - "css.properties['border-block']", - "css.properties['border-block-color']", - "css.properties['border-block-end']", - "css.properties['border-block-end-color']", - "css.properties['border-block-end-style']", - "css.properties['border-block-end-width']", - "css.properties['border-block-start']", - "css.properties['border-block-start-color']", - "css.properties['border-block-start-style']", - "css.properties['border-block-start-width']", - "css.properties['border-block-style']", - "css.properties['border-block-width']", - "css.properties['border-end-end-radius']", - "css.properties['border-end-start-radius']", - "css.properties['border-inline']", - "css.properties['border-inline-color']", - "css.properties['border-inline-end']", - "css.properties['border-inline-end-color']", - "css.properties['border-inline-end-style']", - "css.properties['border-inline-end-width']", - "css.properties['border-inline-start']", - "css.properties['border-inline-start-color']", - "css.properties['border-inline-start-style']", - "css.properties['border-inline-start-width']", - "css.properties['border-inline-style']", - "css.properties['border-inline-width']", - "css.properties['border-start-end-radius']", - "css.properties['border-start-start-radius']", - "css.properties['inline-size']", - "css.properties['inset']", - "css.properties['inset-block']", - "css.properties['inset-block-end']", - "css.properties['inset-block-start']", - "css.properties['inset-inline']", - "css.properties['inset-inline-end']", - "css.properties['inset-inline-start']", - "css.properties['margin-block']", - "css.properties['margin-block-end']", - "css.properties['margin-block-start']", - "css.properties['margin-inline']", - "css.properties['margin-inline-end']", - "css.properties['margin-inline-start']", - "css.properties['max-block-size']", - "css.properties['max-inline-size']", - "css.properties['min-block-size']", - "css.properties['min-inline-size']", - "css.properties['padding-block']", - "css.properties['padding-block-end']", - "css.properties['padding-block-start']", - "css.properties['padding-inline']", - "css.properties['padding-inline-end']", - "css.properties['padding-inline-start']", - "css.properties['text-align'].start", - "css.properties['text-align'].end" + "css.properties.block-size", + "css.properties.border-block", + "css.properties.border-block-color", + "css.properties.border-block-end", + "css.properties.border-block-end-color", + "css.properties.border-block-end-style", + "css.properties.border-block-end-width", + "css.properties.border-block-start", + "css.properties.border-block-start-color", + "css.properties.border-block-start-style", + "css.properties.border-block-start-width", + "css.properties.border-block-style", + "css.properties.border-block-width", + "css.properties.border-end-end-radius", + "css.properties.border-end-start-radius", + "css.properties.border-inline", + "css.properties.border-inline-color", + "css.properties.border-inline-end", + "css.properties.border-inline-end-color", + "css.properties.border-inline-end-style", + "css.properties.border-inline-end-width", + "css.properties.border-inline-start", + "css.properties.border-inline-start-color", + "css.properties.border-inline-start-style", + "css.properties.border-inline-start-width", + "css.properties.border-inline-style", + "css.properties.border-inline-width", + "css.properties.border-start-end-radius", + "css.properties.border-start-start-radius", + "css.properties.inline-size", + "css.properties.inset", + "css.properties.inset-block", + "css.properties.inset-block-end", + "css.properties.inset-block-start", + "css.properties.inset-inline", + "css.properties.inset-inline-end", + "css.properties.inset-inline-start", + "css.properties.margin-block", + "css.properties.margin-block-end", + "css.properties.margin-block-start", + "css.properties.margin-inline", + "css.properties.margin-inline-end", + "css.properties.margin-inline-start", + "css.properties.max-block-size", + "css.properties.max-inline-size", + "css.properties.min-block-size", + "css.properties.min-inline-size", + "css.properties.padding-block", + "css.properties.padding-block-end", + "css.properties.padding-block-start", + "css.properties.padding-inline", + "css.properties.padding-inline-end", + "css.properties.padding-inline-start", + "css.properties.text-align.start", + "css.properties.text-align.end" ], "polyfills": [ { @@ -1032,8 +1043,8 @@ }, "example": "area {\n resize: inline;\n}", "mdn_path": [ - "css.properties['resize'].block", - "css.properties['resize'].inline" + "css.properties.resize.block", + "css.properties.resize.inline" ], "polyfills": [ { @@ -1049,6 +1060,7 @@ "specification": "https://www.w3.org/TR/css-values-4/#viewport-relative-units", "stage": 2, "browser_support": {}, + "web-feature": "viewport-relative-unit-variants", "docs": { "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/length#vb" }, @@ -1075,10 +1087,6 @@ "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:is" }, "example": "p:matches(:first-child, .special) {\n margin-top: 1em;\n}", - "mdn_path": [ - "css.selectors.is", - "css.selectors.is.forgiving_selector_list" - ], "polyfills": [ { "type": "PostCSS Plugin", @@ -1154,6 +1162,7 @@ "specification": "https://www.w3.org/TR/mediaqueries-4/#range-context", "stage": 3, "browser_support": {}, + "web-feature": "media-query-range-syntax", "docs": { "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries#Syntax_improvements_in_Level_4" }, @@ -1192,6 +1201,7 @@ "specification": "https://www.w3.org/TR/css-nesting-1/", "stage": 2, "browser_support": {}, + "web-feature": "nesting", "docs": { "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector" }, @@ -1229,6 +1239,7 @@ "description": "Functions that allow colors to be expressed in OKLab and OKLCH.", "specification": "https://www.w3.org/TR/css-color-4/#specifying-oklab-oklch", "stage": 2, + "web-feature": "oklab", "browser_support": {}, "docs": { "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklab" @@ -1297,8 +1308,8 @@ }, "example": "p {\n overflow-wrap: break-word;\n}", "mdn_path": [ - "css.properties['overflow-wrap']", - "css.properties['overflow-wrap']['break-word']" + "css.properties.overflow-wrap", + "css.properties.overflow-wrap.break-word" ], "polyfills": [ { @@ -1318,7 +1329,7 @@ "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior" }, "example": ".messages {\n height: 220px;\n overflow: auto;\n overscroll-behavior-y: contain;\n}\n\nbody {\n margin: 0;\n overscroll-behavior: none;\n}", - "mdn_path": "css.properties['overscroll-behavior']" + "mdn_path": "css.properties.overscroll-behavior" }, { "id": "place-properties", @@ -1332,9 +1343,9 @@ }, "example": ".example {\n place-content: flex-end;\n place-items: center / space-between;\n place-self: flex-start / center;\n}", "mdn_path": [ - "css.properties['place-content']", - "css.properties['place-content'].flex_context", - "css.properties['place-content'].grid_context" + "css.properties.place-content", + "css.properties.place-content.flex_context", + "css.properties.place-content.grid_context" ], "polyfills": [ { @@ -1354,7 +1365,7 @@ "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme" }, "example": "body {\n background-color: white;\n color: black;\n}\n\n@media (prefers-color-scheme: dark) {\n body {\n background-color: black;\n color: white;\n }\n}", - "mdn_path": "css['at-rules'].media['prefers-color-scheme']", + "mdn_path": "css.at-rules.media.prefers-color-scheme", "polyfills": [ { "type": "JavaScript Library", @@ -1377,7 +1388,7 @@ "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion" }, "example": ".animation {\n animation: vibrate 0.3s linear infinite both; \n}\n\n@media (prefers-reduced-motion: reduce) {\n .animation {\n animation: none;\n }\n}", - "mdn_path": "css['at-rules'].media['prefers-reduced-motion']" + "mdn_path": "css.at-rules.media.prefers-reduced-motion" }, { "id": "read-only-write-pseudo-class", @@ -1386,6 +1397,7 @@ "specification": "https://www.w3.org/TR/selectors-4/#rw-pseudos", "stage": 2, "browser_support": {}, + "web-feature": "read-write-pseudos", "docs": { "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only" }, @@ -1418,6 +1430,7 @@ "specification": "https://www.w3.org/TR/css-color-5/#relative-colors", "stage": 2, "browser_support": {}, + "web-feature": "relative-color", "mdn_path": [ "css.types.color.color.relative_syntax", "css.types.color.color.mixed_type_parameters", @@ -1436,7 +1449,9 @@ "css.types.color.rgb.relative_syntax", "css.types.color.rgb.mixed_type_parameters" ], - "docs": {}, + "docs": { + "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors" + }, "example": "p {\n color: lch(from peru calc(l * 0.8) c h);\n}", "polyfills": [ { @@ -1531,7 +1546,7 @@ "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#Syntax" }, "example": "body {\n font-family: system-ui;\n}", - "mdn_path": "css.properties['font-family'].system-ui", + "mdn_path": "css.properties.font-family.system-ui", "polyfills": [ { "type": "PostCSS Plugin", @@ -1626,6 +1641,7 @@ "specification": "https://www.w3.org/TR/selectors-4/#where-pseudo", "stage": 2, "browser_support": {}, + "web-feature": "where", "docs": { "mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:where" }, diff --git a/package-lock.json b/package-lock.json index 6a621fa..3ea7a06 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,7 @@ "license": "CC0-1.0", "devDependencies": { "@mdn/browser-compat-data": "^5.5.16", - "browserslist": "^4.22.3", + "browserslist": "^4.23.0", "glob": "^10.3.7", "lodash.get": "^4.4.2", "postcss": "^8.4.36", @@ -28,17 +28,18 @@ "postcss-preset-env": "^9.5.2", "semver": "^7.6.0", "stylelint": "^16.2.1", - "stylelint-config-standard": "^36.0.0" + "stylelint-config-standard": "^36.0.0", + "web-features": "^0.6.1" } }, "node_modules/@babel/code-frame": { - "version": "7.23.5", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz", - "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==", + "version": "7.24.2", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz", + "integrity": "sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==", "dev": true, "dependencies": { - "@babel/highlight": "^7.23.4", - "chalk": "^2.4.2" + "@babel/highlight": "^7.24.2", + "picocolors": "^1.0.0" }, "engines": { "node": ">=6.9.0" @@ -54,14 +55,15 @@ } }, "node_modules/@babel/highlight": { - "version": "7.23.4", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz", - "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==", + "version": "7.24.2", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.2.tgz", + "integrity": "sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==", "dev": true, "dependencies": { "@babel/helper-validator-identifier": "^7.22.20", "chalk": "^2.4.2", - "js-tokens": "^4.0.0" + "js-tokens": "^4.0.0", + "picocolors": "^1.0.0" }, "engines": { "node": ">=6.9.0" @@ -1047,6 +1049,16 @@ "postcss": "^8.4" } }, + "node_modules/@dual-bundle/import-meta-resolve": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@dual-bundle/import-meta-resolve/-/import-meta-resolve-4.0.0.tgz", + "integrity": "sha512-ZKXyJeFAzcpKM2kk8ipoGIPUqx9BX52omTGnfwjJvxOCaZTM2wtDK7zN0aIgPRbT9XYAlha0HtmZ+XKteuh0Gw==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/@isaacs/cliui": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", @@ -1205,9 +1217,9 @@ } }, "node_modules/autoprefixer": { - "version": "10.4.18", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.18.tgz", - "integrity": "sha512-1DKbDfsr6KUElM6wg+0zRNkB/Q7WcKYAaK+pzXn+Xqmszm/5Xa9coeNdtP88Vi+dPzZnMjhge8GIV49ZQkDa+g==", + "version": "10.4.19", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz", + "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==", "dev": true, "funding": [ { @@ -1225,7 +1237,7 @@ ], "dependencies": { "browserslist": "^4.23.0", - "caniuse-lite": "^1.0.30001591", + "caniuse-lite": "^1.0.30001599", "fraction.js": "^4.3.7", "normalize-range": "^0.1.2", "picocolors": "^1.0.0", @@ -1322,9 +1334,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001599", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001599.tgz", - "integrity": "sha512-LRAQHZ4yT1+f9LemSMeqdMpMxZcc4RMWdj4tiFe3G8tNkWK+E58g+/tzotb5cU6TbcVJLr4fySiAW7XmxQvZQA==", + "version": "1.0.30001600", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001600.tgz", + "integrity": "sha512-+2S9/2JFhYmYaDpZvo0lKkfvuKIglrx68MwOBqMGHhQsNkLjB5xtc/TGoEPs+MxjSyN/72qer2g97nzR641mOQ==", "dev": true, "funding": [ { @@ -1723,9 +1735,9 @@ "dev": true }, "node_modules/electron-to-chromium": { - "version": "1.4.708", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.708.tgz", - "integrity": "sha512-iWgEEvREL4GTXXHKohhh33+6Y8XkPI5eHihDmm8zUk5Zo7HICEW+wI/j5kJ2tbuNUCXJ/sNXa03ajW635DiJXA==", + "version": "1.4.715", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.715.tgz", + "integrity": "sha512-XzWNH4ZSa9BwVUQSDorPWAUQ5WGuYz7zJUNpNif40zFCiCl20t8zgylmreNmn26h5kiyw2lg7RfTmeMBsDklqg==", "dev": true }, "node_modules/emoji-regex": { @@ -2262,9 +2274,9 @@ } }, "node_modules/known-css-properties": { - "version": "0.29.0", - "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.29.0.tgz", - "integrity": "sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==", + "version": "0.30.0", + "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.30.0.tgz", + "integrity": "sha512-VSWXYUnsPu9+WYKkfmJyLKtIvaRJi1kXUqVmBACORXZQxT5oZDsoZ2vQP+bQFDnWtpI/4eq3MLoRMjI2fnLzTQ==", "dev": true }, "node_modules/lilconfig": { @@ -2523,9 +2535,9 @@ } }, "node_modules/postcss": { - "version": "8.4.36", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.36.tgz", - "integrity": "sha512-/n7eumA6ZjFHAsbX30yhHup/IMkOmlmvtEi7P+6RMYf+bGJSUHc3geH4a0NSZxAz/RJfiS9tooCTs9LAVYUZKw==", + "version": "8.4.38", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", + "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", "dev": true, "funding": [ { @@ -2544,7 +2556,7 @@ "dependencies": { "nanoid": "^3.3.7", "picocolors": "^1.0.0", - "source-map-js": "^1.1.0" + "source-map-js": "^1.2.0" }, "engines": { "node": "^10 || ^12 || >=14" @@ -3603,9 +3615,9 @@ "dev": true }, "node_modules/source-map-js": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.1.0.tgz", - "integrity": "sha512-9vC2SfsJzlej6MAaMPLu8HiBSHGdRAJ9hVFYN1ibZoNkeanmDmLUcIrj6G9DGL7XMJ54AKg/G75akXl1/izTOw==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", + "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", "dev": true, "engines": { "node": ">=0.10.0" @@ -3708,15 +3720,16 @@ } }, "node_modules/stylelint": { - "version": "16.2.1", - "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.2.1.tgz", - "integrity": "sha512-SfIMGFK+4n7XVAyv50CpVfcGYWG4v41y6xG7PqOgQSY8M/PgdK0SQbjWFblxjJZlN9jNq879mB4BCZHJRIJ1hA==", + "version": "16.3.0", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.3.0.tgz", + "integrity": "sha512-hqC6xNTbQ5HRGQXfIW4HwXcx09raIFz4W4XFbraeqWqYRVVY/ibYvI0dsu0ORMQY8re2bpDdCAeIa2cm+QJ4Sw==", "dev": true, "dependencies": { - "@csstools/css-parser-algorithms": "^2.5.0", - "@csstools/css-tokenizer": "^2.2.3", - "@csstools/media-query-list-parser": "^2.1.7", - "@csstools/selector-specificity": "^3.0.1", + "@csstools/css-parser-algorithms": "^2.6.1", + "@csstools/css-tokenizer": "^2.2.4", + "@csstools/media-query-list-parser": "^2.1.9", + "@csstools/selector-specificity": "^3.0.2", + "@dual-bundle/import-meta-resolve": "^4.0.0", "balanced-match": "^2.0.0", "colord": "^2.9.3", "cosmiconfig": "^9.0.0", @@ -3730,19 +3743,19 @@ "globby": "^11.1.0", "globjoin": "^0.1.4", "html-tags": "^3.3.1", - "ignore": "^5.3.0", + "ignore": "^5.3.1", "imurmurhash": "^0.1.4", "is-plain-object": "^5.0.0", - "known-css-properties": "^0.29.0", + "known-css-properties": "^0.30.0", "mathml-tag-names": "^2.1.3", - "meow": "^13.1.0", + "meow": "^13.2.0", "micromatch": "^4.0.5", "normalize-path": "^3.0.0", "picocolors": "^1.0.0", - "postcss": "^8.4.33", + "postcss": "^8.4.38", "postcss-resolve-nested-selector": "^0.1.1", "postcss-safe-parser": "^7.0.0", - "postcss-selector-parser": "^6.0.15", + "postcss-selector-parser": "^6.0.16", "postcss-value-parser": "^4.2.0", "resolve-from": "^5.0.0", "string-width": "^4.2.3", @@ -4059,6 +4072,12 @@ "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", "dev": true }, + "node_modules/web-features": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/web-features/-/web-features-0.6.1.tgz", + "integrity": "sha512-oSxcXOxF4xGN1Jh2pfhDoHj3Fg0+Nj/FREnDX8y9UX4m5C7Qi/wwl0MD9ZV88VlZsVbnNPdlLMf8uI60AENdtQ==", + "dev": true + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/package.json b/package.json index 8509f63..037b313 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ }, "devDependencies": { "@mdn/browser-compat-data": "^5.5.16", - "browserslist": "^4.22.3", + "browserslist": "^4.23.0", "glob": "^10.3.7", "lodash.get": "^4.4.2", "postcss": "^8.4.36", @@ -56,7 +56,8 @@ "postcss-preset-env": "^9.5.2", "semver": "^7.6.0", "stylelint": "^16.2.1", - "stylelint-config-standard": "^36.0.0" + "stylelint-config-standard": "^36.0.0", + "web-features": "^0.6.1" }, "stylelint": { "extends": "stylelint-config-standard", diff --git a/tasks/check-web-features.mjs b/tasks/check-web-features.mjs new file mode 100644 index 0000000..3408ef6 --- /dev/null +++ b/tasks/check-web-features.mjs @@ -0,0 +1,40 @@ +import fs from 'fs/promises'; +import webFeatures from 'web-features'; + +const cssdbJsonURL = new URL('../cssdb.settings.json', import.meta.url); + +const features = await fs.readFile(cssdbJsonURL, 'utf8').then(JSON.parse); + +let hasBadLinks = false; +let hasMissingDocs = false; + +for (const feature of features) { + if (feature['web-feature']) { + continue; + } + + if (!feature.mdn_path) { + continue; + } + + const mdn_paths = new Set(Array.isArray(feature.mdn_path) ? feature.mdn_path : [feature.mdn_path]); + + for (const webFeatureName in webFeatures) { + const webFeature = webFeatures[webFeatureName]; + if (!webFeature.compat_features) { + continue; + } + + for (const compatFeature of webFeature.compat_features) { + if (mdn_paths.has(compatFeature)) { + console.log(`${feature.id}: found ${compatFeature} in ${webFeatureName}`); + } + } + } +} + +if (hasBadLinks || hasMissingDocs) { + process.exit(1); +} + +process.exit(0); diff --git a/tasks/populate-db.mjs b/tasks/populate-db.mjs index d1550a7..d4e567a 100644 --- a/tasks/populate-db.mjs +++ b/tasks/populate-db.mjs @@ -4,11 +4,14 @@ import fs from 'fs/promises'; import supportedBrowsersFromMdn from '../utils/supported-browsers-from-mdn.mjs'; import { baselineData } from '../utils/baseline-data.mjs'; import applyBrowserOverrides from '../utils/apply-browser-overrides.mjs'; +import { applyWebFeaturesData } from '../utils/web-features-data.mjs'; const __dirname = new URL('.', import.meta.url).pathname; const settingsPath = path.resolve(__dirname, '../cssdb.settings.json'); const cssdb = await fs.readFile(settingsPath, 'utf8').then(JSON.parse); +cssdb.forEach(applyWebFeaturesData); + cssdb.forEach(feature => { feature.browser_support = {}; let browser_support = {}; diff --git a/utils/web-features-data.mjs b/utils/web-features-data.mjs new file mode 100644 index 0000000..d707ce9 --- /dev/null +++ b/utils/web-features-data.mjs @@ -0,0 +1,25 @@ +import webFeatures from 'web-features'; + +export function applyWebFeaturesData(feature) { + const webFeatureName = feature['web-feature']; + if (!webFeatureName) { + return; + } + + const webFeature = webFeatures[webFeatureName]; + if (!webFeature) { + throw new Error(`Unknown web feature: ${webFeatureName}`); + } + + if (!feature.mdn_path && webFeature.compat_features) { + feature.mdn_path = webFeature.compat_features; + } + + if (!feature.title && webFeature.name) { + feature.title = webFeature.name; + } + + if (!feature.specification && webFeature.spec) { + feature.specification = webFeature.spec; + } +}