archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Don't read variables for shadow sizes (#13449)

Browse Source 
* Don't read variables for shadow sizes

* Add UI test

* Handle key suffix in get function instead of ThemeKey

* Remove duplicate theme keys

* Format test in a less insane way

* Revert playground changes

* Update changelog

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
This commit is contained in:
Adam Wathan 2024-04-04 18:01:37 -04:00 committed by GitHub
parent 34fea0e3d3
commit cc6094e84f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 38 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Enable Vite's `waitForRequestsIdle()` for client requests only ([#13394](https://github.com/tailwindlabs/tailwindcss/pull/13394))
- Make sure `::first-letter` respectes `::selection` styles ([#13408](https://github.com/tailwindlabs/tailwindcss/pull/13408))
- Always inline values for `shadow-*` utilities to ensure shadow colors work correctly ([#13449](https://github.com/tailwindlabs/tailwindcss/pull/13449))
## [4.0.0-alpha.11] - 2024-03-27

2
packages/tailwindcss/src/theme.ts
View File

@ -42,7 +42,7 @@ export class Theme {
return keys
}
get(themeKeys: ThemeKey[]): string | null {
get(themeKeys: (ThemeKey | `${ThemeKey}-${string}`)[]): string | null {
for (let key of themeKeys) {
let value = this.values.get(key)
if (value) {

8
packages/tailwindcss/src/utilities.test.ts
View File

@ -11492,8 +11492,8 @@ test('shadow', () => {
}
.shadow-xl {
--tw-shadow: var(--shadow-xl, 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a);
--tw-shadow-colored: var(--shadow-xl, 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a);
--tw-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
@ -11725,8 +11725,8 @@ test('inset-shadow', () => {
}
.inset-shadow-sm {
--tw-inset-shadow: var(--inset-shadow-sm, inset 0 1px 1px #0000000d);
--tw-inset-shadow-colored: var(--inset-shadow-sm, inset 0 1px 1px #0000000d);
--tw-inset-shadow: inset 0 1px 1px #0000000d;
--tw-inset-shadow-colored: inset 0 1px 1px var(--tw-inset-shadow-color);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

5
packages/tailwindcss/src/utilities.ts
View File

@ -4171,7 +4171,7 @@ export function createUtilities(theme: Theme) {
// Shadow size
{
let value = theme.resolve(candidate.value.value, ['--shadow'])
let value = theme.get([`--shadow-${candidate.value.value}`])
if (value) {
return [
boxShadowProperties(),
@ -4268,7 +4268,8 @@ export function createUtilities(theme: Theme) {
// Shadow size
{
let value = theme.resolve(candidate.value.value, ['--inset-shadow'])
let value = theme.get([`--inset-shadow-${candidate.value.value}`])
if (value) {
return [
boxShadowProperties(),

29
packages/tailwindcss/tests/ui.spec.ts
View File

@ -160,6 +160,35 @@ test('composing shadow, inset shadow, ring, and inset ring', async ({ page }) =>
)
})
test('shadow colors', async ({ page }) => {
let { getPropertyValue } = await render(
page,
html`
<div id="x" class="shadow shadow-red-500"></div>
<div id="y" class="shadow-xl shadow-red-500"></div>
`,
)
expect(await getPropertyValue('#x', 'box-shadow')).toEqual(
[
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
'rgb(239, 68, 68) 0px 1px 3px 0px, rgb(239, 68, 68) 0px 1px 2px -1px',
].join(', '),
)
expect(await getPropertyValue('#y', 'box-shadow')).toEqual(
[
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
'rgb(239, 68, 68) 0px 20px 25px -5px, rgb(239, 68, 68) 0px 8px 10px -6px',
].join(', '),
)
})
test('outline style is optional', async ({ page }) => {
let { getPropertyValue } = await render(
page,