Pure warning when wrapping Ionic component with styled API - Githubissues

Anber / wyw-in-js

MIT License

240 stars 16 forks source link

Pure warning when wrapping Ionic component with styled API #62

Open aeharding opened 9 months ago

aeharding commented 9 months ago

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 commented 3 months ago

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.