@starting-style doesn't nest correctly

[mariusGundersen]

To reproduce:

Playground link

[popover]:popover-open {
  opacity: 1;
  transform: scaleX(1);

  @starting-style {
    opacity: 0;
    transform: scaleX(0);
  }
}

Current behavior:

This produces the following output, which is clearly incorrect:

[popover]:popover-open {
  opacity: 1;
  transform: scaleX(1);
}
@starting-style {
  opacity: 0;
  transform: scaleX(0);
}

Expected behavior:

It should produce the following css:

[popover]:popover-open {
  opacity: 1;
  transform: scaleX(1);

  @starting-style {
    opacity: 0;
    transform: scaleX(0);
  }
}

Environment information:

• less version: 4.2.0

This is based on the sample code from mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style

[matthew-dean]

@mariusGundersen Experimental CSS, by definition, is generally not supported by Less. That said, Less's default behavior of bubbling any at-rule that is undefined should probably be re-thought, or an escape-hatch provided. So this is more a feature request than a bug.