search

eagerpatch / navita

Atomic CSS-in-JS with zero runtime
https://navita.style
MIT License
51 stars 0 forks source link

Using @navita/css without an adapter #32

Closed paulm17 closed 9 months ago

paulm17 commented 11 months ago

This looks like an interesting project so I thought I'd give it a go for a use case of mine.

I'm building a component library which would then use @navita/css to then generate the css for the component.

In the application, component is imported and styles would be overridden using @navita/css. Moreover, it would be a case of last object wins.

2 questions:

1) I've tried to use @navita/css within the component lib, however I get the error

Error: Could not find an adapter. Please ensure you have added a bundler integration:

Is it possible to run @navita/css without an adapter present? In this case, only react is present.

2) How does the creation of styles work? Is it like pandacss where it runs through the whole of the html payload and generates the styles? Would style creation work over the file boundary?

Here is an example from pandacss: https://panda-playground.vercel.app/tZQo-P_psO

Thanks

Zn4rK commented 9 months ago

Hi!

Thank you for your kind words @paulm17! I've missed your issue completely - sorry!

Running @navita/css without an adapter is currently not supported, and would be the same as issue https://github.com/eagerpatch/navita/issues/2.

Eventually I could see myself building support for a runtime adapter. I can definitely see the use case for it.

If you need an adapter we don't support today, I'm willing to add it.

To answer your questions:

  1. This would be possible, but it's important to note that Navita does not have a runtime, so anything you declare in your app would essentially be "static" styling. You can still use dynamic styling, and there are a few different approaches of this in the vite example directory.

  2. The way it works is per file basis, we run a transformation to find any known identifiers. "style" from "@navita/css" for example (this list is extensible btw, so you can hook into the engine if you want). When it finds an identifier, it evaluates the expressions in it, and saves it to a store. Then, on an adapter basis, only styles that are actually used in your project is generated. The tests in packages/core will give you some more information I think. But yes, it would work over file boundaries.

I use Navita in a few very large projects, mainly in Next.js-projects. And it has first class support for Next.js. Apart from panda-css, Facebook has now released Stylex, which has been an inspiration for this project. But it doesn't have very good Next.js support yet (https://github.com/facebook/stylex/issues/309), but it might be more suited for what you want to do, since they do have a runtime support :)

paulm17 commented 9 months ago

@Zn4rK Thanks for the reply! Appreciate it.

Good to hear about 1 and 2.

Re: an adapater. I think it's better to hold off for now. Whilst StyleX due to design decisions isn't a great fit for my needs. Griffel https://github.com/microsoft/griffel with RSC support should be fine.

If not. Then perhaps I'll take another look at @navita and go from there.

I'll close this issue now.

Zn4rK commented 9 months ago

👍 Sounds like a plan! Let me know if you run in to any problems if you do decide to try out Navita!

One important USP that Navita has is that it does not require you to use the same transpilation steps that your framework uses. This project does have an swc-plugin, but you don't have to use swc to use it. Navita will take care of that.

I plan on replacing swc with oxc and ezno at some point for more speed and even better static code extraction.