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

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

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

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!

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

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?

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?

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?

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.

Tested a bit and made wip PR on #162

• 🐛 BUG: Vite plugin has been applied twice 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
  To pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel.

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.

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.

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.

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.

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

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.

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.

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

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

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

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?

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?

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`

I am using nuxt 3 with vite + tailwindCSS