diff --git a/.changeset/dirty-doors-call.md b/.changeset/dirty-doors-call.md
new file mode 100644
index 000000000000..d8358dfd2881
--- /dev/null
+++ b/.changeset/dirty-doors-call.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Properly handle `false` in `class:list`
diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts
index ea287de80cec..2f6ec32869d4 100644
--- a/packages/astro/src/runtime/server/index.ts
+++ b/packages/astro/src/runtime/server/index.ts
@@ -545,7 +545,11 @@ Make sure to use the static attribute syntax (\`${key}={value}\`) instead of the
// support "class" from an expression passed into an element (#782)
if (key === 'class:list') {
- return markHTMLString(` ${key.slice(0, -5)}="${toAttributeString(serializeListValue(value))}"`);
+ const listValue = toAttributeString(serializeListValue(value));
+ if (listValue === '') {
+ return '';
+ }
+ return markHTMLString(` ${key.slice(0, -5)}="${listValue}"`);
}
// Boolean values only need the key
diff --git a/packages/astro/src/runtime/server/util.ts b/packages/astro/src/runtime/server/util.ts
index 0fe36a860f8c..24dfa2b1ab09 100644
--- a/packages/astro/src/runtime/server/util.ts
+++ b/packages/astro/src/runtime/server/util.ts
@@ -23,7 +23,7 @@ export function serializeListValue(value: any) {
// otherwise, push any other values as a string
else {
// get the item as a string
- item = item == null ? '' : String(item).trim();
+ item = item === false || item == null ? '' : String(item).trim();
// add the item if it is filled
if (item) {
diff --git a/packages/astro/test/astro-class-list.test.js b/packages/astro/test/astro-class-list.test.js
index 05e268f90fdc..9787fb458e21 100644
--- a/packages/astro/test/astro-class-list.test.js
+++ b/packages/astro/test/astro-class-list.test.js
@@ -20,6 +20,8 @@ describe('Class List', async () => {
expect($('[class="test truthy"]')).to.have.lengthOf(1);
expect($('[class="test set"]')).to.have.lengthOf(1);
expect($('[class="hello goodbye world friend"]')).to.have.lengthOf(1);
+ expect($('[class="foo baz"]')).to.have.lengthOf(1);
+ expect($('span:not([class])')).to.have.lengthOf(1);
expect($('.false, .noshow1, .noshow2, .noshow3, .noshow4')).to.have.lengthOf(0);
});
@@ -34,5 +36,7 @@ describe('Class List', async () => {
expect($('[class="test truthy"]')).to.have.lengthOf(1);
expect($('[class="test set"]')).to.have.lengthOf(1);
expect($('[class="hello goodbye world friend"]')).to.have.lengthOf(1);
+ expect($('[class="foo baz"]')).to.have.lengthOf(1);
+ expect($('span:not([class])')).to.have.lengthOf(1);
});
});
diff --git a/packages/astro/test/fixtures/astro-class-list/src/pages/component.astro b/packages/astro/test/fixtures/astro-class-list/src/pages/component.astro
index e904a0899227..5eb64bb12a87 100644
--- a/packages/astro/test/fixtures/astro-class-list/src/pages/component.astro
+++ b/packages/astro/test/fixtures/astro-class-list/src/pages/component.astro
@@ -16,3 +16,7 @@ import Component from '../components/Span.astro'
+
+
+
+
diff --git a/packages/astro/test/fixtures/astro-class-list/src/pages/index.astro b/packages/astro/test/fixtures/astro-class-list/src/pages/index.astro
index a642557de535..d8ad8aec2a20 100644
--- a/packages/astro/test/fixtures/astro-class-list/src/pages/index.astro
+++ b/packages/astro/test/fixtures/astro-class-list/src/pages/index.astro
@@ -13,3 +13,7 @@
+
+
+
+