feat: support bundling of css @import rules

[nobkd]

Support bundling of @import rules, useful, e.g. when importing CSS from node_modules

TODO:

• Write a simple test that involves @import

[tipiirai]

Seems like a legit feature. One thing to note that hot-reloading is not supported for @import:ed files since Nue has no way of tracking those dependencies (without writing a Lightning CSS extension, but that feels like an overkill)

[nobkd]

The test for Windows seems to fail, because of the code on master.
Here is the same run, but just for the branch (I reset to before the last merge commit, to be able to test without jest issues): https://github.com/nobkd/nue/actions/runs/9293144796

The thing about not being able to trace @imported files for hot reloading should probably be mentioned in the docs then. This also probably only occurs, when the CSS file is in a local project, and not from a package... I agree, that it would be hard to track changes for imported files, and probably isn't needed.
We can still think about the possibility of being able to modify the lightningcss config that is passed to the transformation/bundling (#220)

[tipiirai]

@import sounds like the right solution to include Glow styling from node_modules, instead of hacking the dependency inside nuekit

[nobkd]

@import sounds like the right solution to include Glow styling from node_modules, instead of hacking the dependency inside nuekit

I'm not sure, how exactly you mean that 🤷

But just, so you know: Imports from node_modules have to provide the path to/with node_modules (relative or absolute), it is not resolved automatically by lightningcss.

So I don't know how exactly you would do that when glow is just installed (globally) because of nuekit or locally, because nuekit is local, so...

[tipiirai]

So the syntax of importing from node_modules is something like this ?

@import url("node_modules/nuekit/browser/syntax.css")

And the imported CSS is always bundled inside the parent CSS regardless of where it is imported?

The above would allow me to get rid of the automagical syntax.css auto-inclusion:

https://github.com/nuejs/nue/blob/master/packages/nuekit/src/site.js#L279

Thanks!

[nobkd]

I'm not sure. Probably. It's too long in the past that I did the code changes. Also I not completely sure, what exactly you want to do.

You probably can use the resolvePath from init.js to get an absolute path to the css.
But what's next?

---

BTW: I forgot to change the merge request branch to point to master. So the changes from here are on dev now, but not on master. (edit: merged dev to master)