Skip to content

fix: expand supported types in baseline-data#74

Merged
nzakas merged 8 commits into
eslint:mainfrom
rviscomi:color-mix
Mar 17, 2025
Merged

fix: expand supported types in baseline-data#74
nzakas merged 8 commits into
eslint:mainfrom
rviscomi:color-mix

Conversation

@rviscomi

@rviscomi rviscomi commented Feb 26, 2025

Copy link
Copy Markdown
Contributor

Prerequisites checklist

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?

@eslint-github-bot eslint-github-bot Bot added the bug Something isn't working label Feb 26, 2025
@fasttime fasttime added this to Triage Feb 27, 2025
@github-project-automation github-project-automation Bot moved this to Needs Triage in Triage Feb 27, 2025
nzakas
nzakas reviewed Feb 27, 2025
View reviewed changes

@nzakas nzakas left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment thread src/data/baseline-data.js Outdated
Comment thread src/data/baseline-data.js Outdated
Comment thread src/data/baseline-data.js Outdated
Comment thread src/data/baseline-data.js Outdated
@nzakas nzakas moved this from Needs Triage to Implementing in Triage Feb 27, 2025
@rviscomi

rviscomi commented Feb 28, 2025 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

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

nzakas commented Mar 3, 2025

Copy link
Copy Markdown
Member

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

@rviscomi

rviscomi commented Mar 3, 2025 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

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

nzakas commented Mar 3, 2025

Copy link
Copy Markdown
Member

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

@nzakas

nzakas commented Mar 17, 2025

Copy link
Copy Markdown
Member

@rviscomi can you rebase on top of main again?

@rviscomi

rviscomi commented Mar 17, 2025

Copy link
Copy Markdown
Contributor Author

Updated 👍

nzakas
nzakas approved these changes Mar 17, 2025
View reviewed changes

@nzakas nzakas left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Thanks!

@nzakas nzakas merged commit 96c3f95 into eslint:main Mar 17, 2025
@github-project-automation github-project-automation Bot moved this from Implementing to Complete in Triage Mar 17, 2025
@github-actions github-actions Bot mentioned this pull request Mar 17, 2025
Merged
@rviscomi rviscomi deleted the color-mix branch March 17, 2025 16:12
@Mouvedia

Mouvedia commented Jun 28, 2025 •
edited
Loading

Copy link
Copy Markdown

We can use the mdn-data package to get the list of functions.

I would recommend using css-functions-list as your basis.
It's not accurate for vendor-prefixed functions—it adds them all regardless whether they existed or not—but for the rest it's good.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@nzakas nzakas nzakas approved these changes

Assignees

No one assigned

Labels

bug Something isn't working

Projects

Triage
Status: Complete

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Bug: generate-baseline misses many functions

4 participants

@rviscomi @nzakas @Mouvedia @fasttime