Skip to content

Fix container names with hyphens #17628

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
philipp-spiess merged 4 commits into from
Apr 11, 2025
Merged

Fix container names with hyphens #17628

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7b65bcf
Fix container names with hyphens
wongjn Apr 9, 2025
d643d22
Update changelog
wongjn Apr 9, 2025
aec5672
Only special-case `@` once
philipp-spiess Apr 10, 2025
113c172
Remove negation in CHANGELOG.md
wongjn Apr 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Fix container names with hyphens
  • Loading branch information
@wongjn
wongjn committed Apr 9, 2025
commit 7b65bcfe42880ecc2597998f1b928ca4b16d2eca
30 changes: 30 additions & 0 deletions packages/tailwindcss/src/candidate.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1294,6 +1294,36 @@ it('should parse a functional variant starting with @', () => {
`)
})

it('should parse a functional variant starting with @ that has a hyphen', () => {
let utilities = new Utilities()
utilities.static('flex', () => [])

let variants = new Variants()
variants.functional('@', () => {})

expect(run('@foo-bar:flex', { utilities, variants })).toMatchInlineSnapshot(`
[
{
"important": false,
"kind": "static",
"raw": "@foo-bar:flex",
"root": "flex",
"variants": [
{
"kind": "functional",
"modifier": null,
"root": "@",
"value": {
"kind": "named",
"value": "foo-bar",
},
},
],
},
]
`)
})

it('should parse a functional variant starting with @ and a modifier', () => {
let utilities = new Utilities()
utilities.static('flex', () => [])
Expand Down
6 changes: 6 additions & 0 deletions packages/tailwindcss/src/candidate.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -777,4 +777,10 @@ function* findRoots(input: string, exists: (input: string) => boolean): Iterable

idx = input.lastIndexOf('-', idx - 1)
} while (idx > 0)

// Try '@' variant after permutations. This allows things like `@max` of `@max-foo-bar`
// to match before looking for `@`.
if (input[0] === '@' && exists('@')) {
yield ['@', input.slice(1)]
}
Comment on lines +773 to +777
Copy link
Contributor

@philipp-spiess philipp-spiess Apr 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've been thinking of restructuring this somehow so that there's only one special-case for @. Let me know what you think about this (I pushed onto your PR). Tests seem to pass so it should be fine? 🤞

Copy link
Collaborator Author

@wongjn wongjn Apr 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I was thinking that there would probably be some way to have only one code path for @ 👍

}
45 changes: 44 additions & 1 deletion packages/tailwindcss/src/variants.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2074,6 +2074,7 @@ test('container queries', async () => {
css`
@theme {
--container-lg: 1024px;
--container-foo-bar: 1440px;
}
@tailwind utilities;
`,
Expand All @@ -2082,20 +2083,38 @@ test('container queries', async () => {
'@lg/name:flex',
'@[123px]:flex',
'@[456px]/name:flex',
'@foo-bar:flex',
'@foo-bar/name:flex',

'@min-lg:flex',
'@min-lg/name:flex',
'@min-[123px]:flex',
'@min-[456px]/name:flex',
'@min-foo-bar:flex',
'@min-foo-bar/name:flex',

'@max-lg:flex',
'@max-lg/name:flex',
'@max-[123px]:flex',
'@max-[456px]/name:flex',
'@max-foo-bar:flex',
'@max-foo-bar/name:flex',
],
),
).toMatchInlineSnapshot(`
"@container name not (min-width: 1024px) {
"@container name not (min-width: 1440px) {
.\\@max-foo-bar\\/name\\:flex {
display: flex;
}
}

@container not (min-width: 1440px) {
.\\@max-foo-bar\\:flex {
display: flex;
}
}

@container name not (min-width: 1024px) {
.\\@max-lg\\/name\\:flex {
display: flex;
}
Expand Down Expand Up @@ -2153,6 +2172,30 @@ test('container queries', async () => {
.\\@min-lg\\:flex {
display: flex;
}
}

@container name (min-width: 1440px) {
.\\@foo-bar\\/name\\:flex {
display: flex;
}
}

@container (min-width: 1440px) {
.\\@foo-bar\\:flex {
display: flex;
}
}

@container name (min-width: 1440px) {
.\\@min-foo-bar\\/name\\:flex {
display: flex;
}
}

@container (min-width: 1440px) {
.\\@min-foo-bar\\:flex {
display: flex;
}
}"
`)
})
Expand Down