Bug: relative-font-units does not handle inherit

[sdavids]

Environment

ESLint version: 9.28.0
@eslint/css version: 0.9.0
Node version: 22.16.0
npm version: 11.4.2
Operating System: Darwin redacted 21.6.0 Darwin Kernel Version 21.6.0: Mon Jun 24 00:56:10 PDT 2024; root:xnu-8020.240.18.709.2~1/RELEASE_X86_64 x86_6

Which language are you using?

rule

What did you do?

Configuration

      "css/relative-font-units": [
        "error",
        {
          allowUnits: ["rem"],
        },
      ],

  h1 {
    font-size: inherit;
  }

What did you expect to happen?

inherit is either ignored by default or there is a configuration option to ignore it.

What actually happened?

error  Use only allowed relative units for 'font-size' - rem    css/relative-font-unit

Link to Minimal Reproducible Example

https://github.com/eslint/css

Participation

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

Additional comments

It might make sense to also be able to ignore the other global values:

/* Global values */
font-size: inherit;
font-size: initial;
font-size: revert;
font-size: revert-layer;
font-size: unset;

https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#syntax

[xbinaryx]

This makes sense to me. Perhaps a new option allowCssWideKeywords?

[nzakas]

@xbinaryx I think that's a good idea. 👍

While this isn't a bug, I do think adding an option makes sense.

[xbinaryx]

I will work on this.

[sdavids]

I think this rule should only care about:

/* <relative-size> values */
font-size: smaller;
font-size: larger;

/* <length> values */
font-size: 12px;
font-size: 0.8em;

/* <percentage> values */
font-size: 80%;

/* math value */
font-size: math;

---

These are either absolute values or global values:

/* <absolute-size> values */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: xxx-large;

/* Global values */
font-size: inherit;
font-size: initial;
font-size: revert;
font-size: revert-layer;
font-size: unset;

… this rule is named relative-font-units.

[nzakas]

@sdavids it's unclear from your description how you'd like the rule to change, because it appears that you've listed inherit and other values as things the rule shouldn't care about?

It would be helpful if you gave a concrete proposal about the change you'd like to see in this rule.

[sdavids]

The name of the rule is relative-font-units so it should not care about absolute or global values (units).

      "css/relative-font-units": [
        "error",
        {
          allowUnits: ["rem"],
        },
      ],

  h1 {
    font-size: inherit; /* OK: global value */
  }

  h2 {
    font-size: xxx-large; /* OK: absolute value */
  }

  h3 {
    font-size: 3rem; /* OK: we configured rem */
  }

  h4 {
    font-size: 3em; /* ERROR */
  }

If the above is not the desired behavior then we would need an option like:

      "css/relative-font-units": [
        "error",
        {
          allowUnits: ["rem"],
          ignoreAbsoluteAndGlobal: true,
        },
      ],

---

I think there should be an option to opt out of allowing absolute and global values—unfortunately, I do not have a good name for it …

      "css/relative-font-units": [
        "error",
        {
          allowUnits: ["rem"],
        },
      ],

  h1 {
    font-size: inherit; /* OK: global value */
  }

  h2 {
    font-size: xxx-large; /* OK: absolute value */
  }

  h3 {
    font-size: 3rem; /* OK: we configured rem */
  }

  h4 {
    font-size: 3em; /* ERROR */
  }

      "css/relative-font-units": [
        "error",
        {
          allowUnits: ["rem"],
          someOption: true,
        },
      ],

  h1 {
    font-size: inherit; /* ERROR */
  }

  h2 {
    font-size: xxx-large; /* ERROR */
  }

  h3 {
    font-size: 3rem; /* OK: we configured rem */
  }

  h4 {
    font-size: 3em; /* ERROR */
  }