diff options
| -rw-r--r-- | .changeset/real-dogs-taste.md | 6 | ||||
| -rw-r--r-- | packages/astro/src/@types/astro.ts | 7 | ||||
| -rw-r--r-- | packages/astro/src/vite-plugin-jsx/index.ts | 1 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/solid-component/src/components/WithNewlines.jsx | 15 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/solid-component/src/pages/index.astro | 2 | ||||
| -rw-r--r-- | packages/integrations/solid/src/index.ts | 4 |
6 files changed, 29 insertions, 6 deletions
diff --git a/.changeset/real-dogs-taste.md b/.changeset/real-dogs-taste.md new file mode 100644 index 000000000..907d91b45 --- /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 b64edbb2b..ff158ffe1 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<babel.TransformOptions, 'presets' | 'plugins' | 'inputSourceMap'>; 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 004ae2eee..9881a7834 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 000000000..6ddc4c22d --- /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 ( + <> + <div class="multiline + + css-classes">Hello world - {count}</div> + </> + ); +} 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 73a9e2d3a..1f7522ced 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'; --- <html> <head><title>Solid</title></head> <body> <div> <Hello client:load /> + <WithNewlines client:load /> </div> </body> </html> diff --git a/packages/integrations/solid/src/index.ts b/packages/integrations/solid/src/index.ts index 1205c6d09..00c61a75a 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; |