`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: https://github.com/tailwindlabs/tailwindcss/pull/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!

[murbanowicz]

I believe I git it. I am on latest Next and Tailwind 4.0.13 and when trying to use next/font/google, it works well in dev mode, but when app is built, it throws errors. Error: @next/font/google failed to run or is incorrectly configured.

[philipp-spiess]

Can confirm that this works with Vite and Next.js. Seems like there is an issue in Play which I assume might be the formatter we're using there, but it doesn't seem to be Tailwind core anymore.