Semicolons in CSS import statements break compressed CSS files

[robertgarrigos]

Description of the bug

The compressed css is broken when the original style sheet contains an import rule with a ; within the url, like this:

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&display=swap");

Steps To Reproduce

To reproduce the behavior:

1. add that import rule to a css style sheet
2. go to admin/config/development/performance and check on Aggregate and compress css files
3. go to a page

Actual behavior

The site is broken because the compressed css file is broken

[argiepiano]

@robertgarrigos thanks for reporting and providing a PR! I've been able to reproduce the problem. I also verified that the import url string is actually correct -- google fonts does provide urls with those semicolons in certain situations.

I also tested the fix, and that fixed the problem. While I'm no regex expert, I think the new expression is straightforward and correct. WFM.

Side note: when you provide PRs, don't forget to mark the issue as "has pull request", "needs testing" and "needs code review" - otherwise it's easy for people to overlook it.

[robertgarrigos]

Thanks, @argiepiano. I cannot mark the issues. I might not have the permissions...

[argiepiano]

I cannot mark the issues. I might not have the permissions...

You may want to ask for access in Zulip.

[quicksketch]

Looks like @robertgarrigos has been added to the triage group by someone and now has permissions to add labels. Thanks to whomever did that!

I pushed a commit to backdrop/backdrop#4609 to include test coverage in common.test to both ensure existing CSS is not broken by this change and imports like this will continue to work in the future. If tests all pass still this is ready to merge.

[quicksketch]

Thanks @robertgarrigos and @argiepiano! I have merged backdrop/backdrop#4609 into 1.x and 1.26.x.