@font-face doesn't respect scope when compiling

[badlydrawnrob]

To reproduce:

You can see the issue on this preview — although in my version, I have a file called root.less that's importing the @font-face code from another file.

The following scope isn't respected:

:root {
  @font-face {
    font-family: "DejaVu Sans";
    src: url("_DejaVuSans-Bold");
    font-style: normal;
    font-weight: 700;
  }
  --css-variable: "DejaVu Sans";
}

The CSS variable is scoped to :root, but the @font-face is outside of root when compiled. I'm not sure if this is by design, or a bug. There is some conversation about where it should be defined — but I feel putting it inside :root should be valid.

It just means my css variables are named before the @font-face in the main.css compiled file — the CSS still seems to work, but it might cause problems in the future.

Expected behavior:

I expected the @font-face rule to be inside :root.

Environment information:

Less version 4.2.0 on Mac.

[matthew-dean]

If it was inside :root, according to spec, it would be invalid. @font-face defines a global value. See: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

[badlydrawnrob]

@matthew-dean Fair enough. It was unclear to how they're supposed to be declared from what I was reading.