From 601f3693743b348e751ed49099c5eb1b8fffd1dd Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 28 Mar 2025 14:37:54 +0100 Subject: [PATCH] =?UTF-8?q?Extract=20special=20`@("@")md:=E2=80=A6`=20synt?= =?UTF-8?q?ax=20in=20Razor=20files=20(#17427)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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` image --- CHANGELOG.md | 1 + .../oxide/src/extractor/pre_processors/razor.rs | 17 ++++++++++++++++- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c09d68921..b84857e62 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/crates/oxide/src/extractor/pre_processors/razor.rs b/crates/oxide/src/extractor/pre_processors/razor.rs index d77644b12..2713ea748 100644 --- a/crates/oxide/src/extractor/pre_processors/razor.rs +++ b/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 { - 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#"

With 2 elements

"#, + r#"

With 2 elements

"#, + ); + + Razor::test(input, expected); + Razor::test_extract_contains( + input, + vec!["@md:bg-red-500", "@md:border-green-500", "border-8"], + ); + } }