Skip to content

Commit e143040

Browse files
philipp-spiessphilipp-spiess
committed
Move utilities compat layer
1 parent 92827ae commit e143040

File tree

5 files changed

+173
-128
lines changed

5 files changed

+173
-128
lines changed

‎packages/tailwindcss/src/compat/apply-compat-hooks.ts‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { decl, styleRule, toCss, walk, WalkAction, type AstNode } from '../ast'
1+
import { styleRule, toCss, walk, WalkAction, type AstNode } from '../ast'
22
import type { DesignSystem } from '../design-system'
33
import { segment } from '../utils/segment'
44
import { applyConfigToTheme } from './apply-config-to-theme'
@@ -8,6 +8,7 @@ import { resolveConfig } from './config/resolve-config'
88
import type { UserConfig } from './config/types'
99
import { registerContainerCompat } from './container'
1010
import { darkModePlugin } from './dark-mode'
11+
import { registerLegacyUtilities } from './legacy-utilities'
1112
import { buildPluginApi, type CssPluginOptions, type Plugin } from './plugin-api'
1213
import { registerScreensConfig } from './screens-config'
1314
import { registerThemeVariantOverrides } from './theme-variants'
@@ -116,13 +117,7 @@ export async function applyCompatibilityHooks({
116117
}
117118
})
118119

119-
designSystem.utilities.functional('max-w-screen', (candidate) => {
120-
if (!candidate.value) return
121-
if (candidate.value.kind === 'arbitrary') return
122-
let value = designSystem.theme.resolve(candidate.value.value, ['--breakpoint'])
123-
if (!value) return
124-
return [decl('max-width', value)]
125-
})
120+
registerLegacyUtilities(designSystem)
126121

127122
// Override `resolveThemeValue` with a version that is backwards compatible
128123
// with dot notation paths like `colors.red.500`. We could do this by default

‎packages/tailwindcss/src/compat/legacy-utilities.test.ts‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
import { expect, test } from 'vitest'
2+
import { compileCss, run } from '../test-utils/run'
3+
4+
const css = String.raw
5+
6+
test('bg-gradient-*', async () => {
7+
expect(
8+
await compileCss(
9+
css`
10+
@tailwind utilities;
11+
`,
12+
[
13+
'bg-gradient-to-t',
14+
'bg-gradient-to-tr',
15+
'bg-gradient-to-r',
16+
'bg-gradient-to-br',
17+
'bg-gradient-to-b',
18+
'bg-gradient-to-bl',
19+
'bg-gradient-to-l',
20+
'bg-gradient-to-tl',
21+
],
22+
),
23+
).toMatchInlineSnapshot(`
24+
".bg-gradient-to-b {
25+
--tw-gradient-position: to bottom in oklch, ;
26+
background-image: linear-gradient(var(--tw-gradient-stops));
27+
background-image: linear-gradient(var(--tw-gradient-stops));
28+
}
29+
30+
.bg-gradient-to-bl {
31+
--tw-gradient-position: to bottom left in oklch, ;
32+
background-image: linear-gradient(var(--tw-gradient-stops));
33+
background-image: linear-gradient(var(--tw-gradient-stops));
34+
}
35+
36+
.bg-gradient-to-br {
37+
--tw-gradient-position: to bottom right in oklch, ;
38+
background-image: linear-gradient(var(--tw-gradient-stops));
39+
background-image: linear-gradient(var(--tw-gradient-stops));
40+
}
41+
42+
.bg-gradient-to-l {
43+
--tw-gradient-position: to left in oklch, ;
44+
background-image: linear-gradient(var(--tw-gradient-stops));
45+
background-image: linear-gradient(var(--tw-gradient-stops));
46+
}
47+
48+
.bg-gradient-to-r {
49+
--tw-gradient-position: to right in oklch, ;
50+
background-image: linear-gradient(var(--tw-gradient-stops));
51+
background-image: linear-gradient(var(--tw-gradient-stops));
52+
}
53+
54+
.bg-gradient-to-t {
55+
--tw-gradient-position: to top in oklch, ;
56+
background-image: linear-gradient(var(--tw-gradient-stops));
57+
background-image: linear-gradient(var(--tw-gradient-stops));
58+
}
59+
60+
.bg-gradient-to-tl {
61+
--tw-gradient-position: to top left in oklch, ;
62+
background-image: linear-gradient(var(--tw-gradient-stops));
63+
background-image: linear-gradient(var(--tw-gradient-stops));
64+
}
65+
66+
.bg-gradient-to-tr {
67+
--tw-gradient-position: to top right in oklch, ;
68+
background-image: linear-gradient(var(--tw-gradient-stops));
69+
background-image: linear-gradient(var(--tw-gradient-stops));
70+
}"
71+
`)
72+
})
73+
74+
test('max-w-screen', async () => {
75+
expect(
76+
await compileCss(
77+
css`
78+
@theme {
79+
--breakpoint-sm: 40rem;
80+
--breakpoint-md: 48rem;
81+
--breakpoint-lg: 64rem;
82+
--breakpoint-xl: 80rem;
83+
--breakpoint-2xl: 96rem;
84+
}
85+
@tailwind utilities;
86+
`,
87+
[
88+
'max-w-screen-sm',
89+
'max-w-screen-md',
90+
'max-w-screen-lg',
91+
'max-w-screen-xl',
92+
'max-w-screen-2xl',
93+
],
94+
),
95+
).toMatchInlineSnapshot(`
96+
":root {
97+
--breakpoint-sm: 40rem;
98+
--breakpoint-md: 48rem;
99+
--breakpoint-lg: 64rem;
100+
--breakpoint-xl: 80rem;
101+
--breakpoint-2xl: 96rem;
102+
}
103+
104+
.max-w-screen-2xl {
105+
max-width: var(--breakpoint-2xl);
106+
}
107+
108+
.max-w-screen-lg {
109+
max-width: var(--breakpoint-lg);
110+
}
111+
112+
.max-w-screen-md {
113+
max-width: var(--breakpoint-md);
114+
}
115+
116+
.max-w-screen-sm {
117+
max-width: var(--breakpoint-sm);
118+
}
119+
120+
.max-w-screen-xl {
121+
max-width: var(--breakpoint-xl);
122+
}"
123+
`)
124+
expect(
125+
await run([
126+
'max-w-screen-oh',
127+
'max-w-screen-4',
128+
'max-w-screen-[4px]',
129+
'-max-w-screen-sm',
130+
'-max-w-screen-[4px]',
131+
'max-w-screen-none/foo',
132+
'max-w-screen-full/foo',
133+
'max-w-screen-max/foo',
134+
'max-w-screen-max/foo',
135+
'max-w-screen-fit/foo',
136+
'max-w-screen-4/foo',
137+
'max-w-screen-xl/foo',
138+
'max-w-screen-[4px]/foo',
139+
]),
140+
).toEqual('')
141+
})

‎packages/tailwindcss/src/compat/legacy-utilities.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { decl } from '../ast'
2+
import type { DesignSystem } from '../design-system'
3+
4+
export function registerLegacyUtilities(designSystem: DesignSystem) {
5+
for (let [value, direction] of [
6+
['t', 'top'],
7+
['tr', 'top right'],
8+
['r', 'right'],
9+
['br', 'bottom right'],
10+
['b', 'bottom'],
11+
['bl', 'bottom left'],
12+
['l', 'left'],
13+
['tl', 'top left'],
14+
]) {
15+
designSystem.utilities.static(`bg-gradient-to-${value}`, () => [
16+
decl('--tw-gradient-position', `to ${direction} in oklch,`),
17+
decl('background-image', `linear-gradient(var(--tw-gradient-stops))`),
18+
])
19+
}
20+
21+
designSystem.utilities.functional('max-w-screen', (candidate) => {
22+
if (!candidate.value) return
23+
if (candidate.value.kind === 'arbitrary') return
24+
let value = designSystem.theme.resolve(candidate.value.value, ['--breakpoint'])
25+
if (!value) return
26+
return [decl('max-width', value)]
27+
})
28+
}

‎packages/tailwindcss/src/utilities.test.ts‎

Lines changed: 0 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -2861,75 +2861,6 @@ test('max-width', async () => {
28612861
).toEqual('')
28622862
})
28632863

2864-
test('max-w-screen', async () => {
2865-
expect(
2866-
await compileCss(
2867-
css`
2868-
@theme {
2869-
--breakpoint-sm: 40rem;
2870-
--breakpoint-md: 48rem;
2871-
--breakpoint-lg: 64rem;
2872-
--breakpoint-xl: 80rem;
2873-
--breakpoint-2xl: 96rem;
2874-
}
2875-
@tailwind utilities;
2876-
`,
2877-
[
2878-
'max-w-screen-sm',
2879-
'max-w-screen-md',
2880-
'max-w-screen-lg',
2881-
'max-w-screen-xl',
2882-
'max-w-screen-2xl',
2883-
],
2884-
),
2885-
).toMatchInlineSnapshot(`
2886-
":root {
2887-
--breakpoint-sm: 40rem;
2888-
--breakpoint-md: 48rem;
2889-
--breakpoint-lg: 64rem;
2890-
--breakpoint-xl: 80rem;
2891-
--breakpoint-2xl: 96rem;
2892-
}
2893-
2894-
.max-w-screen-2xl {
2895-
max-width: var(--breakpoint-2xl);
2896-
}
2897-
2898-
.max-w-screen-lg {
2899-
max-width: var(--breakpoint-lg);
2900-
}
2901-
2902-
.max-w-screen-md {
2903-
max-width: var(--breakpoint-md);
2904-
}
2905-
2906-
.max-w-screen-sm {
2907-
max-width: var(--breakpoint-sm);
2908-
}
2909-
2910-
.max-w-screen-xl {
2911-
max-width: var(--breakpoint-xl);
2912-
}"
2913-
`)
2914-
expect(
2915-
await run([
2916-
'max-w-screen-oh',
2917-
'max-w-screen-4',
2918-
'max-w-screen-[4px]',
2919-
'-max-w-screen-sm',
2920-
'-max-w-screen-[4px]',
2921-
'max-w-screen-none/foo',
2922-
'max-w-screen-full/foo',
2923-
'max-w-screen-max/foo',
2924-
'max-w-screen-max/foo',
2925-
'max-w-screen-fit/foo',
2926-
'max-w-screen-4/foo',
2927-
'max-w-screen-xl/foo',
2928-
'max-w-screen-[4px]/foo',
2929-
]),
2930-
).toEqual('')
2931-
})
2932-
29332864
test('height', async () => {
29342865
expect(
29352866
await compileCss(
@@ -10357,16 +10288,6 @@ test('bg', async () => {
1035710288
// background-image
1035810289
'bg-none',
1035910290

10360-
// Legacy linear-gradient API
10361-
'bg-gradient-to-t',
10362-
'bg-gradient-to-tr',
10363-
'bg-gradient-to-r',
10364-
'bg-gradient-to-br',
10365-
'bg-gradient-to-b',
10366-
'bg-gradient-to-bl',
10367-
'bg-gradient-to-l',
10368-
'bg-gradient-to-tl',
10369-
1037010291
// Modern linear-gradient API
1037110292
'bg-linear-to-t',
1037210293
'bg-linear-to-tr',
@@ -10622,46 +10543,6 @@ test('bg', async () => {
1062210543
background-image: conic-gradient(var(--tw-gradient-stops));
1062310544
}
1062410545
10625-
.bg-gradient-to-b {
10626-
--tw-gradient-position: to bottom in oklch, ;
10627-
background-image: linear-gradient(var(--tw-gradient-stops));
10628-
}
10629-
10630-
.bg-gradient-to-bl {
10631-
--tw-gradient-position: to bottom left in oklch, ;
10632-
background-image: linear-gradient(var(--tw-gradient-stops));
10633-
}
10634-
10635-
.bg-gradient-to-br {
10636-
--tw-gradient-position: to bottom right in oklch, ;
10637-
background-image: linear-gradient(var(--tw-gradient-stops));
10638-
}
10639-
10640-
.bg-gradient-to-l {
10641-
--tw-gradient-position: to left in oklch, ;
10642-
background-image: linear-gradient(var(--tw-gradient-stops));
10643-
}
10644-
10645-
.bg-gradient-to-r {
10646-
--tw-gradient-position: to right in oklch, ;
10647-
background-image: linear-gradient(var(--tw-gradient-stops));
10648-
}
10649-
10650-
.bg-gradient-to-t {
10651-
--tw-gradient-position: to top in oklch, ;
10652-
background-image: linear-gradient(var(--tw-gradient-stops));
10653-
}
10654-
10655-
.bg-gradient-to-tl {
10656-
--tw-gradient-position: to top left in oklch, ;
10657-
background-image: linear-gradient(var(--tw-gradient-stops));
10658-
}
10659-
10660-
.bg-gradient-to-tr {
10661-
--tw-gradient-position: to top right in oklch, ;
10662-
background-image: linear-gradient(var(--tw-gradient-stops));
10663-
}
10664-
1066510546
.bg-linear-45 {
1066610547
--tw-gradient-position: 45deg in oklch, ;
1066710548
background-image: linear-gradient(var(--tw-gradient-stops));

‎playgrounds/vite/src/app.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export function App() {
22
return (
3-
<div className="m-3 p-3 border">
3+
<div className="m-3 p-3 border max-w-screen-sm">
44
<h1 className="text-blue-500">Hello World</h1>
55
<div className="-inset-x-full -inset-y-full -space-x-full -space-y-full -inset-full"></div>
66
</div>

0 commit comments

Comments
 (0)