Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using @navita/css without an adapter #32

Closed
paulm17 opened this issue Dec 1, 2023 · 3 comments
Closed

Using @navita/css without an adapter #32

paulm17 opened this issue Dec 1, 2023 · 3 comments

Comments

@paulm17
Copy link

paulm17 commented Dec 1, 2023

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.

  1. 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
Copy link
Contributor

Zn4rK commented Jan 16, 2024

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 #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 (facebook/stylex#309), but it might be more suited for what you want to do, since they do have a runtime support :)

@paulm17
Copy link
Author

paulm17 commented Jan 16, 2024

@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.

@paulm17 paulm17 closed this as completed Jan 16, 2024
@Zn4rK
Copy link
Contributor

Zn4rK commented Jan 16, 2024

👍 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants