#prevent css optimization

4 messages · Page 1 of 1 (latest)

scenic oak
#

hi there. Is it possible to prevent optimization of top: 0;left: 0;right: 0;bottom: 0; to inset: 0 (which breaks in safari 14 on ios)? I am not sure if astro is optimizing it or tailwind

fickle apexBOT
#

Hi @scenic oak. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Yes, it seems like Astro is optimizing the CSS during the build process. This optimization is causing issues in Safari 14.0 or before, as the inset property is not supported in these versions.

The issue was reported on Astro's GitHub page where the CSS code:

.class {
  top: 0;
  right: 0;
  bottom: 0;
  right: 0;
}

was being transformed to:

.class{inset: 0;}

during the Astro build process. This transformation was causing styles to break in Safari 14.0.

The user who reported the issue suggested setting the .browserslist config to esbuild's target option during the CSS build process as a possible solution. They also suggested adding an Astro option that enables passing esbuild config on build, like build.css.esbuildConfig, or using Vite instead of esbuild to pass vite.build config.

You can find more details about this issue here (https://github.com/withastro/astro/issues/4092).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@scenic oak kapa.ai is still learning and improving, please let us know how it did by reacting below