2.10.0 changed layout in build, but not dev

[ssuess]

For some reason, updating to 2.10.0 changes the breakpoint behaviour in my built PWA but NOT in my local dev testing (SPA).

I have a component that changes number of columns with the width of the window, and this shows two cols in quasar dev server 2.9.2 and 2.10.0 equally, as well as PWA builds for 2.9.2. But builds in 2.10.0 only show a single col at the same width. With zero code changes on my end.

Reverting back to 2.9.2 fixes the problem. Can anyone shed light on why this would be?

[MilosPaunovic]

This is definitely due to something in your code, so without a reproduction there isn't much help that anyone could provide.

[ssuess]

I fail to see how you can make that assumption. The ONLY thing that has changed is updating to 2.10.0 from 2.9.2. Reverting fixes the problem.

[pdanpdan]

The only change related to size between the 2 releases is about the time QResizeObserver starts for QLayout. But if your components use the width of the window it should not matter.
Can you share the component's code?

[ssuess]

Thanks this is very helpful and gives me a place to look, because I am using QResizeObserver to get width and height info. I will investigate this avenue.

[pdanpdan]

6566781

[ssuess]

Well I found what is happening, but I don't know why or how to fix it. For whatever reason, my css styles are being interpreted and built DIFFERENTLY in 2.10.0 than before. An entire block that defines the breakpoint @media (min-width: 850px) { is simply LEFT OUT of builds in 2.10.0, but is included (as has been the case for a couple of years now) in all previous versions.

[ssuess]

And after attempts at trying to guess what new logic is being employed with respect to my css file, I have tried the following, none of which solved the problem:

1. Tried removing empty css style declarations and removing any blank lines in the css file
2. Tried changing from terser to esbuild for minification
3. Tried combining css rules that would be combined automatically anyway

So far, nothing works. Essential css rules are left out of the build in 2.10.0 that are there in 2.9.2. I guess this is another bug to report, but I would at least like to pinpoint what the new quasar code is doing differently with some precision.

[ssuess]

After painstakingly testing each css rule to see what was present and missing in the variety of css files created by the build process, I need to revise the above. My @media rule seems to still be present, but the one difference I have found is the presence of these two css blocks in the build that were not there previously:

 .q-pagination__content{
 --q-pagination-gutter-parent: -2px;
 --q-pagination-gutter-child: 2px;
 margin-top:var(--q-pagination-gutter-parent);
 margin-left:var(--q-pagination-gutter-parent)
 }
 .q-pagination__content>.q-btn,.q-pagination__content>.q-input,.q-pagination__middle>.q-btn{
 margin-top:var(--q-pagination-gutter-child);
 margin-left:var(--q-pagination-gutter-child)
 }

On the pages being loaded, I can't find in the dev tools any reference at all to these rules for some reason. But removing the second of these blocks from the css file fixes my layout. I am not directly using q-pagination anywhere, but perhaps other quasar components are calling it and it is somehow obscured in dev tools. I continue to try to figure out exactly why 2.10.0 broke my layout, I will report back here when/if I find the culprit.

[ssuess]

side note I wasn't completely wrong about my @media (min-width: 850px) { rule, it IS being ignored in the presence of the new rules above, I just can't figure out why since these new rules don't show up anywhere in the dev tools.

[ssuess]

JFC finally I have a solution! It seems that from version 2.10.0, the build process will produce errors if there is more than one media block with the same declaration. For example, if I have two declarations (with different rules) for @media (min-width: 850px) { for example, it messes up the build and my css is not working properly. Combining those differing rules under single declarations seems to fix the problem.

[pdanpdan]

This sound bad - can you share the steps to reproduce the problem (I think step by step starting from creating a new project would be best)

[ssuess]

If I get some time I will do it, but this is a fairly complex setup with many @media rules so it may take a while