[Bug]: line feeds without comments are being suppressed

[jlowcs]

💻

• Would you like to work on a fix?

How are you using Babel?

@babel/cli

Input code

REPL

const a = 42;

const b = 42;

// dsd
const c = 42;

Configuration file name

No response

Configuration

No response

Current and expected behavior

Current output:

"use strict";

const a = 42;
const b = 42;

// dsd
const c = 42;

Expected output:

"use strict";

const a = 42;

const b = 42;

// dsd
const c = 42;

Environment

• Babel: 7.19.6

Possible solution

No response

Additional context

This wasn't happening with 7.19.4.

[babel-bot]

Hey @jlowcs! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite.

[liuxingbaoyu]

This is expected. Changes in #14979.
Did this bother you? Can you provide information about the actual usage?

[jlowcs]

Kind of. We are using @svgr/cli to generate SVG React components, and it uses babel under the hood. So this change is suppressing all double line feeds in the output (which is supposed to still be readable).

[jlowcs]

We can probably live without those, it's just not ideal 😅

[liuxingbaoyu]

Can you show a before and after file?
I tested some files and it seems to be ok, although some places will not look as good without blank lines, but some unnecessary blank lines have disappeared.

[jlowcs]

before:

/*
 * This file is generated by icons/template.js
 */
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { COMMON, CommonProps } from '../constants';
import theme from '../theme';
import sizeStyle, { IconSizeProps } from '../lib/iconSize';

const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
  <svg width="1em" height="1em" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" role="img" {...props}>
    <path
      d="M255.708 445.235c-10.138 0-19.79-4.48-26.368-12.211L18.19 183.91c-12.34-14.54-10.523-36.352 4.018-48.691 14.567-12.365 36.353-10.573 48.717 3.993l184.808 218.01 185.013-218.01c12.314-14.54 34.176-16.332 48.692-3.993 14.566 12.365 16.358 34.176 3.993 48.717l-211.38 249.088a34.529 34.529 0 0 1-26.343 12.21"
      fill="currentColor"
      fillRule="evenodd"
    />
  </svg>
);

type Props = CommonProps & IconSizeProps;
const SvgBracketDown = styled(SvgComponent)<Props>`
  ${sizeStyle}
  ${COMMON}
`;
SvgBracketDown.defaultProps = {
  theme,
  // override default role set to img on generated icons
  role: 'none',
};
SvgBracketDown.propTypes = {
  ...sizeStyle.propTypes,
  ...COMMON.propTypes,
  theme: PropTypes.object, // eslint-disable-line react/forbid-prop-types
};
SvgBracketDown.displayName = 'IconBracketDown';
export default SvgBracketDown;

after:

/*
 * This file is generated by icons/template.js
 */
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { COMMON, CommonProps } from '../constants';
import theme from '../theme';
import sizeStyle, { IconSizeProps } from '../lib/iconSize';
const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
  <svg width="1em" height="1em" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" role="img" {...props}>
    <path
      d="M255.708 445.235c-10.138 0-19.79-4.48-26.368-12.211L18.19 183.91c-12.34-14.54-10.523-36.352 4.018-48.691 14.567-12.365 36.353-10.573 48.717 3.993l184.808 218.01 185.013-218.01c12.314-14.54 34.176-16.332 48.692-3.993 14.566 12.365 16.358 34.176 3.993 48.717l-211.38 249.088a34.529 34.529 0 0 1-26.343 12.21"
      fill="currentColor"
      fillRule="evenodd"
    />
  </svg>
);
type Props = CommonProps & IconSizeProps;
const SvgBracketDown = styled(SvgComponent)<Props>`
  ${sizeStyle}
  ${COMMON}
`;
SvgBracketDown.defaultProps = {
  theme,
  // override default role set to img on generated icons
  role: 'none',
};
SvgBracketDown.propTypes = {
  ...sizeStyle.propTypes,
  ...COMMON.propTypes,
  theme: PropTypes.object, // eslint-disable-line react/forbid-prop-types
};
SvgBracketDown.displayName = 'IconBracketDown';
export default SvgBracketDown;

But tbh those files are a bit of a mess to begin with. Still, if we wanted to make them a bit better and easier to read, we'd still not be able to rely on line feeds.

[liuxingbaoyu]

To be honest, it's all good for me.
There are only two blank lines in there, which may not seem like a big difference.

[JLHwung]

Babel currently does not preserve whitespaces because the AST does not record such information. You can give recast a try.

[dfernandez79]

I was bitten by this issue too. After upgrading @svgr/cli I started to see that eslint-prettier failed for all the generated TSX files.

I can confirm that it was caused by @babel/generator (forcing NPM to use v7.18.13 instead of v7.20.5 fixes the issue).

@JLHwung, I don't get your comment. After looking into #14979, #15036 there was a lot of work done in @babel/generator to handle whitespace. These changes have probably introduced the whitespace handling differences. Can the team consider re-opening this issue?

The AST stores the location information for each node, and @babel/generator uses it to handle new lines for comments: https://github.com/babel/babel/blob/main/packages/babel-generator/src/printer.ts#L1023
and statements: https://github.com/babel/babel/blob/main/packages/babel-generator/src/printer.ts#L774

[nicolo-ribaudo]

@dfernandez79 @babel/generator will properly respect new lines if you enable the retainLines: true option.

[liuxingbaoyu]

@dfernandez79
Previously babel didn't preserve newlines, it just added them forever.
And after that PR, babel doesn't add new lines according to the algorithm.

[dfernandez79]

Thank you for taking the time to answer. I'm looking into the SVGR project to see if I can set the retainLines: true by default.

At the moment I added that configuration to SVGR (it allows passing configuration to transformFromAstSync) but it didn't change the output 😞 . I'll continue the thread in that project as it may be a problem in SVGR.