Dependencies seem outdated

[anotheri]

from https://github.com/GoogleChromeLabs/critters:

Caution

Ownership of Critters has moved to the Nuxt team, who will be maintaining the project going forward. If you'd like to keep using Critters, please switch to the actively-maintained fork at https://github.com/danielroe/beasties. This repo is now archived and won't receive any future updates.

[NikolaRHristov]

Thanks for the notification we'll make sure to update a release.

[NikolaRHristov]

Fixed in astro-beasties v0.0.1 - https://github.com/PlayForm/Inline/releases/tag/AstroBeasties%2Fv0.0.1 and @playform/inline v0.1.2 - https://github.com/PlayForm/Inline/releases/tag/Inline%2Fv0.1.2, which replaces critters with beasties.

[anotheri]

@NikolaRHristov i've updated to v0.1.2 and updated code with

playformInline({
  Beasties: true, // instead of Critters: true
})

But that broke rendering on view transitions, although it works correctly on the initial page rendering. So i'm afraid there is either bug or some kind of breaking change between critters and beasties libs.

FWIW, this configuration works better with view transitions for me:

playformInline({
  Beasties: {
    external: false,
  },
}),

But i'd appreciate any insight or advice on how to make it work as expected for external css and view transitions too.

[NikolaRHristov]

I'm not sure if beasties replaced any behavior. I just replaced critters with beasties, so I assumed it would work, but I will take a look. Thank you for this!

[NikolaRHristov]

Does it work on the previous version? @anotheri

[anotheri]

Does it work on the previous version? @anotheri

yes, i've just double checked:

it works with playformInline({ Critters: true }) params on "@playform/inline": "0.1.1"

but it doesn't work the same way with playformInline({ Beasties: true }) params on "@playform/inline": "0.1.2"

and workaround i use doesn't provide the same result, obviously, because params are different from defaults.

playformInline({
  Beasties: {
    external: false,
  },
}),

The problem seem to be related to media queries (at least from tailwind css that i use), e.g. even though i have class text-center lg:text-left, on first page load on large screen it applies text alignment to the left, once I go to the same page with navigating and page transitions i see the same class but css doesn't apply to this class anymore.

I've compared defaults between critters and besties most of them are the same external: true for both.

And I assume it's related to this bug mentioned in Besties: danielroe/beasties#138 (comment)