From 57ead0d5938e5988e3f896f3d6f8ef4516c4923f Mon Sep 17 00:00:00 2001 From: Erika <3019731+Princesseuh@users.noreply.github.com> Date: Wed, 17 Jun 2026 11:57:14 +0200 Subject: [PATCH 1/9] feat: make jsx whitespace handling the default (#16965) Co-authored-by: Armand Philippot --- .changeset/compress-html-jsx-default.md | 9 ++ packages/astro/package.json | 2 +- packages/astro/src/core/build/generate.ts | 2 +- .../astro/src/core/config/schemas/base.ts | 2 +- packages/astro/src/types/public/config.ts | 12 +- .../test/astro-script-template-dedup.test.ts | 16 +-- .../astro.config.mjs | 5 + .../minification-html-default/package.json | 8 ++ .../src/pages/index.astro | 23 ++++ packages/astro/test/minification-html.test.ts | 55 +++++++- packages/astro/test/serializeManifest.test.ts | 2 +- .../test/units/manifest/serialized.test.ts | 4 +- packages/astro/test/units/test-utils.ts | 2 +- pnpm-lock.yaml | 119 +++++++++++------- 14 files changed, 193 insertions(+), 68 deletions(-) create mode 100644 .changeset/compress-html-jsx-default.md create mode 100644 packages/astro/test/fixtures/minification-html-default/astro.config.mjs create mode 100644 packages/astro/test/fixtures/minification-html-default/package.json create mode 100644 packages/astro/test/fixtures/minification-html-default/src/pages/index.astro diff --git a/.changeset/compress-html-jsx-default.md b/.changeset/compress-html-jsx-default.md new file mode 100644 index 000000000000..3da7a85972b8 --- /dev/null +++ b/.changeset/compress-html-jsx-default.md @@ -0,0 +1,9 @@ +--- +'astro': major +--- + +Makes `'jsx'` the default value for `compressHTML` + +Astro now strips whitespace from your HTML using JSX rules by default, the same way frameworks like React do. Whitespace and line breaks around elements are removed, but meaningful whitespace within a single line — like a space between two inline elements — is preserved. To keep a space that would otherwise be removed, write it explicitly in your source, for example with `{" "}`. + +This can change rendered output where whitespace between inline elements was previously meaningful. To keep Astro's earlier behavior, set `compressHTML: true` for HTML-aware compression, or `compressHTML: false` to preserve all whitespace. diff --git a/packages/astro/package.json b/packages/astro/package.json index 8e4f1aeb13d1..100fa9bf9b24 100644 --- a/packages/astro/package.json +++ b/packages/astro/package.json @@ -133,7 +133,7 @@ "test:integration": "astro-scripts test \"test/*.test.ts\" --parallel --strip-types" }, "dependencies": { - "@astrojs/compiler-rs": "^0.1.10", + "@astrojs/compiler-rs": "^0.2.2", "@astrojs/internal-helpers": "workspace:*", "@astrojs/markdown-satteri": "workspace:*", "@astrojs/telemetry": "workspace:*", diff --git a/packages/astro/src/core/build/generate.ts b/packages/astro/src/core/build/generate.ts index 28c946082b3b..073d84462680 100644 --- a/packages/astro/src/core/build/generate.ts +++ b/packages/astro/src/core/build/generate.ts @@ -470,7 +470,7 @@ export async function renderPath({ relativeLocation: locationSite, from: fromPath, }); - if (config.compressHTML === true) { + if (config.compressHTML) { body = body.replaceAll('\n', ''); } if (route.type !== 'redirect') { diff --git a/packages/astro/src/core/config/schemas/base.ts b/packages/astro/src/core/config/schemas/base.ts index 2b47a419d85b..d931cb6cda9b 100644 --- a/packages/astro/src/core/config/schemas/base.ts +++ b/packages/astro/src/core/config/schemas/base.ts @@ -85,7 +85,7 @@ export const ASTRO_CONFIG_DEFAULTS = { devToolbar: { enabled: true, }, - compressHTML: true, + compressHTML: 'jsx', server: { host: false, port: 4321, diff --git a/packages/astro/src/types/public/config.ts b/packages/astro/src/types/public/config.ts index 46eeaec198a6..89ecdd45ae87 100644 --- a/packages/astro/src/types/public/config.ts +++ b/packages/astro/src/types/public/config.ts @@ -474,22 +474,22 @@ export interface AstroUserConfig< * @docs * @name compressHTML * @type {boolean | "jsx"} - * @default `true` + * @default `'jsx'` * @description * * Controls how Astro handles whitespace in your HTML. This affects both development mode and the final build output. * - * By default, Astro removes whitespace from your HTML, including line breaks, in a lossless manner from `.astro` components. Some whitespace may be preserved as needed to maintain the visual rendering of your HTML. + * Since v7.0, Astro applies by default the JSX whitespace rules used by frameworks like React. This removes whitespace and line breaks around elements, collapses multi-line text onto a single line, and preserves whitespace within a single line (e.g. a space between two inline elements). To keep a space that would otherwise be removed, include it explicitly in the source through constructs such as `{" "}`. * - * Since 6.2.0, this option can also be set to `"jsx"`, Astro will apply the JSX whitespace stripping rules used by frameworks like React. Leading and trailing whitespace is only preserved when explicitly included in the source code through constructs such as `{" "}`, and is otherwise removed entirely. + * Setting this option to `true` instead removes whitespace, including line breaks, in a lossless manner from `.astro` components. Some whitespace may be preserved as needed to maintain the visual rendering of your HTML. * - * Setting this option to false disables HTML compression and preserves all whitespace. + * Setting this option to `false` disables HTML compression and preserves all whitespace. * * ```js * { - * compressHTML: false + * compressHTML: true * // or: - * // compressHTML: 'jsx' + * // compressHTML: false * } * ``` */ diff --git a/packages/astro/test/astro-script-template-dedup.test.ts b/packages/astro/test/astro-script-template-dedup.test.ts index 5272a50cc6a0..9628e4f5d25f 100644 --- a/packages/astro/test/astro-script-template-dedup.test.ts +++ b/packages/astro/test/astro-script-template-dedup.test.ts @@ -29,8 +29,8 @@ describe('Scripts inside template elements', () => { const $ = cheerio.load(html); // One script inside the