From 9c59b07fb3648a395bb9fb9ea24f3d090964845c Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 5 Mar 2025 22:46:43 +0100 Subject: [PATCH] Ensure `--` is allowed inside candidates (#16972) This PR fixes an issue where named utilities that contain double dashes `--` are not extracted correctly. Some people use `--` in the middle of the utility to create some form of namespaced utility. Given this input: ```js let x = 'foo--bar' ``` The extracted candidates before this change: ```js [ "let", "x", "--bar" ] ``` The extracted candidates after this change: ```js [ "let", "x", "foo--bar", "--bar" ] ``` The reason `--bar` is still extracted in both cases is because of the CSS variable machine. We could improve its extraction by checking its boundary characters but that's a different issue. For now, the important thing is that `foo--bar` was extracted. # Test plan 1. Added new test 2. Existing tests pass --- CHANGELOG.md | 5 ++++- crates/oxide/src/extractor/mod.rs | 1 + crates/oxide/src/extractor/named_utility_machine.rs | 6 +++++- crates/oxide/src/extractor/utility_machine.rs | 1 + 4 files changed, 11 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4a4406b11..31c8de14d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - _Experimental_: Add `user-valid` and `user-invalid` variants ([#12370](https://github.com/tailwindlabs/tailwindcss/pull/12370)) - _Experimental_: Add `wrap-anywhere`, `wrap-break-word`, and `wrap-normal` utilities ([#12128](https://github.com/tailwindlabs/tailwindcss/pull/12128)) +### Fixed + +- Ensure classes containing `--` are extracted correctly ([#16972](https://github.com/tailwindlabs/tailwindcss/pull/16972)) + ## [4.0.10] - 2025-03-05 ### Added @@ -41,7 +45,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Removed `max-w-auto` and `max-h-auto` utilities as they generate invalid CSS ([#16917](https://github.com/tailwindlabs/tailwindcss/pull/16917)) - Replaced the existing candidate extractor with a brand new extractor to improve maintainability, correctness, and performance ([#16306](https://github.com/tailwindlabs/tailwindcss/pull/16306)) - ## [4.0.9] - 2025-02-25 ### Fixed diff --git a/crates/oxide/src/extractor/mod.rs b/crates/oxide/src/extractor/mod.rs index b60720e25..0a5b972dc 100644 --- a/crates/oxide/src/extractor/mod.rs +++ b/crates/oxide/src/extractor/mod.rs @@ -297,6 +297,7 @@ mod tests { ("flex block", vec!["flex", "block"]), // Simple utility with dashes ("items-center", vec!["items-center"]), + ("items--center", vec!["items--center"]), // Simple utility with numbers ("px-2.5", vec!["px-2.5"]), // Arbitrary properties diff --git a/crates/oxide/src/extractor/named_utility_machine.rs b/crates/oxide/src/extractor/named_utility_machine.rs index 1284091b9..a7fab0407 100644 --- a/crates/oxide/src/extractor/named_utility_machine.rs +++ b/crates/oxide/src/extractor/named_utility_machine.rs @@ -171,7 +171,9 @@ impl Machine for NamedUtilityMachine { // ^ Invalid // E.g.: `flex-2` // ^ Valid - Class::AlphaLower | Class::AlphaUpper | Class::Number => { + // E.g.: `foo--bar` + // ^ Valid + Class::AlphaLower | Class::AlphaUpper | Class::Number | Class::Dash => { cursor.advance(); } @@ -388,6 +390,8 @@ mod tests { ("a", vec!["a"]), // With dashes ("items-center", vec!["items-center"]), + // With double dashes + ("items--center", vec!["items--center"]), // With numbers ("px-5", vec!["px-5"]), ("px-2.5", vec!["px-2.5"]), diff --git a/crates/oxide/src/extractor/utility_machine.rs b/crates/oxide/src/extractor/utility_machine.rs index 98f76351e..ea5241a2d 100644 --- a/crates/oxide/src/extractor/utility_machine.rs +++ b/crates/oxide/src/extractor/utility_machine.rs @@ -219,6 +219,7 @@ mod tests { ("flex! block", vec!["flex!", "block"]), // With dashes ("items-center", vec!["items-center"]), + ("items--center", vec!["items--center"]), // Inside a string ("'flex'", vec!["flex"]), // Multiple utilities