diff --git a/src/data/baseline-data.js b/src/data/baseline-data.js index e88f5c4e..740bd438 100644 --- a/src/data/baseline-data.js +++ b/src/data/baseline-data.js @@ -582,7 +582,7 @@ export const mediaConditions = new Map([ ["horizontal-viewport-segments", "0:"], ["vertical-viewport-segments", "0:"], ]); -export const types = new Map([ +export const functions = new Map([ ["abs", "5:2025"], ["sign", "5:2025"], ["anchor", "0:"], @@ -1597,6 +1597,21 @@ export const propertyValues = new Map([ ["fixed", "0:"], ]), ], + [ + "filter", + new Map([ + ["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"], + ]), + ], ["align-content", new Map([["normal", "10:2015"]])], [ "flex-basis", diff --git a/src/rules/use-baseline.js b/src/rules/use-baseline.js index 1274fee2..65b2a8fd 100644 --- a/src/rules/use-baseline.js +++ b/src/rules/use-baseline.js @@ -14,7 +14,7 @@ import { propertyValues, atRules, mediaConditions, - types, + functions, selectors, } from "../data/baseline-data.js"; import { namedColors } from "../data/colors.js"; @@ -26,7 +26,7 @@ import { namedColors } from "../data/colors.js"; /** * @import { CSSRuleDefinition } from "../types.js" * @import { Identifier, FunctionNodePlain } from "@eslint/css-tree" - * @typedef {"notBaselineProperty" | "notBaselinePropertyValue" | "notBaselineAtRule" | "notBaselineType" | "notBaselineMediaCondition" | "notBaselineSelector"} UseBaselineMessageIds + * @typedef {"notBaselineProperty" | "notBaselinePropertyValue" | "notBaselineAtRule" | "notBaselineFunction" | "notBaselineMediaCondition" | "notBaselineSelector"} UseBaselineMessageIds * @typedef {[{ * available?: "widely" | "newly" | number, * allowAtRules?: string[], @@ -475,8 +475,8 @@ export default { "Value '{{value}}' of property '{{property}}' is not a {{availability}} available baseline feature.", notBaselineAtRule: "At-rule '@{{atRule}}' is not a {{availability}} available baseline feature.", - notBaselineType: - "Type '{{type}}' is not a {{availability}} available baseline feature.", + notBaselineFunction: + "Function '{{function}}' is not a {{availability}} available baseline feature.", notBaselineMediaCondition: "Media condition '{{condition}}' is not a {{availability}} available baseline feature.", notBaselineSelector: @@ -537,7 +537,7 @@ export default { * @returns {void} **/ function checkPropertyValueFunction(child) { - const featureStatus = types.get(child.name); + const featureStatus = functions.get(child.name); // if we don't know of any possible property values, just skip it if (featureStatus === undefined) { @@ -547,9 +547,9 @@ export default { if (!baselineAvailability.isSupported(featureStatus)) { context.report({ loc: child.loc, - messageId: "notBaselineType", + messageId: "notBaselineFunction", data: { - type: child.name, + function: child.name, availability: String(baselineAvailability.availability), }, }); diff --git a/tests/rules/use-baseline.test.js b/tests/rules/use-baseline.test.js index d5eb9358..351fbfd3 100644 --- a/tests/rules/use-baseline.test.js +++ b/tests/rules/use-baseline.test.js @@ -308,9 +308,9 @@ ruleTester.run("use-baseline", rule, { code: "@supports (accent-color: auto) { a { accent-color: abs(20% - 10px); } }", errors: [ { - messageId: "notBaselineType", + messageId: "notBaselineFunction", data: { - type: "abs", + function: "abs", availability: "widely", }, line: 1, @@ -340,9 +340,9 @@ ruleTester.run("use-baseline", rule, { code: "a { width: abs(20% - 100px); }", errors: [ { - messageId: "notBaselineType", + messageId: "notBaselineFunction", data: { - type: "abs", + function: "abs", availability: "widely", }, line: 1, @@ -356,9 +356,9 @@ ruleTester.run("use-baseline", rule, { code: "a { color: color-mix(in hsl, hsl(200 50 80), coral 80%); }", errors: [ { - messageId: "notBaselineType", + messageId: "notBaselineFunction", data: { - type: "color-mix", + function: "color-mix", availability: "widely", }, line: 1, diff --git a/tools/generate-baseline.js b/tools/generate-baseline.js index fd23f2b4..c2b29081 100644 --- a/tools/generate-baseline.js +++ b/tools/generate-baseline.js @@ -109,7 +109,7 @@ function extractCSSFeatures(features) { const propertyValues = {}; const atRules = {}; const mediaConditions = {}; - const types = {}; + const functions = {}; const selectors = {}; for (const [key, featureId] of Object.entries(features)) { @@ -152,13 +152,13 @@ function extractCSSFeatures(features) { continue; } - // types + // functions if ((match = cssTypePattern.exec(key)) !== null) { const type = match.groups.type; if (!(`${type}()` in mdnData.css.functions)) { continue; } - types[type] = mapFeatureStatus(status); + functions[type] = mapFeatureStatus(status); continue; } @@ -174,7 +174,7 @@ function extractCSSFeatures(features) { propertyValues, atRules, mediaConditions, - types, + functions, selectors, }; } @@ -210,7 +210,7 @@ export const BASELINE_FALSE = ${BASELINE_FALSE}; export const properties = new Map(${JSON.stringify(Object.entries(cssFeatures.properties), null, "\t")}); export const atRules = new Map(${JSON.stringify(Object.entries(cssFeatures.atRules), null, "\t")}); export const mediaConditions = new Map(${JSON.stringify(Object.entries(cssFeatures.mediaConditions), null, "\t")}); -export const types = new Map(${JSON.stringify(Object.entries(cssFeatures.types), null, "\t")}); +export const functions = new Map(${JSON.stringify(Object.entries(cssFeatures.functions), null, "\t")}); export const selectors = new Map(${JSON.stringify(Object.entries(cssFeatures.selectors), null, "\t")}); export const propertyValues = new Map([${Object.entries( cssFeatures.propertyValues,