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 @@ + + + +