fix: reorder unhandled imports in CSS bundler

[sissbruecker]

Currently CssBundler just replaces @imports with inlined file contents and returns the result. That can be problematic if an unprocessed import, for example to an external URL, comes after an inlined import. Now the unprocessed import comes after a regular CSS rule, which is invalid and ignored by the browser:

/* inlined import content */
body { background: blue; }
/* unprocessed import */
@import url('https://cdn.jsdelivr.net/fontsource/css/aclonica@latest/index.css');

This change reorders unhandled imports so that they are at the top of the file:

@import url('https://cdn.jsdelivr.net/fontsource/css/aclonica@latest/index.css');
body { background: blue; }

[github-actions]

Test Results

1 091 files  ±0  1 091 suites  ±0   1h 25m 26s ⏱️ +31s
6 937 tests +1  6 888 ✅ +1  49 💤 ±0  0 ❌ ±0 
7 285 runs  +6  7 224 ✅ +6  61 💤 ±0  0 ❌ ±0 

Results for commit 06ea4c6. ± Comparison against base commit b83dfff.

♻️ This comment has been updated with latest results.

[mcollovati]

@sissbruecker do you mind fixing the test module?

[mcollovati]

Doing some additional tests, I found that there is another use case that we might consider: a CSS URL with query string.
For example, if I add @import url('https://cdn.jsdelivr.net/fontsource/css/aclonica@latest/index.css?someCacheKillerParam'); to the unhandledImportsAreMovedToTop test, after processing it is put at the bottom.

[sissbruecker]

Doing some additional tests, I found that there is another use case that we might consider: a CSS URL with query string.
For example, if I add @import url('https://cdn.jsdelivr.net/fontsource/css/aclonica@latest/index.css?someCacheKillerParam'); to the unhandledImportsAreMovedToTop test, after processing it is put at the bottom.

@mcollovati Changed it so that it handles query strings. Now it basically moves all unhandled imports to the top.

[mcollovati]

LGTM, but please look at the comment on sanitizeUrl() method and see if it makes sense to you.

There might still be some corner cases where a stylesheet that cannot be inlined is supposed to overwrite rules from a local theme stylesheet, so changing the order might break styling.
But let's merge this fix, and then we will see whether the above is a real use case or not.

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[vaadin-bot]

This ticket/PR has been released with Vaadin 24.4.0.alpha19 and is also targeting the upcoming stable 24.4.0 version.