(22 Feb 2022) Is it me, or did CSS exporting got critically broken recently?

Hi all,

Here’s a very simple test scenario - a grid, inside it a div that has its grid position set manually, differently for each breakpoint.

On Desktop its Column start/end is set to 1-1, Row start/end to 1-1;
on 1280 and up its Column start/end is set to 2-2, Row start/end to 2-2;
on 1440 and up its Column start/end is set to 3-3, Row start/end to 3-3;
on 1920 and up its Column start/end is set to 4-4, Row start/end to 4-4;

And yet, at the screen width 1440 and above it’s displayed with position 2-2, 2-2, settings for 1440 as well as 1920 are ignored.

Published page is here:
https://grid-responsiveness-test.webflow.io/

And here’s a share link to the project:
https://preview.webflow.com/preview/grid-responsiveness-test?utm_medium=preview_link&utm_source=designer&utm_content=grid-responsiveness-test&preview=b072aed3b1348303c2bf27a825293b8d&workflow=preview

Inspecting the CSS code of the exported page shows that media query for “min-width: 1920px” is declared first, then “min-width: 1440px”, and only after those goes “min-width: 1280px”, which means that 1920 gets overwritten by 1440 and both get overwritten by 1280.

Could anyone confirm the bug? Should I report it to devs somewhere…?

P.s.: I’ve checked exported code of a “regular” element, i.e. one that is not a grid child - a div with different width or color on different breakpoints, and it’s all fine - “min-width: 1280px” is first, then 1440, and then 1920.

P.s. 2: I pretty sure it’s a new development, as in - manual position of grid child on different breakpoints worked still ok a day or two ago.