Custom CSS with @apply/--uno

[eric-burel]

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

[AriPerkkio]

How can I reproduce this issue?

Figure a way to use --uno or @apply.

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]

Hi @AriPerkkio thanks for investigating, so after more digging the problem appears with a specific combination, I've figured a minimal buggy theme.css:

:root {
    --tk-background-primary: theme('colors.gray.0');
}

[data-theme='light'] {
    .markdown-content {
        h1 {
            color: var(--np-logo-dark-blue);
        }

    }
}

.markdown-content h2 {
    @apply text-red;
}

• If I remove the "@apply" it works again
• If I remove the color: var(--np-logo-dark-blue) for h1 it works again
• If I remove the ":root" it works again

Quite uncanny! Maybe the issue is at UnoCSS level rather than tutorialkit config though, I'd need to further investigate on a minimal unocss project.