Handle false properly in class:list (withastro#3922)

* fix(withastro#3920): properly handle false in `class:list` * fix: allow 0 in `class:list` * fix: output empty `class:list` as `''` rather than `class=''` Co-authored-by: Nate Moore <nate@astro.build>
SiriousHunter · Jul 14, 2022 · 7094d6a · 7094d6a
1 parent 78e765d
commit 7094d6a
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 2 deletions.
diff --git a/.changeset/dirty-doors-call.md 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
@@ -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
@@ -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
@@ -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
@@ -16,3 +16,7 @@ import Component from '../components/Span.astro'
 <Component class:list={new Set(['test', 'set'])} />
 
 <Component class:list={[ 'hello goodbye', { hello: true, world: true }, new Set([ 'hello', 'friend' ]) ]} />
+
+<Component class:list={['foo', false && 'bar', true && 'baz']} />
+
+<Component class:list={[false && 'empty']} />
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
@@ -13,3 +13,7 @@
 <span class:list={new Set(['test', 'set'])} />
 
 <span class:list={[ 'hello goodbye', { hello: true, world: true }, new Set([ 'hello', 'friend' ]) ]} />
+
+<span class:list={['foo', false && 'bar', true && 'baz']} />
+
+<span class:list={[false && 'empty']} />