Docs: should the advice be to import the skeleton css inside app.postcss?

[lamogura]

I find that I often want to make utility styles in my app.postcss and want to do things based off of skeletons styles like card etc (@apply card;). So the solution I found was to put the imports at the top of my app.postcss (including my theme).

@import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
@import '@skeletonlabs/skeleton/styles/all.css';
@import './theme.postcss';

This way I have access to everything and also I don't run into issues w/ "organizing imports" features in VSCode changing the order of them in my Layout.svelte. Maybe there is something I don't know about that makes doing this not a good idea?

[endigo9740]

The technical reasoning might be more of a question for Svelte/Kit support. We use the script import method because that's what SvelteKit defaults to. My assumption is there is some bundling benefits. SvelteKit is of course using Vite under the hood, so Vite is what's actually handling this. Here's the docs talking about some of this:
https://vitejs.dev/guide/features.html#css

That's interesting the CSS import method allows @apply card to work. I wasn't aware that would do that. So it may be something we can explore in the future. But really Tailwind themselves advice against these kinds of abstractions unless you're confident you need them:
https://tailwindcss.com/docs/reusing-styles#avoiding-premature-abstraction

Classes like .card from Skeleton ARE the utility classes, and utility classes are meant to be privatives that are mixed and matched in your templates. If you're abstracting to @apply classes, then you're not really using Tailwind's utility-first techniques:
https://tailwindcss.com/docs/utility-first

I understand it can be convenient. Just be cautions not to go overboard with that approach. Again, Tailwind advises against it for good reason.

[garlandcrow]

Yea I am not sure about bundling benefits, maybe theres some tree shaking thing that happens there that won't when postcss is used.

Thanks, I am aware of tailwind "best practice", but it is quite useful to @apply styles like this when they come from a design framework like skeleton. The ghost button style is a bit different than how I like it, but still want to derive most of the style:

.variant-ghost-classic-surface {
  @apply !ring-0 hover:variant-ghost-surface;
}

This is only possible if I do the postcss import and maybe more importantly the user cannot define their own @layer base/components/utilities in app.postcss unless @tailwind stuff is imported first and since you can only do that once, it needs @import skeleton styles at the top of app.postcss to be able to use them.