From d26759bf8b8ddd9a368b3125a227d80dd11cae4b Mon Sep 17 00:00:00 2001
From: Nate Moore <nate@astro.build>
Date: Tue, 22 Aug 2023 15:40:43 -0500
Subject: [PATCH 1/3] fix: update directive reference with new `class:list`
 behavior

---
 src/content/docs/en/reference/directives-reference.mdx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/content/docs/en/reference/directives-reference.mdx b/src/content/docs/en/reference/directives-reference.mdx
index 74f11e4330e22..e9ac11aaccfb3 100644
--- a/src/content/docs/en/reference/directives-reference.mdx
+++ b/src/content/docs/en/reference/directives-reference.mdx
@@ -24,24 +24,21 @@ A template directive is never included directly in the final HTML output of a co
 ## Common Directives
 ### `class:list`
 
-`class:list={...}` takes an array of class values and converts them into a class string. This is inspired by @lukeed's popular [clsx](https://github.com/lukeed/clsx) helper library, but built directly into Astro itself.
+`class:list={...}` takes an array of class values and converts them into a class string. This is powered by @lukeed's popular [clsx](https://github.com/lukeed/clsx) helper library.
 
 `class:list` takes an array of several different possible value kinds:
 - `string`: Added to the element `class`
 - `Object`: All truthy keys are added to the element `class`
 - `Array`: flattened
-- `Set`: flattened
-- `false` or `null`: skipped
+- `false`, `null`, or `undefined`: skipped
 
 ```astro
 <!-- This -->
-<span class:list={[ 'hello goodbye', { hello: true, world: true }, new Set([ 'hello', 'friend' ]) ]} />
+<span class:list={[ 'hello goodbye', { world: true }, [ 'friend' ] ]} />
 <!-- Becomes -->
 <span class="hello goodbye world friend"></span>
 ```
 
-Duplicate values are removed automatically.
-
 ### `set:html`
 
 `set:html={string}` injects an HTML string into an element, similar to setting `el.innerHTML`.

From 74efbb49768152b70b3f00ba4eb067b529f17d3b Mon Sep 17 00:00:00 2001
From: Nate Moore <nate@astro.build>
Date: Tue, 22 Aug 2023 15:40:56 -0500
Subject: [PATCH 2/3] fix: update astro hash to be lowercase

---
 src/content/docs/en/guides/styling.mdx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/content/docs/en/guides/styling.mdx b/src/content/docs/en/guides/styling.mdx
index 129240181a1e8..51eae0f9bde5e 100644
--- a/src/content/docs/en/guides/styling.mdx
+++ b/src/content/docs/en/guides/styling.mdx
@@ -41,11 +41,11 @@ This CSS:
 Compiles to this:
 ```astro
 <style>
-  h1:where(.astro-HHNQFKH6) {
+  h1:where(.astro-hhnqfkh6) {
      color: red;
   }
 
-  .text:where(.astro-HHNQFKH6) {
+  .text:where(.astro-hhnqfkh6) {
     color: blue;
   }
 </style>
@@ -159,7 +159,7 @@ import MyComponent from "../components/MyComponent.astro"
 <MyComponent class="red">This will be red!</MyComponent>
 ```
 
-This pattern lets you style child components directly. Astro will pass the parent’s scoped class name (e.g. `astro-HHNQFKH6`) through the `class` prop automatically, including the child in its parent’s scope.
+This pattern lets you style child components directly. Astro will pass the parent’s scoped class name (e.g. `astro-hhnqfkh6`) through the `class` prop automatically, including the child in its parent’s scope.
 
 :::note[Scoped classes from parent components]
 Because the `class` prop includes the child in its parent’s scope, it is possible for styles to cascade from parent to child. To avoid this having unintended side effects, ensure you use unique class names in the child component.

From ac890c50151d6d038bae634f98e21cfe8e870634 Mon Sep 17 00:00:00 2001
From: Nate Moore <natemoo-re@users.noreply.github.com>
Date: Wed, 23 Aug 2023 13:25:59 -0500
Subject: [PATCH 3/3] Update styling example to use attribute approach

---
 src/content/docs/en/guides/styling.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/docs/en/guides/styling.mdx b/src/content/docs/en/guides/styling.mdx
index 51eae0f9bde5e..3ac8deadb65b0 100644
--- a/src/content/docs/en/guides/styling.mdx
+++ b/src/content/docs/en/guides/styling.mdx
@@ -41,11 +41,11 @@ This CSS:
 Compiles to this:
 ```astro
 <style>
-  h1:where(.astro-hhnqfkh6) {
+  h1[data-astro-cid-hhnqfkh6] {
      color: red;
   }
 
-  .text:where(.astro-hhnqfkh6) {
+  .text[data-astro-cid-hhnqfkh6] {
     color: blue;
   }
 </style>