stackblitz / tutorialkit

TutorialKit by StackBlitz - Create interactive tutorials powered by the WebContainer API
https://tutorialkit.dev
MIT License
504 stars 48 forks source link

Custom CSS with @apply/--uno #335

Open eric-burel opened 2 months ago

eric-burel commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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;
}

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.