src descriptor in @font-face rule is transformed/formatted incorrectly

[mischnic]

What version of Tailwind CSS are you using?

For example: both 3.4.13 and 4.0.0-alpha.30

What build tool (or framework if it abstracts the build tool) are you using?

This happens in the online playground as well. Originally Next.js with Turbopack

What version of Node.js are you using?

v20

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/NObbqx3vf9?file=css

Describe your issue

Tailwind turns

@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(some/url/with/query?{%22url%22:%22https://fonts.gstatic.com/s/inconsolata/v32/QlddNThLqRwH-OJ1UHjlKENVzkWGVkL3GZQmAwLyxq15IDhunJ_o.woff2%22,%22preload%22:false,%22has_size_adjust%22:true}) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

into

@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(some/url/with/query? {
    %22url%22: %22https://fonts.gstatic.com/s/inconsolata/v32/QlddNThLqRwH-OJ1UHjlKENVzkWGVkL3GZQmAwLyxq15IDhunJ_o.woff2%22,%22preload%22:false,%22has_size_adjust%22:true;
  }
  ) format('woff2': ) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

Notice that src: value has some newlines, and that format() is duplicated with invalid syntax.

[philipp-spiess]

Hey! Thanks a ton for this report. We actually just merged some fixed around this into the next branch the other day: #14879

I did some quick test with your example and it does seem to fix the issue. We plan to release a new alpha very soon so you can test it too!