less.js icon indicating copy to clipboard operation
less.js copied to clipboard

@starting-style doesn't nest correctly

Open mariusGundersen opened this issue 10 months ago • 6 comments

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

mariusGundersen avatar Apr 10 '24 11:04 mariusGundersen