Skip to content

fix(css): preserve dollar signs in external @import urls with lightningcss - #22718

Merged
sapphi-red merged 2 commits into
mainfrom
shulaoda/06-19-fix_css_preserve_dollar_signs_in_external_import_urls_with_lightningcss
Jun 30, 2026
Merged

fix(css): preserve dollar signs in external @import urls with lightningcss#22718
sapphi-red merged 2 commits into
mainfrom
shulaoda/06-19-fix_css_preserve_dollar_signs_in_external_import_urls_with_lightningcss

Conversation

@shulaoda

@shulaoda shulaoda commented Jun 19, 2026

Copy link
Copy Markdown
Member

With the lightningcss transformer, an external @import URL containing $ could be corrupted in the output.

Problem

  • After lightningcss analyzes dependencies, placeholders are swapped back to real URLs. The import case used css.replace(dep.placeholder, dep.url) with dep.url as a replacement string.
  • In a replacement string, $&, $`, $', $n, $$ are special patterns. So a URL like https://cdn.example.com/a.css?q=$& gets mangled — $& is expanded to the matched placeholder text instead of being inserted verbatim.
  • The adjacent url case already guards against this with a function replacer; the import case did not.

Fix

  • Use a function replacer (() => dep.url) so the URL is inserted literally, with no replacement-pattern interpretation.

Tests

  • Added a preprocessCSS test using the lightningcss transformer with an external @import URL containing $&. It fails without this change (the URL is mangled) and passes with it.

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feat: css p2-edge-case Bug, but has workaround or limited in scope (priority)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants