codiume / orbit

Collection of useful integrations & components for the Astro ecosystem. ⭐️ Star to support our work!
https://astro.build
MIT License
333 stars 13 forks source link

astro-purgecss does not keep Astro view transition animations #438

Closed mef closed 6 months ago

mef commented 7 months ago

Describe the bug

Astro-purgecss seems to be removing the CSS from astro view transition animations, even if these are activated and used in the project

To Reproduce

Steps to reproduce the behavior:

  1. Create a new Astro project with at least two pages
  2. Activate view transitions
  3. Setup Astro-purgecss with both variables and keyframes options set to true.
  4. Run the build command then launch the server (e.g. npm run build; npm run preview)

Expected behavior

A slide animation happens when navigating between pages.

Observed behavior

No transition animation is playing. The content is just replaced.

Additional context

As a workaround, the following config keeps the view transition CSS:

-           , keyframes: true
            , variables: true
+           , safelist: {
+               greedy: [/*astro*/]
+           }
mhdcodes commented 7 months ago

Hey @mef I'll try to look into this soon. Feel free to open a PR if you already know the solution and want it to be released quickly.

mef commented 6 months ago

Thanks. I'm not totally sure about how to handle this, as hard-coding the workaround mentioned above in the purgeCSS options might have unwanted side-effects for some users...

mhdcodes commented 6 months ago

@mef what about adding a specific section to the docs, this way when someone faces the same issue can refer to the docs? since it's a rare usage