regression: inlined css @font-face src url crashes Vite 2.9.7 and above

[laurentpayot]

Describe the bug

In my head section of index.html if I put the following style:

    <style>
      /* latin */
      @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        font-display: fallback;
        src:
          local('Roboto'),
          local('Roboto-Regular'),
          url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
      }
      body {
        font-family: Roboto, sans-serif;
        background-color: green;
      }
    </style>

When the dev server is running and a browser opens the page, I get:

[vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins to handle the .css file format.
  Plugin: vite:import-analysis
  File: /home/laurent/projects/SSCCE/vite-font-face-src-url-issue/index.html?html-proxy&index=0.css
  1  |  
     |  ^
  2  |        /* latin */
  3  |        @font-face {
      at formatError (/home/laurent/projects/SSCCE/vite-font-face-src-url-issue/node_modules/vite/dist/node/chunks/dep-e1fc1d62.js:38724:46)
      at TransformContext.error (/home/laurent/projects/SSCCE/vite-font-face-src-url-issue/node_modules/vite/dist/node/chunks/dep-e1fc1d62.js:38720:19)
      at TransformContext.transform (/home/laurent/projects/SSCCE/vite-font-face-src-url-issue/node_modules/vite/dist/node/chunks/dep-e1fc1d62.js:56837:22)
      at async Object.transform (/home/laurent/projects/SSCCE/vite-font-face-src-url-issue/node_modules/vite/dist/node/chunks/dep-e1fc1d62.js:38961:30)
      at async /home/laurent/projects/SSCCE/vite-font-face-src-url-issue/node_modules/vite/dist/node/chunks/dep-e1fc1d62.js:56316:24
      at async Promise.all (index 0)
      at async devHtmlHook (/home/laurent/projects/SSCCE/vite-font-face-src-url-issue/node_modules/vite/dist/node/chunks/dep-e1fc1d62.js:56311:5)
      at async applyHtmlTransforms (/home/laurent/projects/SSCCE/vite-font-face-src-url-issue/node_modules/vite/dist/node/chunks/dep-e1fc1d62.js:29511:21)
      at async viteIndexHtmlMiddleware (/home/laurent/projects/SSCCE/vite-font-face-src-url-issue/node_modules/vite/dist/node/chunks/dep-e1fc1d62.js:56347:28)

The build is working, and the preview too.
It was working fine with Vite 2.9.6. It’s not working with versions 2.9.7 and above.

The culprit is the following line:

url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');

If you remove this line, it works.
Could this be an issue about inlined css urls?

Reproduction

https://stackblitz.com/edit/vitejs-vite-pusvkz?file=index.html

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04 LTS 22.04 LTS (Jammy Jellyfish)
    CPU: (8) x64 AMD FX(tm)-8350 Eight-Core Processor
    Memory: 17.38 GB / 31.31 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 17.6.0 - ~/.nvm/versions/node/v17.6.0/bin/node
    npm: 8.5.1 - ~/.nvm/versions/node/v17.6.0/bin/npm
  Browsers:
    Chrome: 101.0.4951.54
    Chromium: 101.0.4951.54
    Firefox: 100.0
  npmPackages:
    vite: ^2.9.8 => 2.9.8

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.