wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Bring back max-w-screen-* utilities (#15013)

Browse source 
This PR brings back the `max-w-screen-*` utilities from v3 that read
from the `--breakpoint` namespace.

Since these utilities are only added back for compatibility reasons,
it's put into the compatibility layer.

Note that this does not do Intellisense recommendations for the
functional utility.

## Test Plan

Unit tests are upgraded including some from the compat test that extends
the `--breakpoint` namespace from `screen` keys. Also tested this in the
Vite playground.

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
This commit is contained in:
Philipp Spiess 2024-11-16 21:10:54 +01:00 • committed by GitHub
parent b0a539aab0
commit 5a974cd318
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 172 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

4
CHANGELOG.md
View file

@ -16,6 +16,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Bring back support for color opacity modifiers to read from `--opacity-*` theme values ([#14278](https://github.com/tailwindlabs/tailwindcss/pull/14278))
### Added
- Reintroduce `max-w-screen-*` utilities that read from the `--breakpoint` namespace as deprecated utilities ([#15013](https://github.com/tailwindlabs/tailwindcss/pull/15013))
## [4.0.0-alpha.34] - 2024-11-14
### Added

8
packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
View file

@ -1957,14 +1957,6 @@ exports[`getClassList 1`] = `
"bg-current/95",
"bg-current/100",
"bg-fixed",
"bg-gradient-to-b",
"bg-gradient-to-bl",
"bg-gradient-to-br",
"bg-gradient-to-l",
"bg-gradient-to-r",
"bg-gradient-to-t",
"bg-gradient-to-tl",
"bg-gradient-to-tr",
"bg-inherit",
"bg-inherit/0",
"bg-inherit/5",

3
packages/tailwindcss/src/compat/apply-compat-hooks.ts
View file

@ -8,6 +8,7 @@ import { resolveConfig } from './config/resolve-config'
import type { UserConfig } from './config/types'
import { registerContainerCompat } from './container'
import { darkModePlugin } from './dark-mode'
import { registerLegacyUtilities } from './legacy-utilities'
import { buildPluginApi, type CssPluginOptions, type Plugin } from './plugin-api'
import { registerScreensConfig } from './screens-config'
import { registerThemeVariantOverrides } from './theme-variants'
@ -116,6 +117,8 @@ export async function applyCompatibilityHooks({
}
})
registerLegacyUtilities(designSystem)
// Override `resolveThemeValue` with a version that is backwards compatible
// with dot notation paths like `colors.red.500`. We could do this by default
// in `resolveThemeValue` but handling it here keeps all backwards

133
packages/tailwindcss/src/compat/legacy-utilities.test.ts Normal file
View file

@ -0,0 +1,133 @@
import { expect, test } from 'vitest'
import { compileCss, run } from '../test-utils/run'
const css = String.raw
test('bg-gradient-*', async () => {
expect(
await compileCss(
css`
@tailwind utilities;
`,
[
'bg-gradient-to-t',
'bg-gradient-to-tr',
'bg-gradient-to-r',
'bg-gradient-to-br',
'bg-gradient-to-b',
'bg-gradient-to-bl',
'bg-gradient-to-l',
'bg-gradient-to-tl',
],
),
).toMatchInlineSnapshot(`
".bg-gradient-to-b {
--tw-gradient-position: to bottom in oklch, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-bl {
--tw-gradient-position: to bottom left in oklch, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-br {
--tw-gradient-position: to bottom right in oklch, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-l {
--tw-gradient-position: to left in oklch, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-r {
--tw-gradient-position: to right in oklch, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-t {
--tw-gradient-position: to top in oklch, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-tl {
--tw-gradient-position: to top left in oklch, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-tr {
--tw-gradient-position: to top right in oklch, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}"
`)
})
test('max-w-screen', async () => {
expect(
await compileCss(
css`
@theme {
--breakpoint-sm: 40rem;
--breakpoint-md: 48rem;
--breakpoint-lg: 64rem;
--breakpoint-xl: 80rem;
--breakpoint-2xl: 96rem;
}
@tailwind utilities;
`,
[
'max-w-screen-sm',
'max-w-screen-md',
'max-w-screen-lg',
'max-w-screen-xl',
'max-w-screen-2xl',
],
),
).toMatchInlineSnapshot(`
":root {
--breakpoint-sm: 40rem;
--breakpoint-md: 48rem;
--breakpoint-lg: 64rem;
--breakpoint-xl: 80rem;
--breakpoint-2xl: 96rem;
}
.max-w-screen-2xl {
max-width: var(--breakpoint-2xl);
}
.max-w-screen-lg {
max-width: var(--breakpoint-lg);
}
.max-w-screen-md {
max-width: var(--breakpoint-md);
}
.max-w-screen-sm {
max-width: var(--breakpoint-sm);
}
.max-w-screen-xl {
max-width: var(--breakpoint-xl);
}"
`)
expect(
await run([
'max-w-screen-oh',
'max-w-screen-4',
'max-w-screen-[4px]',
'-max-w-screen-sm',
'-max-w-screen-[4px]',
'max-w-screen-none/foo',
'max-w-screen-full/foo',
'max-w-screen-max/foo',
'max-w-screen-max/foo',
'max-w-screen-fit/foo',
'max-w-screen-4/foo',
'max-w-screen-xl/foo',
'max-w-screen-[4px]/foo',
]),
).toEqual('')
})

28
packages/tailwindcss/src/compat/legacy-utilities.ts Normal file
View file

@ -0,0 +1,28 @@
import { decl } from '../ast'
import type { DesignSystem } from '../design-system'
export function registerLegacyUtilities(designSystem: DesignSystem) {
for (let [value, direction] of [
['t', 'top'],
['tr', 'top right'],
['r', 'right'],
['br', 'bottom right'],
['b', 'bottom'],
['bl', 'bottom left'],
['l', 'left'],
['tl', 'top left'],
]) {
designSystem.utilities.static(`bg-gradient-to-${value}`, () => [
decl('--tw-gradient-position', `to ${direction} in oklch,`),
decl('background-image', `linear-gradient(var(--tw-gradient-stops))`),
])
}
designSystem.utilities.functional('max-w-screen', (candidate) => {
if (!candidate.value) return
if (candidate.value.kind === 'arbitrary') return
let value = designSystem.theme.resolve(candidate.value.value, ['--breakpoint'])
if (!value) return
return [decl('max-width', value)]
})
}

4
packages/tailwindcss/src/compat/screens-config.test.ts
View file

@ -41,6 +41,7 @@ test('CSS `--breakpoint-*` merge with JS config `screens`', async () => {
'lg:flex',
'min-sm:max-md:underline',
'min-md:max-lg:underline',
'max-w-screen-sm',
// Ensure other core variants appear at the end
'print:items-end',
]),
@ -51,6 +52,9 @@ test('CSS `--breakpoint-*` merge with JS config `screens`', async () => {
--breakpoint-xl: 80rem;
--breakpoint-2xl: 96rem;
}
.max-w-screen-sm {
max-width: 44rem;
}
.sm\\:flex {
@media (width >= 44rem) {
display: flex;

50
packages/tailwindcss/src/utilities.test.ts
View file

@ -10288,16 +10288,6 @@ test('bg', async () => {
// background-image
'bg-none',
// Legacy linear-gradient API
'bg-gradient-to-t',
'bg-gradient-to-tr',
'bg-gradient-to-r',
'bg-gradient-to-br',
'bg-gradient-to-b',
'bg-gradient-to-bl',
'bg-gradient-to-l',
'bg-gradient-to-tl',
// Modern linear-gradient API
'bg-linear-to-t',
'bg-linear-to-tr',
@ -10553,46 +10543,6 @@ test('bg', async () => {
background-image: conic-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-b {
--tw-gradient-position: to bottom in oklch, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-bl {
--tw-gradient-position: to bottom left in oklch, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-br {
--tw-gradient-position: to bottom right in oklch, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-l {
--tw-gradient-position: to left in oklch, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-r {
--tw-gradient-position: to right in oklch, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-t {
--tw-gradient-position: to top in oklch, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-tl {
--tw-gradient-position: to top left in oklch, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-tr {
--tw-gradient-position: to top right in oklch, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-linear-45 {
--tw-gradient-position: 45deg in oklch, ;
background-image: linear-gradient(var(--tw-gradient-stops));

17
packages/tailwindcss/src/utilities.ts
View file

@ -2284,23 +2284,6 @@ export function createUtilities(theme: Theme) {
staticUtility('bg-none', [['background-image', 'none']])
{
// Deprecated
for (let [value, direction] of [
['t', 'top'],
['tr', 'top right'],
['r', 'right'],
['br', 'bottom right'],
['b', 'bottom'],
['bl', 'bottom left'],
['l', 'left'],
['tl', 'top left'],
]) {
staticUtility(`bg-gradient-to-${value}`, [
['--tw-gradient-position', `to ${direction} in oklch,`],
['background-image', `linear-gradient(var(--tw-gradient-stops))`],
])
}
let suggestedModifiers = [
'oklab',
'oklch',