Cannot use `h-screen` from Tailwind with XB

This is technically a duplicate of 🐛 Components with heigh in VH can cause the preview iFrame to expand infinitely in height Active but as no solution for that has been put forward yet, perhaps we can put in a hard-coded Tailwind specific fix for this class name.

I have an MR that will work for h-screen and any other 100VH situation, but > 100 VH settings would still be an issue. On the plus side, this covers far more use cases than HEAD, even if some linger.

Found a way to handle any VH value, not just 100.

It seems like this issue is now the catch all for VH related issues. I've added two other more specific issues as related but I think they will be fixed by @bnjmnm's solution in the MR which is not specific to Tailwind classes.

Tried to test this manually and ran into an error:

An unexpected error has occurred while rendering preview.

Failed to execute 'querySelector' on 'Document': 'div#block-olivero-content > div.block__content > astro-island:nth-child(1) > section.bg-white.lg:grid.lg:h-screen.lg:place-content-center' is not a valid selector.

This is the component I tested with:

const Component = ({
  text = "Hero",
}) => {
  return (
  <section className="bg-white lg:grid lg:h-screen lg:place-content-center">
    <div className="mx-auto w-screen max-w-screen-xl px-4 py-16 sm:px-6 sm:py-24 lg:px-8 lg:py-32">
      <div className="mx-auto max-w-prose text-center">
        <h1 className="text-4xl font-bold text-gray-900 sm:text-5xl">
          Understand user flow and
          <strong className="text-indigo-600"> increase </strong>
          conversions
        </h1>
  
        <p className="mt-4 text-base text-pretty text-gray-700 sm:text-lg/relaxed">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, nisi. Natus, provident
          accusamus impedit minima harum corporis iusto.
        </p>
  
        <div className="mt-4 flex justify-center gap-4 sm:mt-6">
          <a
            className="inline-block rounded border border-indigo-600 bg-indigo-600 px-5 py-3 font-medium text-white shadow-sm transition-colors hover:bg-indigo-700"
            href="#"
          >
            Get Started
          </a>
  
          <a
            className="inline-block rounded border border-gray-200 px-5 py-3 font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 hover:text-gray-900"
            href="#"
          >
            Learn More
          </a>
        </div>
      </div>
    </div>
  </section>
  );
};

export default Component;

Looks like #11 was happening due to tailwind using colons in classnames. This has been addressed and a test was modified to include it as a use case.

The change in Jesse's commit looks good - it's essentially the same logic as what it replaces, but uses information that was already in the component instead of having to perform additional steps to retrieve it. It seems OK if Jesse reviews the remainder of the MR.

Verified below scenarios :