Svelte's usage of the :where CSS selector breaks sites in Safari 12 and 13

[kevinrenskers]

Describe the bug

Svelte uses the :where CSS selector when you use a CSS selector like li.main-menu:hover ul. Svelte turns that into .main-menu.svelte-13eihuy:hover ul:where(.svelte-13eihuy).

This :where selector has only been added to Safari in version 14.

The fix is to change li.main-menu:hover ul into li.main-menu:hover :global(ul), but this is not obvious and you won't notice that your CSS doesn't work in older browsers unless you specifically test your site in them.

Now obviously I know that Safari 12 and 13 are quite old, but aren't they supported by Svelte? What is the list of supported browsers anyway?

Reproduction

I have an extremely simple version here in the playground:

https://svelte.dev/playground/ca3a0989871744e7b2d43959c9d6f574?version=5.4.0

When you inspect the generated css, you will see this:

	.main-menu.svelte-13eihuy ul:where(.svelte-13eihuy) {
		display: none;
	}

	.main-menu.svelte-13eihuy:hover ul:where(.svelte-13eihuy) {
		display: block;
	}

This will not work in Safari 12 or 13.

Logs

No response

System Info

System:
    OS: macOS 15.1.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 161.03 MB / 32.00 GB
    Shell: 3.7.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 20.17.0 - ~/Library/pnpm/node
    npm: 10.8.2 - ~/Library/pnpm/npm
    pnpm: 9.13.2 - ~/Library/pnpm/pnpm
  Browsers:
    Safari: 18.1.1
  npmPackages:
    svelte: ^5.2.4 => 5.2.4

Severity

annoyance

[harrisi]

There's a recent issue about this: #14420

[Conduitry]

The use of :where() is specifically mentioned in https://svelte.dev/docs/svelte/v5-migration-guide#Other-breaking-changes-Scoped-CSS-uses-:where(), along with a workaround.

[kevinrenskers]

It says at the top that "Svelte 5 requires a modern browser (in other words, not Internet Explorer)". It really should be more specific than that. Safari 12 and 13 are not Internet Explorer.

"In the event that you need to support ancient browsers that don’t implement :where".. what is "ancient"? Where is the cut off? Why isn't the list of supported browsers more clear? But yeah I guess that's exactly what #14420 is about.

How and where can I use that mentioned workaround? Where am I supposed to add that line? The workaround in the docs isn't super helpful as-is.

[kevinrenskers]

Ok, I think I found it. Edit vite.config.js and inside of plugins, after sveltekit(), add the following:

{
  name: "strip-where-selectors",
  enforce: "post",
  transform(code, id) {
    if (id.endsWith(".css")) {
      return code.replace(/:where\((.+?)\)/g, "$1");
    }
    return code;
  },
},

Maybe the docs can be improved with a fully working workaround?

[kevinrenskers]

That only worked in development mode, not when creating a build. Then all the :where were back. This version works for both:

{
  name: "strip-where-selectors",
  enforce: "post",
  transform(code, id) {
    if (id.endsWith(".css")) {
      return code.replace(/:where\((.+?)\)/g, "$1");
    }
    return code;
  },
  async generateBundle(_, bundle) {
    for (const [key, asset] of Object.entries(bundle)) {
      if (asset.type === "asset" && key.endsWith(".css")) {
        asset.source = asset.source.toString().replace(/:where\((.+?)\)/g, "$1");
      }
    }
  },
},

Is this really the expected workaround? To have a custom plugin in vite.config.js?