Skip to content
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.

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

Ensure underscore in theme() are also preserved #14781

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 1 addition & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

### Changed

- Don't convert underscores in the first argument to `var()` to spaces ([#14776](https://github.com/tailwindlabs/tailwindcss/pull/14776))
- Don't convert underscores in the first argument to `var()` and `theme()` to spaces ([#14776](https://github.com/tailwindlabs/tailwindcss/pull/14776), [#14781](https://github.com/tailwindlabs/tailwindcss/pull/14781))

### Fixed

Expand Down
25 changes: 25 additions & 0 deletions packages/tailwindcss/src/candidate.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1105,6 +1105,31 @@ it('should not replace `_` in the first argument to `var()`', () => {
`)
})

it('should not replace `_` in the first argument to `theme()`', () => {
let utilities = new Utilities()
utilities.functional('ml', () => [])

expect(run('ml-[theme(--spacing-1_5,_theme(--spacing-2_5,_1rem))]', { utilities }))
.toMatchInlineSnapshot(`
[
{
"important": false,
"kind": "functional",
"modifier": null,
"negative": false,
"raw": "ml-[theme(--spacing-1_5,_theme(--spacing-2_5,_1rem))]",
"root": "ml",
"value": {
"dataType": null,
"kind": "arbitrary",
"value": "theme(--spacing-1_5, theme(--spacing-2_5, 1rem))",
},
"variants": [],
},
]
`)
})

it('should parse arbitrary properties', () => {
expect(run('[color:red]')).toMatchInlineSnapshot(`
[
Expand Down
12 changes: 10 additions & 2 deletions packages/tailwindcss/src/index.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ describe('compiling CSS', () => {
).toMatchSnapshot()
})

test('unescapes underscores to spaces inside arbitrary values except for `url()` and first argument of `var()`', async () => {
test('unescapes underscores to spaces inside arbitrary values except for `url()` and first argument of `var()` and `theme()`', async () => {
expect(
await compileCss(
css`
Expand All @@ -126,14 +126,22 @@ describe('compiling CSS', () => {
}
@tailwind utilities;
`,
['bg-[no-repeat_url(./my_file.jpg)', 'ml-[var(--spacing-1_5,_var(--spacing-2_5,_1rem))]'],
[
'bg-[no-repeat_url(./my_file.jpg)',
'ml-[var(--spacing-1_5,_var(--spacing-2_5,_1rem))]',
'ml-[theme(--spacing-1_5,theme(--spacing-2_5,_1rem)))]',
],
),
).toMatchInlineSnapshot(`
":root {
--spacing-1_5: 1.5rem;
--spacing-2_5: 2.5rem;
}

.ml-\\[theme\\(--spacing-1_5\\,theme\\(--spacing-2_5\\,_1rem\\)\\)\\)\\] {
margin-left: 1.5rem;
}

.ml-\\[var\\(--spacing-1_5\\,_var\\(--spacing-2_5\\,_1rem\\)\\)\\] {
margin-left: var(--spacing-1_5, var(--spacing-2_5, 1rem));
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,14 @@ describe('decoding arbitrary values', () => {
)
})

it('should not replace underscores in the first argument of theme()', () => {
expect(decodeArbitraryValue('theme(--spacing-1_5)')).toBe('theme(--spacing-1_5)')
expect(decodeArbitraryValue('theme(--spacing-1_5,_1rem)')).toBe('theme(--spacing-1_5, 1rem)')
expect(decodeArbitraryValue('theme(--spacing-1_5,_theme(--spacing-2_5,_1rem))')).toBe(
'theme(--spacing-1_5, theme(--spacing-2_5, 1rem))',
)
})

it('should leave var(…) as is', () => {
expect(decodeArbitraryValue('var(--foo)')).toBe('var(--foo)')
expect(decodeArbitraryValue('var(--headings-h1-size)')).toBe('var(--headings-h1-size)')
Expand Down
13 changes: 9 additions & 4 deletions packages/tailwindcss/src/utils/decode-arbitrary-value.ts
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,12 @@ function recursivelyDecodeArbitraryValues(ast: ValueParser.ValueAstNode[]) {
break
}

if (node.value === 'var' || node.value.endsWith('_var')) {
if (
node.value === 'var' ||
node.value.endsWith('_var') ||
node.value === 'theme' ||
node.value.endsWith('_theme')
) {
// Don't decode underscores in the first argument of var() but do
// decode the function name
node.value = convertUnderscoresToWhitespace(node.value)
Expand All @@ -78,11 +83,11 @@ function recursivelyDecodeArbitraryValues(ast: ValueParser.ValueAstNode[]) {
break
}
default:
never()
never(node)
}
}
}

function never(): never {
throw new Error('This should never happen')
function never(value: never): never {
throw new Error(`Unexpected value: ${value}`)
}