fix: output empty class:list as '' rather than class=''

withastro · Jul 14, 2022 · b44ed92 · b44ed92
1 parent f872333
commit b44ed92
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 1 deletion.
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/test/astro-class-list.test.js b/packages/astro/test/astro-class-list.test.js
@@ -21,6 +21,7 @@ describe('Class List', async () => {
 		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);
 	});
@@ -36,5 +37,6 @@ describe('Class List', async () => {
 		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
@@ -18,3 +18,5 @@ import Component from '../components/Span.astro'
 <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
@@ -15,3 +15,5 @@
 <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']} />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -18,3 +18,5 @@ import Component from '../components/Span.astro'
		<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']} />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,3 +15,5 @@
		<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']} />