Concatenation of += operator

[dithom]

trafficstars

Describe the bug

When using the += operator first on a number and then on a string while the compress option is active, the output will be concatenated. This leads to unwanted results at runtime.

Please see 'additional context' for full explanation, as @swc/core is used via swc-loader, terser-webpack-plugin and webpack. I can not reproduce it on the playground, but maybe someone knows, whats going on. Thanks!

Already tried it here: https://github.com/webpack-contrib/terser-webpack-plugin/issues/610#issuecomment-2313052072

Input code

For example:

x = 100;
x += dist;
x += 'px';

should output

x=100,x+=dist,x+='px'

which outputs `150px` at runtime. Instead it outputs

x=100,x+=dist+'px'

So at runtime the result ist not `150px` but `10050px`.

Config

No response

Playground link (or link to the minimal reproduction)

https://play.swc.rs/?version=1.7.18&code=H4sIAAAAAAAAA31TUU%2FbMBB%2B51fcHkYcQC17JYoQGkziAYZapiGhPXjJpbXk2pF9adNB%2Fztnt0lKxxbJie9899133zlVYwpS1kAtzY%2B6lIQgMIWXI%2BBHVSA%2BLewSr5XDGHbT1rzBsouAkDcl6QhyqKT2mO38DqlxZmtt4ruQlXCyujUltmnWF%2BgAGBK6Ywbjrah25ET6MvBjehlswjrqMT7kCHmeQ3KZBOB%2FBMAM6e6jIxHx%2Fws%2FSBBlqh0u0dC0cFZrOD4G5R9tU8xvgpc5BxbvY3Ig12DfB7C57jG3qDiidR3GATHRj3ChSBwgwyUkFByhkwQuICmdnEXjDJSpbKjetcPD4EFQMRfoHAP3xZfSQRs5SeM163xrFJ31bABK5Wmr2DXvhJaeHqxXQZJQRvVWmu3rMrdO%2FbGGpIbXV6hUi%2BVPVdI8WLIhG410r%2B%2FxGCaocSkNgVYGPfxGbVf9eQuneSSTvXcldZtkfY%2FIV3EPNHRXoytYMTnDJ%2B7jcXJ1P%2F32fXLH8sXWTkARLjx%2Fv5yfwxiEWCpc1Zav9inMGiJkvU7Aa1XiV9sYusdVetHl7nL%2BTjlguUfikP%2FngX43lCIIxxq4kae1xuc4nMq6xRWR%2B9VNKzgeHLK2XDaswWs9sXv4CzdvSAKKdPADAAA%3D&config=H4sIAAAAAAAAA1WPSw7DIAwF95wCed1tu%2BgdcghEnYiIn2wiFUW5e4FA2%2BzwvDFP3oWUsLKGp9zLswxRESN950I4%2B6TehQBqp1iTiQluI125RrOyjA0dZwJJ0YKpbfG962BDYBx6Z854M%2Bf%2FQh1cJGS%2BilVVfrF4rRO9Elx4bS3sh6Qc8ax%2FwE8aZYm29i8YnsZiZeL4ADoI3bUTAQAA

SWC Info output

Operating System: Platform: darwin Arch: arm64 Machine Type: arm64 Version: Darwin Kernel Version 23.5.0: Wed May 1 20:12:58 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6000 CPU: (10 cores) Models: Apple M1 Pro

Binaries:
    Node: 20.7.0
    npm: 10.1.0
    Yarn: N/A
    pnpm: N/A

Relevant Packages:
    @swc/core: 1.3.101
    @swc/helpers: N/A
    @swc/types: 0.1.5
    typescript: 5.1.6

SWC Config:
    output: N/A
    .swcrc path: N/A

Next.js info:
    output: N/A

Expected behavior

The output should be:

x=100,x+=dist,x+='px'

Actual behavior

The output is:

x=100,x+=dist+'px'

Version

1.3.101

Additional context

I came across this while working with https://github.com/ganlanyuan/tiny-slider, see https://github.com/ganlanyuan/tiny-slider/blob/4d709735c417c2483e77a22d017fc1b18c04f0d4/src/tiny-slider.js#L2606.

How Do We Reproduce?

Use the plugin to bundle the TinySlider code, with the following config:

minimizer: [
    new TerserPlugin({
        minify: TerserPlugin.swcMinify,
        terserOptions: {
            compress: true,
        },
        parallel: true,
    }),
],

What I already checked

• Terser CLI with command --compress --mangle --mangle-props -- node_modules/tiny-slider/src/tiny-slider.js. This does not output the same behavior, which leads me to think the plugin being the issue.
• Checked Terser commits regarding this issue from 5.26.0 to 5.31.5.
• Checked Webpack commits regarding this issue from 5.89.0 to 5.94.0.

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 69.23 MB / 16.00 GB
  Binaries:
    Node: 20.7.0 - ~/.nvm/versions/node/v20.7.0/bin/node
    npm: 10.1.0 - ~/.nvm/versions/node/v20.7.0/bin/npm
  Browsers:
    Brave Browser: 127.1.68.141
    Safari: 17.5
  Packages:
    css-loader: 6.8.1 => 6.8.1 
    file-loader: 6.2.0 => 6.2.0 
    postcss-loader: 7.3.4 => 7.3.4 
    sass-loader: 13.3.3 => 13.3.3 
    style-loader: 3.3.3 => 3.3.3 
    swc-loader: ^0.2.3 => 0.2.3 
    terser-webpack-plugin: 5.3.10 => 5.3.10 
    webpack: 5.89.0 => 5.89.0 
    webpack-cli: 5.1.4 => 5.1.4 
    webpack-merge: 5.10.0 => 5.10.0 
    webpackbar: 6.0.0 => 6.0.0

Screenshot of the actual issue inside the project:

[SeeSpring]

Playground minimization https://play.swc.rs/?version=1.7.24&code=H4sIAAAAAAAAA0utKMgvKlFIK81LLsnMz1NI06jQUUjJLC7RrOZSUKhQ0LYF86xhHPWCCnUQpyi1pLQoT6GCqxYA06QZKUIAAAA%3D&config=H4sIAAAAAAAAA32VPZLbMAyFe5%2FCozpFmqTIAdLlDByaBGU6IqEhQK81O757oD%2FvJgHVWfgeBPMBhN5P53N3I9f9OL%2FLT3kYbSEor2eJ0JTZPiTSgUuWXIkjd192eqMZBTsQLKHnSjq2pQdesujbJu8GRIJdvsVSzDFMnws6TGMBok8xicr7aoLM9Hf%2Bxgq%2BaeCCOIDNR8hYMjEz9FA0mcNhsCOBudsGT2JZJFSLzLQyeDMWHHVB9pEjZokr2IP1xqEHjcUCjuMd1ESpJ4mZ5JAt7OFS%2B35p9r8c7naolrVUeCzNkb%2BswCtGYhOqasYKW06stOFyDKYA16LVvGHMrbzfAGLDYImyTapRiyLIcLXhYWrMQQaYJ4XLtKsnzdCLtSbGoPk7%2BwOFo1qygK8OZoPdAW6YQdGDgRBkalT8Ftld1bI8jYBBI9Jpqx5jBaZ5Mzc%2BX5AD%2FFMOyvqobYpk%2BdqmNKULqjdrTwe%2Boj8QSDsY27jI3niMbV6zBxkQ8Kqkkgrme8uG0QzLBv1%2FQuSmyDtNP%2BBF3xujTPzSya9b7Pla2Mnm%2FmMnrDv7tAm6hL4ucPsazI1fd%2Fj37kO0b%2BxX1S7Srz2TS4XT8w%2FnCM7tWQYAAA%3D%3D

Also x=100,x=x+dist+'px' should be shorter than x=100,x+=dist,x+='px'

[dithom]

@SeeSpring thanks for the working playground example! Additionally the problem especially occurs, when dist is provided with a negative value. Then the resulting string is not even a valid number.

[swc-bot]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.