From e97406a16815ec8773e170929460b2ebba43b37e Mon Sep 17 00:00:00 2001 From: Erika <3019731+Princesseuh@users.noreply.github.com> Date: Wed, 27 Dec 2023 13:48:06 -0500 Subject: [PATCH 1/2] fix: hug when needed for components and fragments (#397) * fix: hug when needed for components and fragments * fix: consider Component, Fragments and custom elements as whitespace sensitive * chore: changeset --- .changeset/khaki-parrots-yawn.md | 5 +++++ src/printer/index.ts | 2 +- src/printer/utils.ts | 17 +++++------------ .../basic/html-custom-elements/output.astro | 2 +- .../markdown/embedded-in-markdown/input.md | 4 +--- test/fixtures/other/fragment/input.astro | 4 ++++ test/fixtures/other/fragment/output.astro | 8 ++++---- 7 files changed, 21 insertions(+), 21 deletions(-) create mode 100644 .changeset/khaki-parrots-yawn.md diff --git a/.changeset/khaki-parrots-yawn.md b/.changeset/khaki-parrots-yawn.md new file mode 100644 index 0000000..f9f4a7d --- /dev/null +++ b/.changeset/khaki-parrots-yawn.md @@ -0,0 +1,5 @@ +--- +'prettier-plugin-astro': minor +--- + +Fix plugin sometimes including significant whitespace inside components, fragments and custom elements diff --git a/src/printer/index.ts b/src/printer/index.ts index 9e6e928..25b30ec 100644 --- a/src/printer/index.ts +++ b/src/printer/index.ts @@ -239,7 +239,7 @@ export function print(path: AstPath, opts: ParserOptions, print: printFn): Doc { } if (!hugEnd && lastChild && isTextNode(lastChild)) { if (isInlineElement(path, opts, node) && !didSetEndSeparator) { - noHugSeparatorEnd = softline; + noHugSeparatorEnd = line; } trimTextNodeRight(lastChild); } diff --git a/src/printer/utils.ts b/src/printer/utils.ts index 088a9e3..d01f1c0 100644 --- a/src/printer/utils.ts +++ b/src/printer/utils.ts @@ -27,18 +27,15 @@ export const dotReplace = 'ωP_'; export const interrogationReplace = 'ΔP_'; export function isInlineElement(path: AstPath, opts: ParserOptions, node: anyNode): boolean { - return node && node.type === 'element' && !isBlockElement(node, opts) && !isPreTagContent(path); + return node && isTagLikeNode(node) && !isBlockElement(node, opts) && !isPreTagContent(path); } export function isBlockElement(node: anyNode, opts: ParserOptions): boolean { return ( - (node && - node.type === 'element' && - opts.htmlWhitespaceSensitivity !== 'strict' && - (opts.htmlWhitespaceSensitivity === 'ignore' || - blockElements.includes(node.name as TagName))) || - node.type === 'component' || - node.type === 'fragment' + node && + node.type === 'element' && + opts.htmlWhitespaceSensitivity !== 'strict' && + (opts.htmlWhitespaceSensitivity === 'ignore' || blockElements.includes(node.name as TagName)) ); } @@ -127,10 +124,6 @@ export function shouldHugStart(node: anyNode, opts: ParserOptions): boolean { return false; } - if (node.type === 'fragment') { - return false; - } - if (!isNodeWithChildren(node)) { return false; } diff --git a/test/fixtures/basic/html-custom-elements/output.astro b/test/fixtures/basic/html-custom-elements/output.astro index 3c60556..5bee4d5 100644 --- a/test/fixtures/basic/html-custom-elements/output.astro +++ b/test/fixtures/basic/html-custom-elements/output.astro @@ -1 +1 @@ - + diff --git a/test/fixtures/markdown/embedded-in-markdown/input.md b/test/fixtures/markdown/embedded-in-markdown/input.md index 79a7375..2ca5856 100644 --- a/test/fixtures/markdown/embedded-in-markdown/input.md +++ b/test/fixtures/markdown/embedded-in-markdown/input.md @@ -59,9 +59,7 @@ For best results, you should only have one ` - - ... - + ... ``` diff --git a/test/fixtures/other/fragment/input.astro b/test/fixtures/other/fragment/input.astro index 43a6d5d..a43f9c3 100644 --- a/test/fixtures/other/fragment/input.astro +++ b/test/fixtures/other/fragment/input.astro @@ -11,5 +11,9 @@ Hello world! lorem + <>Hello world! + + lorem + diff --git a/test/fixtures/other/fragment/output.astro b/test/fixtures/other/fragment/output.astro index eaa859a..68a8387 100644 --- a/test/fixtures/other/fragment/output.astro +++ b/test/fixtures/other/fragment/output.astro @@ -7,9 +7,9 @@ Document - <>Hello world! - - lorem - + <> Hello world! + lorem + <>Hello world! + lorem From 4354afde4877ff0bccfb1b643e63e8a114e617ae Mon Sep 17 00:00:00 2001 From: Erika <3019731+Princesseuh@users.noreply.github.com> Date: Wed, 27 Dec 2023 15:54:20 -0500 Subject: [PATCH 2/2] fix: rewrite readme (#400) * fix: rewrite readme * Apply suggestions from code review Co-authored-by: Sarah Rainsberger --------- Co-authored-by: Sarah Rainsberger --- README.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 4361e8a..d6caa37 100644 --- a/README.md +++ b/README.md @@ -42,12 +42,15 @@ export default { To customize formatting behavior, see the [Configuration](#configuration) section below. -## Using in VS Code +## Formatting with the VS Code Prettier extension directly > **Note** -> If you're using [Astro's VS Code extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode), Prettier and this plugin are already included. Only follow the guide below to format using Prettier's official extension. +[The Astro VS Code extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) uses Prettier and this plugin (`prettier-plugin-astro`) to format your code. You will only need to install the VS Code Prettier extension separately for formatting if: -First install the [VS Code Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) and add the following settings to your VS Code configuration: +- You are not using Astro's VS Code extension. +- You want to use features of the Prettier extension that not supported by Astro's own VS Code extension, such as the toolbar panel showing Prettier's status. + +Install the [VS Code Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) and add the following settings to your VS Code configuration: ```json { @@ -92,7 +95,7 @@ See [CONTRIBUTING.md](./CONTRIBUTING.md) for instructions on how to set up your ## Sponsors -Astro is generously supported by Netlify, Storyblok, and several other amazing organizations. +Astro is free, open source software made possible by these wonderful sponsors. [❤️ Sponsor Astro! ❤️](https://github.com/withastro/.github/blob/main/FUNDING.md)