Cannot Use Props in Tagged Template with @swc/plugin-styled-components and Rspack

[DenyCZ]

Hello, i am having troubles setting up @swc/plugin-styled-components. I am trying to make it work with rspack with builtin swc loader. I cannot get it working with passing variable or props from the React component.

I am using latest versions of @swc/core, @swc/plugin-styled-components, rspack 1.4.7.

Configuration:

            {
              pure: true,
              ssr: false,
              displayName: true,
              fileName: true,
              meaninglessFileNames: ['index', 'styles'],
              transpileTemplateLiterals: false,
              minify: false,
              cssProp: true,
            },

Example component:

import {css, useTheme} from 'styled-components';

export interface MyInterface {
  children: ReactNode;
  size?: 'small' | 'big';
  color?: 'red' | 'blue';
}

export const ExampleComponent = (props: MyInterface) => {
  const theme = useTheme();
  return (
    <section
      css={css`
        display: flex;
        flex-direction: column;
        position: relative;
        background-color: ${props.color};
        box-shadow: ${theme.shadows.big};
        margin: 0 ${props.size};
      `}
    >
      {props.children}
    </section>
  );
});

And error is looking like this:

Uncaught ReferenceError: props is not defined
    at eval (MyComponent:47:1)
    at ./libs/package/MyComponent.tsx

Thank you in advance.