Lingui ignores whitespace in multi-item Trans tags

[aldeka]

Describe the bug
Any whitespace following a span wrapped by a lingui <Trans> tag is removed, contrary to React's own behavior.

To Reproduce

In React, the following markup

<h2>
        {'Welcome '}
        <span className="name">{name}</span>
        {' to your website.'}
</h2>

produces "Welcome Jane to your website."

When wrapped with a lingui Trans tag, like so:

<h2>
        <Trans>
                {'Welcome '}
                <span className="name">{name}</span>
                {' to your website.'}
        </Trans>
</h2>

the output is "Welcome Janeto your website." -- the space after the span is removed.

Expected behavior

I expect a single space to remain after the node inside the Trans tag.

I've tried  ing my way out, trying multiple ways to mark up the strings, and so far I've been unable to get that wanted space to stop getting stripped out of my sentence, even with hacks!

It's both inconsistent with React's behavior and a big pain in the butt when trying to translate any sentences with variables in them.

Additional context

• lingui version: 2.7.4
• babel version: 7.3

[tricoder42]

Hi @aldeka, sorry for problems. This issue is already fixed in next branch:

js-lingui/packages/macro/src/macroJsx.ts

Lines 13 to 28 in e9fead0

	// replace whitespace before/after newline with single space
	const keepSpaceRe = /\s*(?:\r\n|\r|\n)+\s*/g
	// remove whitespace before/after tag or expression
	const stripAroundTagsRe = /(?:([>}])(?:\r\n|\r|\n)+\s*|(?:\r\n|\r|\n)+\s*(?=[<{]))/g
	function normalizeWhitespace(text) {
	return (
	text
	.replace(stripAroundTagsRe, "$1")
	.replace(keepSpaceRe, " ")
	// keep escaped newlines
	.replace(/\\n/, "\n")
	.replace(/\\s/, " ")
	.trim()
	)
	}

If you want, backport it to master branch and please send a PR. I believe the relevant lines are in babel-plugin-transform-react:

js-lingui/packages/babel-plugin-transform-react/src/transformer.js

Lines 377 to 380 in f212786

	const text = props.text
	.replace(nlTagRe, "$1")
	.replace(nlRe, " ")
	.trim()

This will fix whitespace inconsistencies in JSX macros/plugins.

---

JS macros/plugins use similar approach, so we might also want to fix that as well:

Fix in next branch:

js-lingui/packages/macro/src/macroJs.ts

Lines 9 to 17 in e9fead0

	const keepSpaceRe = /(?:\\(?:\r\n|\r|\n))+\s+/g
	const keepNewLineRe = /(?:\r\n|\r|\n)+\s+/g
	function normalizeWhitespace(text) {
	return text
	.replace(keepSpaceRe, " ")
	.replace(keepNewLineRe, "\n")
	.trim()
	}

Relevant code in master:

js-lingui/packages/babel-plugin-transform-js/src/transformer.js

Line 325 in f212786

const text = props.text.replace(nlRe, " ").trim()

If you need any help with setting up the dev environment, please let me know 🙏

[bukku-jye]

We bump into the same problem with TS.

<Trans>
        {'Welcome '}
        <span className="name">Name</span>
        {' to your website.'}
</Trans>

We got

Welcome Nameto your website.

Any clues?

lingui version: 3.13.3
babel version: 7.18.5

[andrii-bodnar]

@bukku-accounting could you please check if it's reproducible on the latest Lingui version?

[Santalov]

Reproducible in lingui 4.11.1

            <Trans>
              Friend will get
              {' '}
              {ticketsFromReferralSystem}
              {' '}
              extra tickets
            </Trans>

Produces
Friend will get5extra tickets

[timofei-iatsenko]

Will be fixed in v5

Related PRs: #1882

Note in the changelog https://github.com/lingui/js-lingui/blob/e7b95a87496ba26db85cbae3b135650737f40fd0/website/docs/releases/migration-5.md#changes-in-whitespaces-handling