fix: ensure CSS URLs are correct when inlining client stylesheets #15153

teemingc · 2026-01-11T18:26:02Z

This PR replaces the janky server-client css mapping (introduced by me) with simply replacing the asset URL references with the correct path when we inline the styles. Not only does this massively simplify things, it allows us to correctly prefix the paths based on the settings from paths.relative or path.assets.

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.

changeset-bot · 2026-01-11T18:26:05Z

🦋 Changeset detected

Latest commit: 3b89c6b

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

teemingc · 2026-01-11T18:49:52Z

packages/kit/test/apps/options/package.json

+		"test:dev": "DEV=true playwright test && DEV=true PATHS_ASSETS=https://cdn.example.com/stuff playwright test",
+		"test:build": "playwright test && PATHS_ASSETS=https://cdn.example.com/stuff playwright test",


This seemed like the easiest way to test both CSS inlining with and without paths.assets without introducing another test matrix.

paths.assets replaces the CSS asset urls at build time but paths.relative does it at runtime

packages/kit/src/utils/css.js

teemingc · 2026-01-12T16:55:22Z

packages/kit/src/utils/css.js

+ * @returns {string}
+ */
+export function replace_css_relative_url(contents, base) {
+	return contents.replaceAll(/url\((['"]?)\.\//ig, `url($1${base}/`);


Fortunately, we don't have to worry about the @import 'app.css' case that omits the url(...) syntax because Vite inlines the referenced stylesheet even when referenced by more than one other stylesheet https://vite.dev/guide/features#import-inlining-and-rebasing

packages/kit/src/utils/css.spec.js

packages/kit/src/utils/css.js

elliott-with-the-longest-name-on-github

I pushed some whitespace-handling changes just to guard against edge cases (I don't think we actually have to worry about them because I don't think Vite will output CSS like that... but better to be safe).

The only other edge cases I can think of:

Is it a problem that this doesn't work on relative paths without ./ in front of them? i.e. url(img.png) won't get transformed.
This will replace content inside strings. So if you had the CSS content: "Example: If you were to put url(./rickroll.gif) here...", it would get modified, in spite of being a string. I don't see a way around this other than actually parsing the CSS contents with a CSS parser...

teemingc · 2026-01-13T01:28:49Z

Is it a problem that this doesn't work on relative paths without ./ in front of them? i.e. url(img.png) won't get transformed.

I think after Vite processes the CSS the urls are always prefixed with ./ but I can check how it’s handled from both the static folder or otherwise to see if they do end up this way.

This will replace content inside strings. So if you had the CSS content: "Example: If you were to put url(./rickroll.gif) here...", it would get modified, in spite of being a string. I don't see a way around this other than actually parsing the CSS contents with a CSS parser...

Yeah, I think I should try out a CSS parser. Otherwise, maybe we’d have to do a negative lookahead. Are there any CSS parsers that you’d recommend?

EDIT: I see we were previously using csstree in Svelte so we can probably try that?

teemingc · 2026-01-13T22:06:00Z

Is it a problem that this doesn't work on relative paths without ./ in front of them? i.e. url(img.png) won't get transformed.

So I did some testing and here are the results:

If the asset can be found, it's always suffixed with ./ and lives next to the CSS file.
If the asset can be found and it's located in the static folder, it's suffixed with ../../../ because static assets are located at the root path and it's relative to _app/immutable/assets.
If the asset can't be found, the url value remains the same.

format

teemingc · 2026-01-14T10:30:30Z

We'll use the Svelte CSS parser to identify declaration values and avoid accidentally affecting comments, strings, etc.
We'll also transform the stored CSS from a string to a function so we can easily plug in the relative path at runtime
We'll need to handle the case where the asset path is referencing something from the root because it was placed in a static dir. I've already added a test for this.

teemingc · 2026-01-23T14:55:55Z

Ok, I think it's ready. Some additional edge cases accounted for are URLs with escaped quotes, fragments, query strings, etc.. Only known assets are processed too so it doesn't just match anything with ./ or ../../../.

elliott-with-the-longest-name-on-github

This is looking awesome, tysm

packages/kit/test/apps/options/test/test.js

packages/kit/src/utils/css.spec.js

packages/kit/src/utils/css.js

elliott-with-the-longest-name-on-github · 2026-01-26T19:41:14Z

packages/kit/src/utils/css.js

+				const url_value_match = /url\(\s*(['"]?)(.*?)\1\s*\)/i.exec(url_declaration);
+				if (!url_value_match) continue;
+
+				const [, , url] = url_value_match;


I think you could use non-capturing groups ((?:)) for the stuff you don't actually want to capture to avoid these weird commas

The quotation's using a capture group so that it matches against the same type of closing quotation mark. This avoids matching a double quote in a single quoted string.

Unfortunately, this doesn't account for backslashed quotes in the same string

I think I've fixed the escaped characters edge case but the CSS parser is duplicating the escaped characters in the declaration value it returns. I think we need to avoid adding the same characters twice here https://github.com/sveltejs/svelte/blob/9662010a135937b7a920eaf93933be7b8b0c9c9e/packages/svelte/src/compiler/phases/1-parse/read/style.js#L508-L525 Currently, a string such as \s becomes \\ss in the returned AST

EDIT: opened a PR for it here sveltejs/svelte#17554

EDIT2: We just need to wait for sveltejs/svelte#17555 to be merged and update the Svelte version in Kit to get the tests passing

packages/kit/src/utils/css.js

elliott-with-the-longest-name-on-github · 2026-01-27T20:50:56Z

packages/kit/src/utils/css.js

+ * @param {string} value
+ * @returns {string}
+ */
+function tippex_comments_and_strings(value) {


I did have to google what tippex meant :laugh:

elliott-with-the-longest-name-on-github

I fixed several tippex function edge cases and pushed a bunch of test cases to make sure it never regresses -- thank you so much for your work on this gnarly bug. Great job!

teemingc requested a review from elliott-with-the-longest-name-on-github January 11, 2026 18:47

teemingc commented Jan 11, 2026

View reviewed changes

teemingc commented Jan 12, 2026

View reviewed changes

packages/kit/src/utils/css.js Outdated Show resolved Hide resolved

teemingc commented Jan 12, 2026

View reviewed changes

packages/kit/src/utils/css.spec.js Show resolved Hide resolved

teemingc commented Jan 12, 2026

View reviewed changes

packages/kit/src/utils/css.js Outdated Show resolved Hide resolved

elliott-with-the-longest-name-on-github reviewed Jan 12, 2026

View reviewed changes

teemingc and others added 11 commits January 14, 2026 15:57

add fix and test

ac63953

format

add unit test

2f60ab4

changeset

251e4c8

add test for inlining conditionally rendered component css

885a5c8

format

3ff57e2

Apply suggestion from @teemingc

6bc6d4b

Apply suggestion from @teemingc

6dc758a

Update css.js

a4163c2

handle whitespace, add some additional test cases

b331999

Merge branch 'main' into fix-missing-css-with-inlining-enabled

12fa7df

add failing test for assets in static dir

df13a14

teemingc force-pushed the fix-missing-css-with-inlining-enabled branch from 09886d8 to df13a14 Compare January 14, 2026 08:04

Merge branch 'main' into fix-missing-css-with-inlining-enabled

43fbe0f

teemingc changed the title ~~fix: use regex to replace CSS paths instead of mapping server CSS~~ fix: fix CSS URL paths of client stylesheets Jan 14, 2026

teemingc marked this pull request as draft January 14, 2026 10:29

Merge branch 'main' into fix-missing-css-with-inlining-enabled

ff2f6d0

teemingc changed the title ~~fix: fix CSS URL paths of client stylesheets~~ fix: ensure CSS URLs are correct when inlining client stylesheets Jan 22, 2026

teemingc added 2 commits January 22, 2026 23:56

bump svelte

b457b97

this should just work

88aa343

teemingc requested a review from elliott-with-the-longest-name-on-github January 23, 2026 14:54

teemingc added 2 commits January 26, 2026 13:56

Merge branch 'main' into fix-missing-css-with-inlining-enabled

e77a985

Merge branch 'main' into fix-missing-css-with-inlining-enabled

4f2f3a8

elliott-with-the-longest-name-on-github reviewed Jan 26, 2026

View reviewed changes

teemingc added 14 commits January 27, 2026 11:24

split tests

4e665a2

rename parser to parse

8cdc8c6

hoist regexes

41c3280

use test.each

d26f914

add test for content and comments

fe352d5

rename assets to paths_assets

6807f52

add tests for escaped characters

f34dbad

add test for encoded characters

27e522e

safeguard against trailing slashes

abc4c64

decode vite asset filenames

4902991

a bit of clean up

5a6e24e

oops

0a019aa

tippex comments

b9e9fa3

tippex strings

7f260ba

teemingc mentioned this pull request Jan 27, 2026

fix: avoid duplicating escaped characters when parsing styles sveltejs/svelte#17554

Merged

6 tasks

teemingc and others added 4 commits January 27, 2026 20:58

tippex wip

cacb600

harden comment and escaped character tests

3f4bea3

account for nested app dir

6894599

bump svelte

5f3fbf8

elliott-with-the-longest-name-on-github reviewed Jan 27, 2026

View reviewed changes

chore: fix tippex and add test cases

3b89c6b

elliott-with-the-longest-name-on-github approved these changes Jan 27, 2026

View reviewed changes

elliott-with-the-longest-name-on-github merged commit 52965cf into main Jan 27, 2026
25 checks passed

elliott-with-the-longest-name-on-github deleted the fix-missing-css-with-inlining-enabled branch January 27, 2026 21:38

github-actions bot mentioned this pull request Jan 27, 2026

Version Packages #15207

Merged

		"test:dev": "DEV=true playwright test && DEV=true PATHS_ASSETS=https://cdn.example.com/stuff playwright test",
		"test:build": "playwright test && PATHS_ASSETS=https://cdn.example.com/stuff playwright test",

Uh oh!

fix: ensure CSS URLs are correct when inlining client stylesheets #15153

fix: ensure CSS URLs are correct when inlining client stylesheets #15153

Uh oh!

Conversation

teemingc commented Jan 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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

Tests

Changesets

Edits

Uh oh!

changeset-bot bot commented Jan 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

teemingc Jan 11, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

teemingc Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

elliott-with-the-longest-name-on-github left a comment

Choose a reason for hiding this comment

Uh oh!

teemingc commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

teemingc commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

teemingc commented Jan 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

teemingc commented Jan 23, 2026

Uh oh!

elliott-with-the-longest-name-on-github left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

elliott-with-the-longest-name-on-github Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

teemingc Jan 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

teemingc Jan 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

elliott-with-the-longest-name-on-github Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

elliott-with-the-longest-name-on-github left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

teemingc commented Jan 11, 2026 •

edited

Loading

changeset-bot bot commented Jan 11, 2026 •

edited

Loading

teemingc Jan 12, 2026 •

edited

Loading

teemingc commented Jan 13, 2026 •

edited

Loading

teemingc commented Jan 13, 2026 •

edited

Loading

teemingc commented Jan 14, 2026 •

edited

Loading

teemingc Jan 27, 2026 •

edited

Loading

teemingc Jan 27, 2026 •

edited

Loading