Ensure classes containing number followed by dash or underscore are extracted correctly (#16980)

Fixes #16978, and also added support for dash.
Classes like `text-theme1-primary` or `text-theme1_primary` should be
treated as valid.

If this approach is not aligned with the project’s direction or there
are any concerns, please feel free to close or edit this PR 😃

<br/>

### As is

Classes conatining number followed by dash or underscore (e.g.
`bg-theme1-primary`, `text-title1_strong`) are ignored, and utility
classes are not generated.

### To be

Classes conatining number followed by dash or underscore (e.g.
`bg-theme1-primary`, `text-title1_strong`) are treated as valid
tailwindcss classes

---------

Co-authored-by: Philipp Spiess <hello@philippspiess.com>
This commit is contained in:
Hyunmin Woo (Hanul) 2025-03-06 19:44:43 +09:00 • committed by GitHub
parent 9c59b07fb3
commit 4a0236471e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 17 additions and 1 deletions

View file

@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Fixed
- Ensure classes containing `--` are extracted correctly ([#16972](https://github.com/tailwindlabs/tailwindcss/pull/16972))
- Ensure classes containing numbers followed by dash or underscore are extracted correctly ([#16980](https://github.com/tailwindlabs/tailwindcss/pull/16980))
## [4.0.10] - 2025-03-05

View file

@ -833,6 +833,15 @@ mod tests {
);
}
// https://github.com/tailwindlabs/tailwindcss/issues/16978
#[test]
fn test_classes_containing_number_followed_by_dash_or_underscore() {
assert_extract_sorted_candidates(
r#"<div class="text-Title1_Strong"></div>"#,
vec!["text-Title1_Strong"],
);
}
#[test]
fn test_extract_css_variables() {
for (input, expected) in [

View file

@ -243,7 +243,8 @@ impl Machine for NamedUtilityMachine {
}
// A number must be preceded by a `-`, `.` or another alphanumeric
// character, and can be followed by a `.` or an alphanumeric character.
// character, and can be followed by a `.` or an alphanumeric character or
// dash or underscore.
//
// E.g.: `text-2xs`
// ^^
@ -272,6 +273,8 @@ impl Machine for NamedUtilityMachine {
| Class::AlphaLower
| Class::AlphaUpper
| Class::Percent
| Class::Underscore
| Class::Dash
) {
return self.done(self.start_pos, cursor);
}
@ -395,6 +398,9 @@ mod tests {
// With numbers
("px-5", vec!["px-5"]),
("px-2.5", vec!["px-2.5"]),
// With number followed by dash or underscore
("text-title1-strong", vec!["text-title1-strong"]),
("text-title1_strong", vec!["text-title1_strong"]),
// With trailing % sign
("from-15%", vec!["from-15%"]),
// Arbitrary value with bracket notation