merge main

Author: Rich-Harris

.changeset/cuddly-chefs-refuse.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly match `:has()` selector during css pruning

.changeset/gold-hairs-jog.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: allow global-like pseudo-selectors refinement

.changeset/hungry-dancers-tap.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: don't distribute unused types definitions

documentation/docs/07-misc/99-faq.md

@@ -46,7 +46,7 @@ It will show up on hover.
 - You can use markdown here.
 - You can also use code blocks here.
 - Usage:
-  ```tsx
+  ```svelte
   <main name="Arethra">
   ```
 -->

documentation/docs/98-reference/.generated/client-errors.md

@@ -133,3 +133,27 @@ Reading state that was created inside the same derived is forbidden. Consider us
 ```
 Updating state inside a derived or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
 ```
+
+This error is thrown in a situation like this:
+
+```svelte
+<script>
+    let count = $state(0);
+    let multiple = $derived.by(() => {
+        const result = count * 2;
+        if (result > 10) {
+            count = 0;
+        }
+        return result;
+    });
+</script>
+
+<button onclick={() => count++}>{count} / {multiple}</button>
+```
+
+Here, the `$derived` updates `count`, which is `$state` and therefore forbidden to do. It is forbidden because the reactive graph could become unstable as a result, leading to subtle bugs, like values being stale or effects firing in the wrong order. To prevent this, Svelte errors when detecting an update to a `$state` variable.
+
+To fix this:
+- See if it's possible to refactor your `$derived` such that the update becomes unnecessary
+- Think about why you need to update `$state` inside a `$derived` in the first place. Maybe it's because you're using `bind:`, which leads you down a bad code path, and separating input and output path (by splitting it up to an attribute and an event, or by using [Function bindings](bind#Function-bindings)) makes it possible avoid the update
+- If it's unavoidable, you may need to use an [`$effect`]($effect) instead. This could include splitting parts of the `$derived` into an [`$effect`]($effect) which does the updates

packages/svelte/messages/client-errors/errors.md

@@ -87,3 +87,27 @@ See the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-long
 ## state_unsafe_mutation
 
 > Updating state inside a derived or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
+
+This error is thrown in a situation like this:
+
+```svelte
+<script>
+    let count = $state(0);
+    let multiple = $derived.by(() => {
+        const result = count * 2;
+        if (result > 10) {
+            count = 0;
+        }
+        return result;
+    });
+</script>
+
+<button onclick={() => count++}>{count} / {multiple}</button>
+```
+
+Here, the `$derived` updates `count`, which is `$state` and therefore forbidden to do. It is forbidden because the reactive graph could become unstable as a result, leading to subtle bugs, like values being stale or effects firing in the wrong order. To prevent this, Svelte errors when detecting an update to a `$state` variable.
+
+To fix this:
+- See if it's possible to refactor your `$derived` such that the update becomes unnecessary
+- Think about why you need to update `$state` inside a `$derived` in the first place. Maybe it's because you're using `bind:`, which leads you down a bad code path, and separating input and output path (by splitting it up to an attribute and an event, or by using [Function bindings](bind#Function-bindings)) makes it possible avoid the update
+- If it's unavoidable, you may need to use an [`$effect`]($effect) instead. This could include splitting parts of the `$derived` into an [`$effect`]($effect) which does the updates

packages/svelte/package.json

@@ -9,11 +9,12 @@
     "node": ">=18"
   },
   "files": [
+    "*.d.ts",
     "src",
     "!src/**/*.test.*",
+    "!src/**/*.d.ts",
     "types",
     "compiler",
-    "*.d.ts",
     "README.md"
   ],
   "module": "src/index-client.js",

packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js

@@ -133,7 +133,13 @@ const css_visitors = {
 
 		node.metadata.is_global = node.selectors.length >= 1 && is_global(node);
 
-		if (node.selectors.length === 1) {
+		if (
+			node.selectors.length >= 1 &&
+			node.selectors.every(
+				(selector) =>
+					selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector'
+			)
+		) {
 			const first = node.selectors[0];
 			node.metadata.is_global_like ||=
 				(first.type === 'PseudoClassSelector' && first.name === 'host') ||