Repository navigation
Custom CSS with @apply/--uno #335
Description
Is your feature request related to a problem?
I am trying to customize the style of the markdown content.
To do so, I am updating the "theme.css" file.
However, I can't exactly figure how it's expected to work with unoCSS.
When using the --uno attribute, I hit an error Cannot split a chunk that has already been edited similar to this issue. I get the same error with Tailwind style @apply which I believe is supposed to also work in Uno.
/* works fine */
[data-theme='light'] {
.markdown-content {
h1 {
color: var(--np-logo-dark-blue);
padding-top: 4px;
padding-bottom: 4px;
}
}
}
/* doesn't work as soon as I use the --uno attribute */
.markdown-content img {
--uno: rounded-md shadow-md;
}Describe the solution you'd like.
Figure a way to use --uno or @apply.
More broadly, confirm if theme.css is the right place to apply custom style, going further from just customizing the CSS variables (UnoCSS is super intuitive to use, but the configuration and doc is quite complex when you are not used to it, reading tutorialkit configuration code didn't help much).
Describe alternatives you've considered.
Writing "normal" CSS in "theme.css" works fine.
Additional context
No response
Activity
AriPerkkio commentedon Sep 20, 2024
How can I reproduce this issue?
I'm not really familiar with UnoCSS and its
--uno, but at least@apply <classes from uno>work just fine:https://stackblitz.com/~/edit/stackblitz-starters-4xulg1?file=theme.css
eric-burel commentedon Sep 20, 2024
Hi @AriPerkkio thanks for investigating, so after more digging the problem appears with a specific combination, I've figured a minimal buggy theme.css:
color: var(--np-logo-dark-blue)for h1 it works againQuite uncanny! Maybe the issue is at UnoCSS level rather than tutorialkit config though, I'd need to further investigate on a minimal unocss project.