fix: expand supported types in baseline-data

[rviscomi]

Prerequisites checklist

• I have read the contributing guidelines.

What is the purpose of this pull request?

Expand support for more CSS "types" like color-mix, conic-gradient, and ~100 more

What changes did you make? (Give an overview)

• adjusted the cssTypePattern regex
• added a test for color-mix

Related Issues

fixes #72

Is there anything you'd like reviewers to focus on?

[nzakas]

Thanks for looking into this. The changes here are resulting in property values being included in the types map. I've highlighted several of them in the diff.

For instance, there are four values of calc-constant included:
https://gist.github.com/nzakas/5bbc9eab6900d1e401208fa7bcf49500#file-css-web-features-json-L1326-L1332

Part of the reason the regex was so strict was to filter these out. Please take a look.

[rviscomi]

Yeah this is tricky. According to BCD, the keys consumed here are expected to contain "value types for rule values", which can include lots of things.

However the require-baseline rule expects these to all be functions.

I can see a few paths forward:

1. keep the limited list of functions (status quo)
2. expand the list of functions (this PR)
3. look at each type parsed out of the BCD key and keep the ones that are referenced like functions in the description, ie ${type}()
4. compare each type with an allowlist of known functions

Option 1 has a number of false negatives, eg color-mix, as well as false positives: length-percentage, transform-function, basic-shape, etc.

Option 2 introduces more true positives at the expense of more false positives, eg NaN. This could be mitigated with a no-invalid-function rule, but at that point we might as well go with option 4.

Option 3 practically eliminates the false positives, but it's brittle and introduces some false negatives. Some functions like rotate and scale are referenced as "rotating" and "scaling" so they'd be omitted.

See the results of option 3

// 53 out of 106 known functions
export const types = new Map([
	["abs", 0],
	["sign", 0],
	["attr", 10],
	["calc", 10],
	["calc-size", 0],
	["color", 5],
	["color-mix", 5],
	["conic-gradient", 10],
	["repeating-conic-gradient", 10],
	["counter", 10],
	["counters", 10],
	["cross-fade", 0],
	["cubic-bezier", 10],
	["element", 0],
	["exp", 5],
	["hypot", 5],
	["log", 5],
	["pow", 5],
	["sqrt", 5],
	["blur", 10],
	["drop-shadow", 10],
	["linear-gradient", 10],
	["radial-gradient", 10],
	["hsl", 5],
	["hwb", 10],
	["image-set", 5],
	["lab", 5],
	["lch", 5],
	["light-dark", 5],
	["clamp", 10],
	["max", 10],
	["min", 10],
	["oklab", 5],
	["oklch", 5],
	["paint", 0],
	["path", 0],
	["rgb", 10],
	["mod", 5],
	["rem", 5],
	["round", 5],
	["circle", 10],
	["ellipse", 10],
	["inset", 10],
	["polygon", 10],
	["rect", 10],
	["xywh", 10],
	["steps", 10],
	["acos", 5],
	["asin", 5],
	["atan", 5],
	["cos", 5],
	["sin", 5],
	["tan", 5],
]);

Option 4 should result in the optimal list of functions, if such an allowlist is available and you're comfortable with the added dependency. We basically want this MDN doc but in a consumable, evergreen format.

Function names extracted from MDN, for reference

[
    "translateX",
    "translateY",
    "translateZ",
    "translate",
    "translate3d",
    "rotateX",
    "rotateY",
    "rotateZ",
    "rotate",
    "rotate3d",
    "scaleX",
    "scaleY",
    "scaleZ",
    "scale",
    "scale3d",
    "skewX",
    "skewY",
    "skew",
    "matrix",
    "matrix3d",
    "perspective",
    "calc",
    "calc-size",
    "min",
    "max",
    "clamp",
    "round",
    "mod",
    "rem",
    "sin",
    "cos",
    "tan",
    "asin",
    "acos",
    "atan",
    "atan2",
    "pow",
    "sqrt",
    "hypot",
    "log",
    "exp",
    "abs",
    "sign",
    "blur",
    "brightness",
    "contrast",
    "drop-shadow",
    "grayscale",
    "hue-rotate",
    "invert",
    "opacity",
    "saturate",
    "sepia",
    "rgb",
    "hsl",
    "hwb",
    "lch",
    "oklch",
    "lab",
    "oklab",
    "color",
    "color-mix",
    "device-cmyk", // not supported in any browser
    "light-dark",
    "linear-gradient",
    "radial-gradient",
    "conic-gradient",
    "repeating-linear-gradient",
    "repeating-radial-gradient",
    "repeating-conic-gradient",
    "image",
    "image-set",
    "cross-fade",
    "element",
    "paint",
    "counter",
    "counters",
    "symbols",
    "circle",
    "ellipse",
    "inset",
    "rect",
    "xywh",
    "polygon",
    "path",
    "shape",
    "ray",
    "attr",
    "env",
    "url",
    "var",
    "fit-content",
    "minmax",
    "repeat",
    "stylistic",
    "styleset",
    "character-variant",
    "swash",
    "ornaments",
    "annotation",
    "linear",
    "cubic-bezier",
    "steps",
    "scroll",
    "view",
    "anchor",
    "anchor-size"
]

Let me know how you'd like to proceed.

[nzakas]

I think option 4 is the best option. We can use the mdn-data package to get the list of functions.

[rviscomi]

Added the mdn-data dep. Please take another look.

A few things to be aware of:

1. Out of the 102 functions, we're able to match up 87 of them with their BCD keys. I can investigate the remainder if useful.

2. There's a deprecation notice in their README:

   We are in the process of deprecating the mdn/data package in favor of w3c/webref.

   However, I didn't see a straightforward way to list all CSS functions using the @webref/css package, so it might be worth filing a feature request there for future compatibility.

3. url() support was dropped, apparently due to it not being included in mdn-data's list of CSS functions. This seems like an oversight, but a bug report might not go anywhere due to the project being deprecated.

[nzakas]

Let's see what they say:
https://github.com/orgs/mdn/discussions/786