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.

Sign up for GitHub

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

Jump to bottom

[unocss] does not found CSS placeholder in the generated chunks #1402

Closed
Jelenkee opened this issue Aug 11, 2022 · 12 comments · Fixed by #1423
Closed

[unocss] does not found CSS placeholder in the generated chunks #1402

Jelenkee opened this issue Aug 11, 2022 · 12 comments · Fixed by #1423
Labels
needs reproduction

Comments

@Jelenkee
Copy link

I get this error message when I try to build my Astro project where I use unocss.

Version: 0.45.6

There was a fix for #1341 but it didn't work for me.
I am not sure if this problem is caused by unocss, astro, svelte or even vite. Maybe you can help me.

I started debugging into unocss and found out that at this line the bundle contains a CSS-asset with css generated from my svelte components. But this CSS doesn't contain the placeholder which unocss is looking for. So it cannot be replaced and the variable replaced remains false.
image

I tried to set the svelte option emitCss to false but it didn't work. Maybe it is overridden by the astro-svelte-plugin.
@Dunqing
Copy link
Member

Dunqing commented Aug 12, 2022

Can you provide repo? I don't know astro.

@Jelenkee
Copy link
Author

There you go
https://github.com/CPUEater/bug-astro
Just run npm run build

@Dunqing
Copy link
Member

Dunqing commented Aug 13, 2022

I tested it and found the same problem before version 0.43, I guess unocss doesn't support astro.

@Dunqing Dunqing mentioned this issue Aug 16, 2022
Merged
@Dunqing
Copy link
Member

Dunqing commented Aug 16, 2022

See #1423.

@Jelenkee
Copy link
Author

Sorry, I don't understand your 'solution'.
Using import uno.css in a script tag should not work, because JS in script tags is executed in the browser only (according to the docs).

Just to clarify: I can only reproduce the problem with astro and svelte. When I comment out the css in the style tag in my svelte component, it works fine.

@Dunqing
Copy link
Member

Dunqing commented Aug 17, 2022

Vite will transform script refer Using Hoisted Scripts

@Dunqing
Copy link
Member

Dunqing commented Aug 17, 2022

Just to clarify: I can only reproduce the problem with astro and svelte. When I comment out the css in the style tag in my svelte component, it works fine.

Because svelte is processed through vite

@jolo-dev
Copy link

jolo-dev commented Aug 17, 2022 •
edited

@Jelenkee it works what @Dunqing said.

I removed the import uno.css from the frontmatter and put it above the ending </body>- tag.

---
// Component Imports
import MainHead from '../components/MainHead.astro';

---

<html lang="en">

<head>
	<MainHead title={title} description={description} />
</head>

<body class="dark:bg-gray-700">
	<slot />
	<script>import 'uno.css'</script>.
</body>

</html>

@Jelenkee
Copy link
Author

Putting the import uno.css into script tags does only work in dev mode. When I build the page no css file is generated.
Unfortunately the new unocss-astro-plugin did not fix my problem either.
I use the unocss CLI as a workaround

@jolo-dev
Copy link

@Jelenkee it works for me
https://jolodev.guru/
is written in Unocss ;)

@Jelenkee
Copy link
Author

@jolo-dev Can you show me your repo?

@jolo-dev
Copy link

@Jelenkee No, I can't.
But really did it like here in my BaseLayout.astro.
And here is my astro.config.ts

 import Unocss from 'unocss/vite';

// https://astro.build/config
export default defineConfig(
{
  vite: {
    build: {
      cssCodeSplit: true,
    },
    plugins: [Unocss({
      // Some config
    })]
  }
});

@Jelenkee Jelenkee mentioned this issue Aug 29, 2022
Closed
1 task
@duanwilliam duanwilliam mentioned this issue Apr 22, 2024
Closed
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
needs reproduction
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(astro): introduce @unocss/astro integration Dunqing/unocss
4 participants
@antfu @Dunqing @jolo-dev @Jelenkee