Pure warning when wrapping Ionic component with styled API

[aeharding]

Environment

• wyw-in-js version: 0.4.0
• custom processor: react
• Bundler (+ version): vite 5.1.1
• Node.js version: v20.8.1
• OS: macOS

Description

When building my React + Vite + Typescript + Ionic project, I see the following warning:

vite v5.1.1 building for production...
src/pages/Home.tsx (1:0) A comment

"/*#__PURE__*/"

in "src/pages/Home.tsx" contains an annotation that Rollup cannot interpret due to the position of the comment. The comment will be removed to avoid issues.

If you look at Home.tsx you will see I am wrapping the IonHeader component provided by the Ionic library with the Linaria styled API.

When doing this, I get the above console warning.

If I change styled(IonHeader) to styled.div the warning is gone.

Reproducible Demo

• Clone https://github.com/aeharding/pure-warning
• pnpm i
• pnpm build
• Observe console warnings

I am not sure if this is an Ionic, linaria or wyw issue, but I am guessing wyw because I do not get this warning when using the Emotion styled API.

[dlehmhus]

I think the issue is that the extracted expressions are marked as pure (what webpack understands), whereas rollup expects them to be marked as side effect free.