CSS file imports are appearing above banner section

[MTG2000]

Hi
So I'm using this library in building a React library that is supposed to work in Next.js.
As you know in Next.js 13+, you need to have a "use client"; directive at the top of each component file.

This is usually achieved in vite by adding the "use client"; directive as a banner.
But this library puts the css imports at the top of the file, so the directives are not working.

Is there a way to make the css imports appear after the banner?
Or should I be tackling this issue using something other than banners completely??

Thanks for your help.

[emosheeep]

Yes, I was about to do it originally as what your said. For now this plugin just adds a line and is not using AST analysis. The CSS injection supposes to be put at the end of the import statement blocks. But I have no time to work on this these days, maybe someone can pull a request? 😄 It's simple.

[emosheeep]

Maybe I can have it done in a certain weekend in the future.

[emosheeep]

I've published 2.1.0-beta.0, you can have a try.

[MTG2000]

Hey @emosheeep
Thanks a lot for the quick update!
I tried the new version, & it's working 👌

[emosheeep]

v2.1.0 has been published.

[StefanFeser]

Hi @emosheeep

I think this issue has been reintroduced with 2.2.0. When updating to 2.2.0 from 2.1.1 the CSS import is placed before the output.banner content.
After downgrading back to 2.1.1, it works again. I'm also using output.banner to place use client on top of each component.

Thanks for your work!

[emosheeep]

maybe this is caused by ast-grep's new version，i'll check later