Trouble trying to improve older browser support using PostCSS | Astro Lounge | Page 1

round glen Apr 30, 2024, 10:27 PM

#

I'm trying to expand browser support for an astro & starlight project. I'm currently running an older version of safari (v14.1) which I've managed to get working for the astro portion of the project by using the following postcss.config.cjs

module.exports = {
  plugins: [
    require("@pandacss/dev/postcss")(),
    require("@csstools/postcss-cascade-layers")(),
    require("autoprefixer")(),
  ],
};

The starlight docs are at a subdirectory (/docs) but all the pages are loading completely unstyled. On investigating other deployed starlight sites with safari (14.1), it looks like it's a common issue. Can anyone give me some pointers on where to start when trying to diagnose which classes or syntax might be causing the issue? I've attached an image of the astro.build sites docs. Note that the landing page the rest of the site renders correctly.

neat prawn Apr 30, 2024, 11:13 PM

#

Without looking it up, it might be an issue caused by :where() selector support?

#

Although I wouldn't expect that to impact everything so might be wrong.

#

(on my phone so can't dig further right now, sorry)

round glen Apr 30, 2024, 11:17 PM

#

Thanks for the reply. I made some progress via adding tailwind and tailwind postcss.

neat prawn Apr 30, 2024, 11:18 PM

#

Just checked our official browser support matrix and it's Safari 15.4 and up, so will be curious to see if you can get it working.

round glen Apr 30, 2024, 11:24 PM

#

Seems to be quite a few moving parts I didn't consider, such as some of the js being incompatiable too

neat prawn May 1, 2024, 10:00 AM

#

Ahhh, very possible. Do you know which by any chance? We probably use optional chaining that I suspect Safari 14 didn’t support either.

round glen May 1, 2024, 10:07 AM

#

There was a private method in use which I know was only added to safari in v15.

#Trouble trying to improve older browser support using PostCSS