Empty lines between imports and component are removed instead of collapsed

[bensampaio]

🐛 Bug Report

After upgrading from v5 to v6 the template no longer keeps an empty line between the imports and component.

To Reproduce

Steps to reproduce the behavior:

I am using the following template:

const tsTemplate = (
  { componentName, imports, interfaces, jsx, props },
  { tpl }
) => tpl`
  import React, { ReactElement, SVGProps } from 'react';

  ${interfaces};

  export const ${componentName} = (${props}: SVGProps<SVGSVGElement>): ReactElement => (
    ${jsx}
  );
`;

And the following plugins:

plugins: [
            '@svgr/plugin-jsx'
          ],

Everything seems to work fine except that the empty lines in the template are removed instead of collapsed.

Expected behavior

Empty line between the imports and the component as shown below.

import React, { ReactElement, SVGProps } from 'react';

export const SomeIcon = (props: SVGProps<SVGSVGElement>): ReactElement => (
  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
    <path
      d="blablabla"
      fill="currentColor"
      fillRule="evenodd"
    />
  </svg>
);

Link to repl or repo (highly encouraged)

Clone this repo and follow the instructions in the README.

Run npx envinfo --system --binaries --npmPackages @svgr/core,@svgr/cli,@svgr/webpack,@svgr/rollup --markdown --clipboard

Paste the results here:

## System:
 - OS: macOS 11.6.7
 - CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
 - Memory: 25.55 MB / 16.00 GB
 - Shell: 5.8 - /bin/zsh
## Binaries:
 - Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
 - Yarn: 1.22.19 - ~/.yarn/bin/yarn
 - npm: 7.24.2 - ~/some/path
## npmPackages:
 - @svgr/core: ^6.3.1 => 6.3.1 
 - @svgr/webpack: ^6.3.1 => 6.3.1 

[gregberge]

Hello @bensampaio, as you can see in the tests, line returns are preserved. It should be an issue on your side. Feel free to submit a PR for a fix if you found the origin of the problem. Else it will not be fixed since it affects only you and it has no repro.

[bensampaio]

Hi @gregberge, thank you for your reply. I created a repo where I reproduced the issue. You can see it here. Follow the instructions in the README to see what happens.

~It seems to be related to prettier. The right config is picked up but when running prettier via svgr transform the lines are removed. While when running prettier via the CLI the lines are preserved.~

It seems to be related to @svgr/plugin-jsx. I removed the svgo and prettier plugin and then noticed that the empty lines are removed.

[emlai]

I'm experiencing this bug too. As a workaround, I added the blank lines back via regex: tsx.replace(/;\n(?!$)/g, ";\n\n").

[gregberge]

Thanks @bensampaio, I will give a look. Feel free to try to fix it, but I suspect a bug in Babel template.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.