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

Properly resolve theme('someKey.DEFAULT') when only --some-key-* keys exist #14354

Merged
merged 2 commits into from
Sep 6, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
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
27 changes: 13 additions & 14 deletions packages/tailwindcss/src/compat/plugin-functions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ function readFromCss(theme: Theme, path: string[]) {
}

// We have to turn the map into object-like structure for v3 compatibility
let obj = {}
let obj: Record<string, unknown> = {}
let useNestedObjects = false // paths.some((path) => nestedKeys.has(path))

for (let [key, value] of map) {
Expand All @@ -134,20 +134,19 @@ function readFromCss(theme: Theme, path: string[]) {
set(obj, path, value)
}

if ('DEFAULT' in obj) {
// The request looked like `theme('animation.DEFAULT')` and was turned into
// a lookup for `--animation-*` and we should extract the value for the
// `DEFAULT` key from the list of possible values
if (path[path.length - 1] === 'DEFAULT') {
return obj.DEFAULT
}
// If the request looked like `theme('animation.DEFAULT')` it would have been
// turned into a lookup for `--animation-*` so we should extract the value for
// the `DEFAULT` key from the list of possible values. If there is no
// `DEFAULT` in the list, there is no match so return `null`.
if (path[path.length - 1] === 'DEFAULT') {
return obj?.DEFAULT ?? null
}

// The request looked like `theme('animation.spin')` and was turned into a
// lookup for `--animation-spin-*` which had only one entry which means it
// should be returned directly
if (Object.keys(obj).length === 1) {
return obj.DEFAULT
}
// The request looked like `theme('animation.spin')` and was turned into a
// lookup for `--animation-spin-*` which had only one entry which means it
// should be returned directly.
if ('DEFAULT' in obj && Object.keys(obj).length === 1) {
return obj.DEFAULT
}

return obj
Expand Down
29 changes: 29 additions & 0 deletions packages/tailwindcss/src/plugin-api.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -804,6 +804,35 @@ describe('theme', async () => {
expect(fn).toHaveBeenCalledWith('blue')
})

test("`theme('*.DEFAULT')` resolves to `undefined` when all theme keys in that namespace have a suffix", async ({
expect,
}) => {
let input = css`
@tailwind utilities;
@plugin "my-plugin";
@theme {
--transition-timing-function-in: ease-in;
--transition-timing-function-out: ease-out;
}
`

let fn = vi.fn()

await compile(input, {
loadPlugin: async () => {
return plugin(({ theme }) => {
fn(theme('transitionTimingFunction.DEFAULT'))
fn(theme('transitionTimingFunction.in'))
fn(theme('transitionTimingFunction.out'))
})
},
})

expect(fn).toHaveBeenNthCalledWith(1, undefined)
expect(fn).toHaveBeenNthCalledWith(2, 'ease-in')
expect(fn).toHaveBeenNthCalledWith(3, 'ease-out')
})

test('nested theme key lookups work even for flattened keys', async ({ expect }) => {
let input = css`
@tailwind utilities;
Expand Down