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