Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

fix: update inline css url in dev #13007

Merged
merged 7 commits into from
Nov 25, 2024
Merged

fix: update inline css url in dev #13007

merged 7 commits into from
Nov 25, 2024

Conversation

bluwy
Copy link
Member

@bluwy bluwy commented Nov 15, 2024

In the logic where SvelteKit loads the CSS to prevent FOUC in dev, it constructs URLs like /path/Foo.svelte?svelte=&type=css&lang.css=&inline=, which isn't great for Vite because it checks if a module is CSS via /\.(css|less|...)(?:$|\?)/, which wouldn't have matched the constructed URL.

With the Vite quirk aside (which fixing it is probably a separate breaking topic in Vite), this PR updates so it looks like this instead: /path/Foo.svelte?inline&svelte=&type=css&lang.css, which Vite will be happy about. This is also what Astro does which had also worked well.

The reason why it always worked before (and unnoticed) is because vite-plugin-svelte was normalizing back to a Vite-happy path: https://github.com/sveltejs/vite-plugin-svelte/blob/da54670065f949c7352597dcafbd51dfa202e638/packages/vite-plugin-svelte/src/index.js#L127-L135. I'm trying to fix some compat for that code for Vite 6 where that will no longer happen, so I figured to fix this here first


Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

  • It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
  • This message body should clearly illustrate what problems it solves.
  • Ideally, include a test that fails without this PR but passes with it.

Tests

  • Run the tests with pnpm test and lint the project with pnpm lint and pnpm check

Changesets

  • If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.

Edits

  • Please ensure that 'Allow edits from maintainers' is checked. PRs without this option may be closed.

Copy link

changeset-bot bot commented Nov 15, 2024

🦋 Changeset detected

Latest commit: 474f0f7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@sveltejs/kit Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@Rich-Harris
Copy link
Member

preview: https://svelte-dev-git-preview-kit-13007-svelte.vercel.app/

this is an automated message


if (
(isCSSRequest(dep.file) ||
(query.has('svelte') && query.get('type') === 'style')) &&
Copy link
Member Author

@bluwy bluwy Nov 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed this specific handling (line 205) in the new code since isCSSRequest should already be capturing any instances of this. I tested in the playground locally and the inlined-styles to prevent fouc still worked.

@bluwy bluwy merged commit efb9019 into main Nov 25, 2024
14 checks passed
@bluwy bluwy deleted the fix-css-inline branch November 25, 2024 14:28
@github-actions github-actions bot mentioned this pull request Nov 25, 2024
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants