styled-component crashed once transformed by swc minifier (trying to replace terser with webpack)

[TruffeCendree]

Describe the bug

First of all: here a "minimal" reproduction repository.

Tested with the latest version of @swc/core (1.2.102).

I'm using the swc minifier with webpack, babel, react and styled-components.

The resulting build crashes when running: npx webpack with output (source map off):

index.js:1 Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at CM (index.js:1)
    at eL.useContext (index.js:1)
    at index.js:1
    at bZ (index.js:1)
    at cv (index.js:1)
    at Fy (index.js:1)
    at ea (index.js:1)
    at bG (index.js:1)
    at _F (index.js:1)
    at YE (index.js:1)

index.js:1 Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at CM (index.js:1)
    at eL.useContext (index.js:1)
    at index.js:1
    at bZ (index.js:1)
    at cv (index.js:1)
    at Fy (index.js:1)
    at ea (index.js:1)
    at bG (index.js:1)
    at _F (index.js:1)
    at YE (index.js:1)

Switching to terser produces a valid build:

// webpack.config.js

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

The source file:

import React from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';

const StyledP = styled.p`
  text-align: center:
`

ReactDOM.render(<StyledP>...</StyledP>, document.getElementById('app'));

I discovered a few other bugs with our medium-sized project. I will share them progressively over time.

My final goal is to pass every specs with swc on.

[alexander-akait]

is text-align: center: expected? Because it is not valid CSS

[mohd-akram]

Getting the same issue with react-loader-spinner (tested with the same minimal repo):

import React from 'react';
import ReactDOM from 'react-dom';
import Loader from 'react-loader-spinner';

ReactDOM.render(<Loader type="BallTriangle"/>, document.getElementById('app'));

index.js:1 Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at _P (index.js:1)
    at DO.useState (index.js:1)
    at rK (index.js:1)
    at Zu (index.js:1)
    at _ (index.js:1)
    at YF (index.js:1)
    at WF (index.js:1)
    at TE (index.js:1)
    at pE (index.js:1)
    at ir (index.js:1)

[TruffeCendree]

is text-align: center: expected? Because it is not valid CSS

Sorry, that is a mistake. I just checked again with the fixed code and swc 1.2.103. Same result.

[anonrig]

We're facing the same exact issue with TerserPlugin with minify terserPlugin.swcMinify option with "terser-webpack-plugin": "^5.3.1" and "@swc/core": "^1.2.148"