diff options
6 files changed, 23 insertions, 2 deletions
diff --git a/.changeset/dirty-doors-call.md b/.changeset/dirty-doors-call.md new file mode 100644 index 000000000..d8358dfd2 --- /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 ea287de80..2f6ec3286 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 0fe36a860..24dfa2b1a 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 05e268f90..9787fb458 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 e904a0899..5eb64bb12 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' <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 index a642557de..d8ad8aec2 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 @@ <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']} /> |