fix: multiple css url separation (fix #3922)

[LaMavia]

Description

The PR is solving issue #3922

Additional context

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the Commit Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it. (The function in question is not exported on its own, and only participates in the build process. Apart from creating temporary build files, I cannot think of any other tests)

[sodatea]

The fix looks good to me.

It would be appreciated if you could add a test case inside the packages/playground/css folder so that we can avoid future regressions.

[LaMavia]

Right, I'll take care of it today

[LaMavia]

The added test checks for combinations of multiple urls, separated by differently padded commas. It fails for the previous version: (yarn test-serve css)

yarn run v1.22.10
$ jest css
 PASS  packages/vite/src/node/__tests__/plugins/css.spec.ts (9.081 s)
 PASS  packages/playground/css-codesplit/__tests__/css-codesplit.spec.ts (10.964 s)
 PASS  packages/playground/css-codesplit-cjs/__tests__/css-codesplit.spec.ts
 FAIL  packages/playground/css/__tests__/css.spec.ts (13.309 s)
  ● Url separation

    expect(received).toMatch(expected)

    Expected pattern: /^url\(.+\)(?:\s*,\s*url\(.+\))*$/
    Received string:  "none"

      263 |       editFile('imported.css', (code) => code.replace(cases[i - 1], c))
      264 |
    > 265 |     expect(await getBg(urlSeparated)).toMatch(/^url\(.+\)(?:\s*,\s*url\(.+\))*$/)
          |                                       ^
      266 |   }
      267 | })
      268 |

      at Object.<anonymous> (packages/playground/css/__tests__/css.spec.ts:265:39)

Test Suites: 1 failed, 3 passed, 4 total
Tests:       1 failed, 22 passed, 23 total
Snapshots:   0 total
Time:        14.636 s

(returns "none" since the css is invalid, and the background-image falls back on default)
and passes after the fix:

yarn run v1.22.10
$ jest css
 PASS  packages/playground/css-codesplit/__tests__/css-codesplit.spec.ts (9.623 s)
 PASS  packages/vite/src/node/__tests__/plugins/css.spec.ts (10.393 s)
 PASS  packages/playground/css-codesplit-cjs/__tests__/css-codesplit.spec.ts
 PASS  packages/playground/css/__tests__/css.spec.ts (12.533 s)

Test Suites: 4 passed, 4 total
Tests:       23 passed, 23 total
Snapshots:   0 total
Time:        13.191 s, estimated 14 s

[softboy99]

Hi,
It's ok now in debug mode. But when build for production, the problem still exists.

[patak-dev]

@softboy99 please open a new issue with a reproduction against the latest version. Thanks!