Support in Astro about unocss HOT 38 CLOSED

0.24 (which is in prerelease currently) should unlock Unocss working in Astro.

from unocss.

Update again: astro-uno does all the tricks to support Astro, like monkey-patching the Vite plugin to run on SSR mode. I ended up with using this without any patches and tricks.

from unocss.

https://github.com/unocss/unocss/tree/main/packages/astro

from unocss.

I can give an update. When you use UnoCSS in a .astro file that file never actually gets built by Vite. That's the core issue blocking usage of UnoCSS (and other Vite plugins).

I'm working on changing how our build works and that will be release behind a flag in the near future (first PR is already submitted). That will unblock many Vite plugins. From what I saw in my testing, the UnoCSS plugin still doesn't work, however. I didn't dive into why yet; in theory it should work similar to how it works with the typical SPA setup. I'll look into this more soon and give an update here.

from unocss.

Tested a bit and made wip PR on #162

• withastro/astro#1969
• Astro replaced vite:css-post- Ideally I think it's better to have the same name so plugins relying on it won't break
• plugin resolvedId does not seem to called on Astro build

from unocss.

Update: things work flawlessly when I patch the @unocss/vite plugin's unocss:global:build:generate sub-plugin to run on SSR only. Although this sounds like a very Astro-specific tweak, I believe this is worth exposing as an option. (to pick between client bundle, SSR bundle, or both)

@antfu What do you think about this? I can make a PR if you agree with the direction.

from unocss.

The same issue occurs when using UnoCSS with îles. When building, especially with hydration, îles will throw an error as well:

[unocss:global:build:generate] [unocss] does not found CSS placeholder in the generated chunks,
this is likely an internal bug of unocss vite plugin

from unocss.

I just tried with Astro 1.0.0-rc.2. It works flawlessly in most cases. However, since all Vite plugins get applied AFTER the Astro framework integrations(which can contain JSX transforms), Attributify mode is currently broken. I wonder if we could bypass this by providing our own Astro integration.

from unocss.

An update on our end, we might be able to solve this on our end without you needing to do anything. Since the CSS is already loaded and JITed during the SSR load phase we should be able to fetch the code from that, just like what happens in dev.

from unocss.

I'm not the one who made the integration, @AllanChain did! 🚀 I guess they will know what should be done further :D

from unocss.

I guess they will know what should be done further :D

Sorry for the late reply. I'm trying to solve some issue on Astro's side (withastro/astro#4621)

The fix for attributify mode (docs, code) should be included in UnoCSS. But the current fix is a bit hacky. Maybe we should support some custom preprocessing before extracting?

from unocss.

I am using nuxt 3 with vite + tailwindCSS

from unocss.

I am not very familiar with Astro, do you mind sharing a minimal setup so I can test it out? Thanks.

from unocss.

https://stackblitz.com/edit/github-d4rp6r?file=package.json

by default it will be in dev mode. On the terminal you can do eg npm run build

from unocss.

@antfu, yes, the template shared by @hans-d is what i was working on. It's very possible that this a bug in Astro in and not in unocss, I was just hoping for information on what that plugin expects to receive so I can track down where things are going differently in our build vs. the vanilla Vite setup.

from unocss.

Hi @antfu, could you help out @matthewp by providing some more info re the inner details of your vite plugin ? That would help him figuring out where astro might need some nudges. Thanks in advance!

from unocss.

I just pulled down your repo and played out. I can see the unresolved id error in the build.

In build, UnoCSS uses a virtual module to serve the CSS stub and replaced it in generateBundle hook. Can you help confirm first if the simple plugin example in Vite docs passed build on Astro? https://vitejs.dev/guide/api-plugin.html#simple-examples

from unocss.

Yes, that does work, see here: https://stackblitz.com/edit/github-5hwrzj?file=dist%2Findex.html&on=stackblitz

What is the virtual module that UnoCSS uses? Astro is a static site generator so what the user imports in their code only goes through the pipeline in SSR. Like I said, what is going through the build pipeline is /__uno.css. Is that what SSR is resolving uno.css to?

from unocss.

For clarity, how Astro generates pages statically is (in regards to CSS):

1. Render a page.
2. Examine Vite's module graph for what CSS is imported.
3. Create our own virtual module when imports all of those CSS.
4. Create an asset chunk at the end that concats all of the CSS together.

I'm now thinking the issue we are running into happens at step (2). Since the page has been loaded in SSR module we are getting the resolved ID and what we need to send through is the unresolved version.

Is the unresolved version uno.css?

from unocss.

uno.css will be normalized to /__uno.css, and both uno.css and /__uno.css can be served. Can you share me the pointers of how 3 & 4 been implemented?

from unocss.

Yeah, that happens in our CSS plugin: https://github.com/snowpackjs/astro/blob/main/packages/astro/src/vite-plugin-build-css/index.ts

So the mystery here is why /__uno.css is not picked up by your build plugins.

from unocss.

I almost have a fix on our end. Since the CSS is loaded through SSR (the reason the plugin runs twice), it already exists and we can just request the /__uno.css file from Vite.

It fails currently because of this though: https://github.com/antfu/unocss/blob/7481fc3f9d5c61c0aea33a8fa31caf341a749ceb/packages/vite/src/modes/global/build.ts#L119-L120

I think this throw is possibly wrong; it assumes that if a project has CSS it must be unocss usage, but Astro allows mixing CSS techniques. If the user has client-side usage of uno it will pass; if its only used in .astro files this will throw.

I think this throw should be removed.

from unocss.

It should not be enabled on SSR

https://github.com/antfu/unocss/blob/7481fc3f9d5c61c0aea33a8fa31caf341a749ceb/packages/vite/src/modes/global/build.ts#L88-L90

Can you test if you remove the error locally it would work or not?

from unocss.

Yeah removing it does work. However I might be able to set ssr: true, so let me try that.

from unocss.

Hi @matthewp / @antfu ,
Any update on this to use unocss in Astro project?

Very much thanks in Advance

from unocss.

I have no error, just work at first run, but the classes change doesn't update (the style are cleared). The unocss update work only from a restart.

from unocss.

The same issue occurs when using UnoCSS with îles. When building, especially with hydration, îles will throw an error as well:

[unocss:global:build:generate] [unocss] does not found CSS placeholder in the generated chunks,
this is likely an internal bug of unocss vite plugin

it works very nice and smooth in Iles. Did u put import 'uno.css';in app.ts ?

from unocss.

The same issue occurs when using UnoCSS with îles. When building, especially with hydration, îles will throw an error as well:

[unocss:global:build:generate] [unocss] does not found CSS placeholder in the generated chunks,
this is likely an internal bug of unocss vite plugin

it works very nice and smooth in Iles. Did u put import 'uno.css';in app.ts ?

What is the correct way to use this in an UI library?
Should I import 'uno.css' in index.ts or externalize the import?

from unocss.

use import 'uno.css in index.ts

from unocss.

@matthewp I'm using Astro 0.25.4 and unocss 0.30.7.

During development, after I run npm run dev, and apply WindiCSS' classes to my elements, the styles are not updating until I restart the server.

During production, there are no errors, but instead of the WindiCSS' utility classes I used, I get…

#--unocss-- {
	layer: __ALL__;
}

from unocss.

I don't know about WindiCSS but I believe UnoCSS will need a plugin to work with Astro, my previous comment just meant that there is nothing special needed any more as was the case when this issue was originally filed. Astro builds to files just like with any frontend framework now.

from unocss.

Hi @matthewp @antfu, Unocss dev HMR does not work in astro.

And I tried to debug it with vite-plugin-inspect. When using astro, I found the vite-css:post plugin does not generate js code with HMR.

I create a test astro project in the /example dir.

from unocss.

It's known that it doesn't work, that's what this issue is about.

from unocss.

Same issue with nuxt3 & unocss
I have no error, just works at first run, but the classes change doesn't update. The styles are reflected only by doing a page reload.

from unocss.

edit: just tried building the production bundle and it's completely broken :D
I have tried several workarounds but all of them are not working.

• Directly importing uno.css in .astro file / Importing uno.css from static framework components (framework components that are not used as an island)
  • Breaks with an error does not found CSS placeholder in the generated chunks.
    • The bundle parameter of the hook generateBundle() only contained JS files and not CSS. I think that's the problem (since I was able to identify the hash placeholder in the built CSS)
• Importing uno.css in inline <script> / Importing uno.css from an island (tried with SolidJS integration)
  • Generates a correct CSS file. However it's not imported. only empty css comment is present in the hoisted JS file.

Looks like we should definitely make an integration...

from unocss.

@XiNiHa Oh sorry I missed your comments. Thanks for making the integration! I have now implemented it directly in this repo https://github.com/unocss/unocss/tree/main/packages/astro, and enabled SSR to build for unocss:global:build:generate. I haven't dividing in deep about the HMR issue, but if you do, would you like to send a few PR to improve it? Thank you!

from unocss.

The same issue occurs when using UnoCSS with îles. When building, especially with hydration, îles will throw an error as well:

[unocss:global:build:generate] [unocss] does not found CSS placeholder in the generated chunks,
this is likely an internal bug of unocss vite plugin

Having this exact issue when doing build, I have solved with @AllanChain's package astro-uno, but If I am not wrong this should be fixed by Astro now... Does anyone have the same problem?

from unocss.

I am also having this problem:
`ℹ Using Tailwind CSS from ~/assets/sass/tailwind.sass nuxt:tailwindcss 18:59:48
vite v3.2.3 building for production... 18:59:50
✓ 316 modules transformed. 19:00:00
rendering chunks (23)...
ERROR [unocss:global:build:generate] [unocss] does not found CSS placeholder in the generated chunks 19:00:00
This is likely an internal bug of unocss vite plugin

ERROR [unocss] does not found CSS placeholder in the generated chunks 19:00:00
This is likely an internal bug of unocss vite plugin

This is likely an internal bug of unocss vite plugin`

from unocss.