Getting error "ReferenceError: Property 'CssSyntaxError' doesn't exist" while using styled-component in React native repack project.

[jigaradesara01]

Environment

"react": "18.2.0",
"react-native": "0.72.7",
"styled-components": "^6.1.1",
"@callstack/repack": "^3.6.0"

Description

I'm trying to use styled-component in react native repack project but getting "Property 'CssSyntaxError' doesn't exist react native" while running the project.

Repack project sample:
https://github.com/callstack/repack

##LocalModule.tsx

import { Text } from 'react-native';
import styled from 'styled-components/native';

const LocalModule = () => {
    return (
        <Container>
            <Text >React Native</Text>
        </Container>
    );
};

const Container = styled.View`
      flex: 1;
      background-color: white;
      align-items: center;
      justify-content: center;
    `;


export default LocalModule;
```

Thanks in advance.

[quantizor]

My guess is multiple versions of postcss are installed and it's causing issues. We could add postcss to peerDependencies so it dedupes better.

[quantizor]

Try styled-components@6.1.5-rc.0 and let me know if that resolves it (adds postcss as a peer dependency)