Skip to content

Commit

Permalink
fix: ignore non-entry-point CSS files during inlining (#13395)
Browse files Browse the repository at this point in the history
  • Loading branch information
dummdidumm authored Jan 31, 2025
1 parent 3dec396 commit 180fa34
Show file tree
Hide file tree
Showing 5 changed files with 27 additions and 1 deletion.
5 changes: 5 additions & 0 deletions .changeset/shaggy-ravens-unite.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@sveltejs/kit': patch
---

fix: ignore non-entry-point CSS files during inlining
5 changes: 5 additions & 0 deletions packages/kit/src/exports/vite/build/build_server.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,12 @@ export function build_server_nodes(out, kit, manifest_data, server_manifest, cli
css.filter(asset => client_stylesheets.has(asset.fileName))
.forEach((asset) => {
if (asset.source.length < kit.inlineStyleThreshold) {
// We know that the names for entry points are numbers.
const [index] = basename(asset.fileName).split('.');
// There can also be other CSS files from shared components
// for example, which we need to ignore here.
if (isNaN(+index)) return;

const server_stylesheet = server_stylesheets.get(+index);
const file = `${out}/server/stylesheets/${index}.js`;

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<p>
This component is imported in multiple pages and therefore its CSS lands in a separate CSS chunk
</p>

<style>
p {
color: blue;
}
</style>
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
<script>
import SharedCSS from '$lib/SharedCSS.svelte';
import '@fontsource/libre-barcode-128-text';
</script>

<p>Hello world!</p>
<p>
Test that the fontsource is referenced correctly, while the shared CSS in SharedCSS doesn't cause
problems
</p>
<SharedCSS />

<style>
p {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<script>
import { resolveRoute } from '$app/paths';
import SharedCss from '$lib/SharedCSS.svelte';
</script>

<SharedCss />
<a data-id="target" href={resolveRoute('/resolve-route/[foo]', { foo: 'resolved' })}>click me</a>

0 comments on commit 180fa34

Please sign in to comment.