Strange behaviour when using a grid or flexbox row

[nyoung697]

Here is an example of what I mean: https://remix-cq-polyfill.vercel.app/ Here is the code: https://github.com/nyoung697/remix-cq-polyfill/blob/main/app/components/InnerContainerQuery.tsx

In example 1, when the container width is wider, and you click on the different items, the container query for padding is lost and the text shifts up.

I tested with both a grid and flexbox. They both do the same thing.

If I remove the line selected.id === workflow.id ? "text-blue-500" : "", then it works fine.

I thought it had something to do with dynamic classes, however in example 2, all I did was removed the grid, so that the elements all render in a single column, rather than a row. The padding for these items stays intact when changing the selected item.

Any ideas why this is happening?

[sea-side-syndication]

I also am seeing container rules applied to some child grid cells but not others

I notice that, for those other child grid cells that aren't working as intended, the rules (color: yellow) are being applied according to the window size instead of the parent container

this is the css I have been using for each child grid cell

.list {
			container-type: inline-size;
		}

		@container (width < 300px) {

			.child {
				background: yellow;
			}
		}

[devknoll]

@nyoung697 Off the top of my head, I'm not sure why the second example is working. However, the first example isn't working because when React reconciles the DOM, it is overwriting the CSS class added by the polyfill. This should be fixed by the new version of the polyfill (currently in alpha), which uses a custom attribute rather than using class. Please give it a try and let me know if you run into any further issues.

@sea-side-syndication Since the original issue appears related to React, I'm going to close it out. If you're not using React, could you please file a new issue with a repro case so I can take a look?

Thank you both!

[nyoung697]

@devknoll what is the version tag for this alpha release? I installed @0.2.0, but that seems to be broken. It hangs for a few seconds, then the polyfill fails to run and I get a warning about array length.

An error occurred while transpiling stylesheet: RangeError: Invalid array length

Thank you.

[devknoll]

Thanks, I'll take a look and get back to you.

[devknoll]

@nyoung697 There was an issue with how escaped tokens were being parsed and serialized that I fixed in 796f0cc and verified with your demo. I've gone ahead and published 0.2.1.

Let me know if you run into any other issues. Thanks!