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 8d13a4ac3c21..5eaf76c433f3 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