Babel's “replaceWithMultiple” adds unnecessary parentheses #9851
Description
Bug Report
Current Behavior
A clear and concise description of the behavior.
Input Code
- REPL or Repo link if applicable
Babel plugin:
export default function (babel) {
const { types: t } = babel;
return {
name: "ast-transform", // not required
visitor: {
JSXElement(path) {
if (path.node.openingElement.name.name === "defs") {
path.replaceWithMultiple(
path.node.children.filter(t.isJSXElement)
);
}
},
}
};
}Expected behavior/code
<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="72" height="72" fill="white" />
<path d="M68.81 0H34.23C34.23 4.14003 35.8746 8.11049 38.8021 11.0379C40.2516 12.4875 41.9724 13.6373 43.8663 14.4218C45.7602 15.2062 47.7901 15.61 49.84 15.61H56.21V21.76C56.2127 25.8966 57.8571 29.8629 60.7821 32.7879C63.7071 35.7129 67.6734 37.3574 71.81 37.36V3C71.81 2.20435 71.4939 1.44129 70.9313 0.87868C70.3687 0.31607 69.6057 0 68.81 0V0Z" fill="#2684FF" />
<path d="M51.7 17.23H17.12C17.1226 21.3666 18.7671 25.3329 21.6921 28.2579C24.617 31.1829 28.5834 32.8273 32.72 32.83H39.09V39C39.0953 43.1366 40.7423 47.1019 43.6691 50.025C46.596 52.9481 50.5634 54.59 54.7 54.59V20.23C54.7 19.4343 54.3839 18.6713 53.8213 18.1087C53.2587 17.5461 52.4956 17.23 51.7 17.23V17.23Z" fill="url(#paint0_linear)" />
<path d="M34.58 34.45H0C0 38.59 1.64462 42.5605 4.57206 45.4879C7.49951 48.4154 11.47 50.06 15.61 50.06H22V56.21C22.0026 60.3431 23.6443 64.3065 26.565 67.2309C29.4857 70.1553 33.4469 71.8021 37.58 71.81V37.45C37.58 36.6543 37.2639 35.8913 36.7013 35.3287C36.1387 34.7661 35.3757 34.45 34.58 34.45Z" fill="url(#paint1_linear)" />
<linearGradient id="paint0_linear" x1="53.96" y1="17.29" x2="39.25" y2="32.46" gradientUnits="userSpaceOnUse">
<stop offset="0.18" stop-color="#0052CC" />
<stop offset="1" stop-color="#2684FF" />
</linearGradient>
<linearGradient id="paint1_linear" x1="1421.65" y1="1327.85" x2="786.064" y2="1949.52" gradientUnits="userSpaceOnUse">
<stop offset="0.18" stop-color="#0052CC" />
<stop offset="1" stop-color="#2684FF" />
</linearGradient>
</svg>;Actual behavior/code
<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="72" height="72" fill="white" />
<path d="M68.81 0H34.23C34.23 4.14003 35.8746 8.11049 38.8021 11.0379C40.2516 12.4875 41.9724 13.6373 43.8663 14.4218C45.7602 15.2062 47.7901 15.61 49.84 15.61H56.21V21.76C56.2127 25.8966 57.8571 29.8629 60.7821 32.7879C63.7071 35.7129 67.6734 37.3574 71.81 37.36V3C71.81 2.20435 71.4939 1.44129 70.9313 0.87868C70.3687 0.31607 69.6057 0 68.81 0V0Z" fill="#2684FF" />
<path d="M51.7 17.23H17.12C17.1226 21.3666 18.7671 25.3329 21.6921 28.2579C24.617 31.1829 28.5834 32.8273 32.72 32.83H39.09V39C39.0953 43.1366 40.7423 47.1019 43.6691 50.025C46.596 52.9481 50.5634 54.59 54.7 54.59V20.23C54.7 19.4343 54.3839 18.6713 53.8213 18.1087C53.2587 17.5461 52.4956 17.23 51.7 17.23V17.23Z" fill="url(#paint0_linear)" />
<path d="M34.58 34.45H0C0 38.59 1.64462 42.5605 4.57206 45.4879C7.49951 48.4154 11.47 50.06 15.61 50.06H22V56.21C22.0026 60.3431 23.6443 64.3065 26.565 67.2309C29.4857 70.1553 33.4469 71.8021 37.58 71.81V37.45C37.58 36.6543 37.2639 35.8913 36.7013 35.3287C36.1387 34.7661 35.3757 34.45 34.58 34.45Z" fill="url(#paint1_linear)" />
(
<linearGradient id="paint0_linear" x1="53.96" y1="17.29" x2="39.25" y2="32.46" gradientUnits="userSpaceOnUse">
<stop offset="0.18" stop-color="#0052CC" />
<stop offset="1" stop-color="#2684FF" />
</linearGradient>,
<linearGradient id="paint1_linear" x1="1421.65" y1="1327.85" x2="786.064" y2="1949.52" gradientUnits="userSpaceOnUse">
<stop offset="0.18" stop-color="#0052CC" />
<stop offset="1" stop-color="#2684FF" />
</linearGradient>)
</svg>;Babel Configuration (.babelrc, package.json, cli command)
export default function (babel) {
const { types: t } = babel;
return {
name: "ast-transform", // not required
visitor: {
JSXElement(path) {
if (path.node.openingElement.name.name === "defs") {
console.log(path.node.children.filter(t.isJSXElement))
path.replaceWithMultiple(path.node.children.filter(t.isJSXElement));
}
},
}
};
}Environment
- Babel version(s): [e.g. v6.0.0, v7.0.0-beta.34]
- Node/npm version: [e.g. Node 8/npm 5]
- OS: [e.g. OSX 10.13.4, Windows 10]
- Monorepo: [e.g. yes/no/Lerna]
- How you are using Babel: [e.g.
cli,register,loader]
Possible Solution
I found out there is replaceInline with does the job, but not sure if this is expected behavior or not.
Additional context/Screenshots
Add any other context about the problem here. If applicable, add screenshots to help explain.