Tracking: Vite doesn't resolve `#lib` in CSS `url()` (blocks `#lib` in `<style>` tags)

Open
#1,461 2 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 4 days

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
typescript, vite
Domain
cli, tooling

Research direction

Read packages/sv/src/migrate/migrations/sveltekit-3/tasks/lib-alias.ts and the linked Vite issue first; this follow-up is blocked until Vite supports subpath imports in CSS url(). Once that support ships, inspect the migration tests and verify that #lib paths inside <style> tags are handled consistently with other paths.

Written by the indexing model from the issue text.

Description

pkg:migrate

When Vite supports subpath imports in CSS url(), we should revisit the workaround from the Kit 3 migration.

Context
  • Root cause is upstream: vitejs/vite#16155 — Vite does not resolve #-prefixed subpath imports (e.g. #lib/...) in CSS url(). It is approved, labeled p3-downstream-blocker, and on the Vite 8.4 milestone.
  • This first surfaced in #1267: the migration's $lib → #lib change broke url("$lib/...") inside <style> tags.
  • Workaround (PR #1266): inside <style> tags, lib-alias.ts rewrites $lib to a relative path instead of #lib.
Impact
  • Path shape is inconsistent: #lib/... everywhere else, relative path inside <style> tags.
  • Users who hand-write url("#lib/...") are still broken until Vite fixes it.
Follow-up (once Vite 8.4 ships support)
  • Revisit lib-alias.ts and consider emitting #lib inside <style> tags so usage is consistent.
    (The back-references use full GitHub issue shorthand so they resolve when posted via gh.)
Dominant language
TypeScript
Stars
513
Forks
110
Avg merge
5d 1h
Merged PRs (30d)
24

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from sveltejs/cli

All issues in sveltejs/cli

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.