Why solito does not accept babel nativewind className transformation?

[Jonatthu]

https://github.com/marklawlor/nativewind/issues/301

On the documentation it mentioned that you must use styled to wrap your components in order to use className and to ignore nativewind documentation regarding setting up nextjs with babel to use their nativewind/babel plugin so it can transform components using className to styled or Stylesheet for you.

Solito mentions this won't work without no explanation at all.

Need to understand what's the limiting factor and how to overcome it.

Any help or hints? @nandorojo

[nandorojo]

next.js doesn't use babel, it uses SWC in our config

[Jonatthu]

https://nextjs.org/docs/advanced-features/customizing-babel-config

What does that mean exactly? I was able to declare a babel config on the next folder and make it to read it.

But it does not parse my classNames just like on the expo folder.

Is there any workaround?

[Jonatthu]

https://github.com/swc-project/plugins/issues/103

This would be a way?

[Jonatthu]

Also to opt out of SWC and just use babel?

[Jonatthu]

@nandorojo I have opt out from SWC and made it work, although SWC is way better than babel, current production apps solutions can not deal 100% with these news tools.

[Jonatthu]

Now I can use or from react native without wrapping my components on styled()

[nandorojo]

FWIW, I recommend making your own design system components in general so you can control them from one place

[Jonatthu]

Yeah I was doing my own design system, the problem is that I recently switched from twnrc and now I am on nativewind so I could not wrap all of my components into styled() without trying className babel transform first. Would you like me to submit a pull request to have another copy but this using babel as a compiler? @nandorojo this way solito keeps neutral between babel or SWC on both sides on next.

[nandorojo]

probably not needed, i'd rather keep the current suggestion. people can reference the nativewind docs if they want

[Jonatthu]

Then I suggest on solito docs website to change the next paragraph

If you're reading the NativeWind docs, you might find that you can use className directly without using styled. Since this requires the Babel plugin for all platforms, it won't work with Solito. Be sure to always wrap your components with styled.

To

If you're reading the NativeWind docs, you might find that you can use className directly without using styled. Since this requires the Babel plugin for all platforms, you will need to opt out from SWC as a compiler and add a babel config to your nextjs project. If just using SWC be sure to always wrap your components with styled.

[Jonatthu]

Anyways just to let you know @nandorojo I gave up and use styled() more since even the creator actually prefers it!