diff --git a/.changeset/real-dogs-taste.md b/.changeset/real-dogs-taste.md new file mode 100644 index 000000000000..907d91b45140 --- /dev/null +++ b/.changeset/real-dogs-taste.md @@ -0,0 +1,6 @@ +--- +'astro': patch +'@astrojs/solid-js': patch +--- + +Fix newline characters in SolidJS JSX attributes (ex: multiline CSS classes) diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts index b64edbb2bd2f..ff158ffe1823 100644 --- a/packages/astro/src/@types/astro.ts +++ b/packages/astro/src/@types/astro.ts @@ -793,12 +793,7 @@ export interface HydrateOptions { value?: string; } -export interface JSXTransformConfig { - /** Babel presets */ - presets?: babel.PluginItem[]; - /** Babel plugins */ - plugins?: babel.PluginItem[]; -} +export type JSXTransformConfig = Pick; export type JSXTransformFn = (options: { mode: string; diff --git a/packages/astro/src/vite-plugin-jsx/index.ts b/packages/astro/src/vite-plugin-jsx/index.ts index 004ae2eee98b..9881a78349af 100644 --- a/packages/astro/src/vite-plugin-jsx/index.ts +++ b/packages/astro/src/vite-plugin-jsx/index.ts @@ -63,6 +63,7 @@ async function transformJSX({ sourceMaps: true, configFile: false, babelrc: false, + inputSourceMap: options.inputSourceMap, }); // TODO: Be more strict about bad return values here. // Should we throw an error instead? Should we never return `{code: ""}`? diff --git a/packages/astro/test/fixtures/solid-component/src/components/WithNewlines.jsx b/packages/astro/test/fixtures/solid-component/src/components/WithNewlines.jsx new file mode 100644 index 000000000000..6ddc4c22dab3 --- /dev/null +++ b/packages/astro/test/fixtures/solid-component/src/components/WithNewlines.jsx @@ -0,0 +1,15 @@ +// Test introduced to ensure JSX is correctly transformed +// See https://github.com/withastro/astro/issues/3371 +import { createSignal } from 'solid-js'; + +export default function WithNewlines() { + const [count] = createSignal(0); + + return ( + <> +
Hello world - {count}
+ + ); +} diff --git a/packages/astro/test/fixtures/solid-component/src/pages/index.astro b/packages/astro/test/fixtures/solid-component/src/pages/index.astro index 73a9e2d3afda..1f7522cedcb4 100644 --- a/packages/astro/test/fixtures/solid-component/src/pages/index.astro +++ b/packages/astro/test/fixtures/solid-component/src/pages/index.astro @@ -1,11 +1,13 @@ --- import Hello from '../components/Hello.jsx'; +import WithNewlines from '../components/WithNewlines.jsx'; --- Solid
+
diff --git a/packages/integrations/solid/src/index.ts b/packages/integrations/solid/src/index.ts index 1205c6d091d6..00c61a75a8d6 100644 --- a/packages/integrations/solid/src/index.ts +++ b/packages/integrations/solid/src/index.ts @@ -12,6 +12,10 @@ function getRenderer(): AstroRenderer { const options = { presets: [solid({}, { generate: ssr ? 'ssr' : 'dom', hydratable: true })], plugins: [], + // Otherwise, babel will try to consume the source map generated by esbuild + // This causes unexpected issues with newline characters: https://github.com/withastro/astro/issues/3371 + // Note "vite-plugin-solid" does the same: https://github.com/solidjs/vite-plugin-solid/blob/master/src/index.ts#L344-L345 + inputSourceMap: false as any, }; return options;