Bug: Incorrect CSS property names being checked by the require-baseline rule

[captainbrosset]

Environment

ESLint version: 9.22.0
@eslint/css version: 0.4.0
Node version: 22.13.1
npm version: 11.1.0
Operating System: Windows 11

Which language are you using?

stylesheet

What did you do?

Configuration

import css from "@eslint/css";

export default [
  {
    files: ["**/*.css"],
    language: "css/css",
    ...css.configs.recommended,
  },
];

Some snippets of code from the CSS file:

.social-links a {
  width: 2rem;
  height: 2rem;
  display: block;
  background-size: 75%;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
  color: transparent;
  font-size: 0;
  text-decoration: none;
  border-radius: 0.25rem;
  mix-blend-mode: multiply;
}

code {
  background: var(--inline-code);
  color: var(--text-on-inline-code);
  padding: 0.3rem;
  border-radius: 2px;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

pre {
  overflow: auto;
  max-height: 50svh;
  width: 100%;
  white-space: normal;
}

What did you expect to happen?

No errors about overflow.

What actually happened?

Here are a few errors eslint generated from the code:

  202:3   error  Property 'overflow' is not a widely available baseline feature              css/require-baseline
  327:3   error  Property 'box-decoration-break' is not a widely available baseline feature  css/require-baseline
  335:3   error  Property 'overflow' is not a widely available baseline feature              css/require-baseline

overflow is a widely available CSS property. It is tracked on the web-features repo here: https://github.com/web-platform-dx/web-features/blob/main/features/overflow-shorthand.yml

The reported errors seem to come from this web-features entry instead: https://github.com/web-platform-dx/web-features/blob/main/features/overflow.yml, which is about the overflow media queries (e.g. @media (overflow-block: scroll)), and which is Baseline Newly available (not Widely available yet).

Link to Minimal Reproducible Example

https://github.com/captainbrosset/patrickbrosset.com/blob/main/content/assets/common.css

Participation

• I am willing to submit a pull request for this issue.

Additional comments

It seems like the require-baseline rule uses the web-features IDs as CSS property names.
For example: the overflow.yml file contains a feature which ID is overflow. But this ID does not necessarily match the CSS property.

It seems to me that eslint should instead use the BCD keys in each web-features entry to know what a given entry is about.
For example, if you look at the computed (aka the dist file) version of the overflow-shorthand.yml file: https://github.com/web-platform-dx/web-features/blob/main/features/overflow-shorthand.yml.dist, you can see that this feature maps to BCD keys such as css.properties.overflow, css.properties.overflow-x, etc.

[nzakas]

We are using the BCD keys, the problem is that apparently web-features is omitting all but the topmost baseline status in their file:
https://github.com/web-platform-dx/web-features/blob/main/features/overflow-shorthand.yml.dist

Because the top-line is baseline: low, that's what they flag all the features as in this file. It appear that they don't honor any of the commented out data in that file.

I've opened an issue: web-platform-dx/web-features#2762

[xbinaryx]

According to webstatus overflow is not widely available. It becomes widely available tomorrow.

[nzakas]

@xbinaryx it looks like they're using the same package with the faulty data in it.

[rviscomi]

I think the solution is to use the compute-baseline helper package to get the Baseline status for individual compat keys. This appears to address @captainbrosset's concerns about overflow:

Now, only the clip property value is assessed as newly available (5), while the rest are considered widely available (10). This corresponds to the statuses in overflow-shorthand.dist.yml.

I've drafted #82 with this fix if you'd like to review all of the changes to baseline-data.js.