@starting-style doesn't nest correctly

mariusGundersen commented 2 months ago

To reproduce:

[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 commented 2 months ago

@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.

rejhgadellaa commented 3 weeks ago

With more and more @-rules being added (e.g. @starting-style and @position-try) and browsers supporting nested css (and thus @-rules), I think the default behavior of Less should indeed be changed. Should we move this into a separate ticket?

rejhgadellaa commented 2 weeks ago

Additional information:

@starting-style is now supported on Chromium and WebKit. Firefox has it implemented and plans to enable it soon.

less / less.js

@starting-style doesn't nest correctly #4267