Extract special @("@")md:… syntax in Razor files (#17427)

This PR fixes an extraction issue in Razor files where `@@md:bg-red-500`
can't always be extracted properly. We already convert `@@md:bg-red-500`
to ` @md:bg-red-500` but in certain situations Razor will emit the
double `@@` to the DOM.

A workaround in Razor land would be to write `@("@")md:bg-red-500`
instead. See: https://github.com/dotnet/aspnetcore/issues/38595 But then
we don't extract the `@md:bg-red-500` properly anymore.

This is where this PR comes in, essentially we will pre process the
Razor contents and apply the following replacement internally:

```diff
- @("@")md:bg-red-500
+      @md:bg-red-500
```
Notice that the `)` looks like it's replaced with `@`. This will have a
small side effect later when we get to the testing part.

But this way we properly see the `@md:bg-red-500` class during class
extraction.

> [!WARNING]
> There is technically a bug here because of the replacement with `@`,
because if you now run the `npx @tailwindcss/upgrade@latest` tool, then
we would replace `)md:bg-red-500` if changes are required, not the
`@("@")md:bg-red-500` part. We can try to fix that in this PR but it
seems unlikely that we will actually run into this issue realistically
speaking. I think fixing the actual extraction here is much more
important than the upgrade tooling that could fail _if_ we ever have to
migrate `@md:…` to something else.

Fixes: #17424

## Test plan

1. Added a test to verify the fix
2. Existing tests pass
3. Verified this in the extractor tool, but it looks a tiny bit funky.

Typically we remove characters by replacing it with a space ` `. But
this time, we replace it with some spaces _and_ an `@` character that
didn't exist at that specific position. If you look at the diff above,
you will notice that `)` was replaced with `@`.

That's why in the extractor tool it is highlighted that it could extract
it, but it's just funny looking because it highlights `)md:bg-red-500`

<img width="1816" alt="image"
src="https://github.com/user-attachments/assets/57e6a3ac-bfd5-4cad-a1ce-0039b4d7d9b5"
/>

CHANGELOG.md

@@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix symlink issues when resolving `@source` directives ([#17391](https://github.com/tailwindlabs/tailwindcss/pull/17391))
 - `@tailwindcss/cli` considers ignore rules in `--watch` mode ([#17255](https://github.com/tailwindlabs/tailwindcss/pull/17255))
 - Fix negated `content` rules in legacy JavaScript configuration ([#17255](https://github.com/tailwindlabs/tailwindcss/pull/17255))
+- Extract special `@("@")md:…` syntax in Razor files ([#17427](https://github.com/tailwindlabs/tailwindcss/pull/17427))
 
 ### Changed
 

crates/oxide/src/extractor/pre_processors/razor.rs

@@ -6,7 +6,7 @@ pub struct Razor;
 
 impl PreProcessor for Razor {
     fn process(&self, content: &[u8]) -> Vec<u8> {
-        content.replace("@@", " @")
+        content.replace("@@", " @").replace(r#"@("@")"#, "     @")
     }
 }
 
@@ -24,4 +24,19 @@ mod tests {
         Razor::test(input, expected);
         Razor::test_extract_contains(input, vec!["@sm:text-red-500"]);
     }
+
+    // https://github.com/tailwindlabs/tailwindcss/issues/17424
+    #[test]
+    fn test_razor_syntax_with() {
+        let (input, expected) = (
+            r#"<p class="@("@")md:bg-red-500 @@md:border-green-500 border-8">With 2 elements</p>"#,
+            r#"<p class="     @md:bg-red-500  @md:border-green-500 border-8">With 2 elements</p>"#,
+        );
+
+        Razor::test(input, expected);
+        Razor::test_extract_contains(
+            input,
+            vec!["@md:bg-red-500", "@md:border-green-500", "border-8"],
+        );
+    }
 }