refactor(sveltekit-embed): drop Skeleton UI in favour of plain Tailwind v4 - #5302
Merged
Merged
Conversation
ReneWerner87
force-pushed
the
claude/sveltekit-template-build-fix
branch
from
August 1, 2026 11:17
c83fe09 to
de9e973
Compare
…nd v4 The template has not built since @skeletonlabs/skeleton was bumped 2 -> 5. v5 removed AppShell, AppBar, LightSwitch, CodeBlock and storeHighlightJs, along with the `tailwind/skeleton.cjs` and `styles/skeleton.css` entry points this recipe imported -- the package now exports only `.`, `./package.json` and `./themes/*`. Every component the layout used has to be hand-written either way, so the dependency was no longer paying for itself. This recipe exists to show Fiber serving an embedded SvelteKit build, not to demonstrate a component library, so Skeleton is removed rather than migrated. That also takes @tailwindcss/forms and @tailwindcss/typography (pulled in only for Skeleton) and @floating-ui/dom (a Skeleton peer) out of the tree. Replacements live in src/lib: - CodeBlock.svelte renders highlight.js output with an optional line number gutter, keeping the same lineNumbers/language/code/rounded props the call sites already passed. - LightSwitch.svelte toggles a `dark` class on <html> and remembers the choice in localStorage, falling back to prefers-color-scheme. The Skeleton classes the markup relied on (`h1`, `h3`, `blockquote`, `card`, `btn variant-outline-primary`) are replaced with plain Tailwind, and the primary palette Skeleton's theme provided is declared in an `@theme` block so `bg-primary-200`, `text-primary-900` and friends keep working. Also completes the Tailwind v4 migration that entgo-sveltekit received separately: the `@tailwindcss/vite` plugin replaces the v3-style PostCSS setup, and postcss.config.cjs, tailwind.config.cjs, postcss and autoprefixer are removed as redundant. src/app.postcss is renamed to src/app.css. The `.postcss` extension made Vite route the file through postcss-import, which tries to resolve `@import "tailwindcss"` as a file path and fails with ENOENT; the Vite plugin only claims `.css`. `pnpm run build` and `pnpm install --frozen-lockfile` both pass. The two self-closing `<span />` tags Svelte 5 warns about are fixed while here. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Ea7bWcx58vqScAQoerh2Go
ReneWerner87
force-pushed
the
claude/sveltekit-embed-drop-skeleton
branch
from
August 1, 2026 11:18
6b8bd4c to
45a2a5a
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Completes the last broken template. Follows the direction you picked: remove Skeleton, keep plain Tailwind.
Why removing rather than migrating
sveltekit-embedhas not built since@skeletonlabs/skeletonwas bumped 2 to 5. v5 removedAppShell,AppBar,LightSwitch,CodeBlockandstoreHighlightJs, along with thetailwind/skeleton.cjsandstyles/skeleton.cssentry points this recipe imported. The package now exports only.,./package.jsonand./themes/*.Every component the layout used has to be hand-written either way, so the dependency was no longer paying for itself. This recipe exists to show Fiber serving an embedded SvelteKit build, not to demonstrate a component library.
Removing it also takes
@tailwindcss/forms,@tailwindcss/typography(pulled in only for Skeleton) and@floating-ui/dom(a Skeleton peer) out of the tree, four fewer dependencies to break on the next major.Replacements
Two small components in
src/lib:CodeBlock.svelterenders highlight.js output with an optional line-number gutter, keeping the samelineNumbers/language/code/roundedprops the call sites already passed, so+page.svelteneeded no prop changes.LightSwitch.sveltetoggles adarkclass on the root element, remembers the choice inlocalStorage, falls back toprefers-color-scheme.The Skeleton utility classes the markup relied on (
h1,h3,blockquote,card,btn variant-outline-primary) are replaced with plain Tailwind. The primary palette Skeleton's theme provided is declared in an@themeblock, sobg-primary-200,text-primary-900and friends keep working unchanged.Also in here
entgo-sveltekitgot in fix(sveltekit): repair entgo-sveltekit build and bound the cookie override #5299: the@tailwindcss/viteplugin replaces the v3-style PostCSS setup.postcss.config.cjs,tailwind.config.cjs,postcssandautoprefixerare removed as redundant under v4.src/app.postcssrenamed tosrc/app.css. The.postcssextension made Vite route the file throughpostcss-import, which tries to resolve@import "tailwindcss"as a file path and dies withENOENT. The Vite plugin only claims.css. This is whyentgo-sveltekitworked with the identical config and this template did not.<span />tags Svelte 5 warns about, since the file was being touched anyway.Verification
pnpm run buildcompletes, the template builds for the first time in a whilepnpm install --frozen-lockfilepassesskeletonlabsreferences left outside the lockfileVisually close to the original but not pixel-identical. The header, footer button and browser mockup are rebuilt with Tailwind equivalents rather than Skeleton's component styling.