Skip to content

Add codemod and interop for legacy container component configu #14999

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.

Sign up for GitHub

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

Merged
adamwathan merged 12 commits into from
Nov 14, 2024
Merged

Add codemod and interop for legacy container component configu #14999

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
170c3e8
Add compatibility for legacy `container` component config
philipp-spiess Nov 14, 2024
9331fb2
Add codemod
philipp-spiess Nov 14, 2024
32de423
Combine media rules and use modern syntax for the `container` utility
philipp-spiess Nov 14, 2024
124d543
Don't create rule that would repeated built-in rule
philipp-spiess Nov 14, 2024
1df77b5
Fix issue where `!container` would cause `container` to have `!import…
philipp-spiess Nov 14, 2024
449f9be
Make sure configured paddings prefer the custom screen scale
philipp-spiess Nov 14, 2024
2598bd5
Dont emit empty rules
philipp-spiess Nov 14, 2024
5cf7484
Make sure to remember that a small breakpoint does not unset all larg…
philipp-spiess Nov 14, 2024
b1006b1
Simplify implementation
philipp-spiess Nov 14, 2024
4060fa2
Filter out complex values
philipp-spiess Nov 14, 2024
2d1a432
Simplify `breakpointOverwrites` map
philipp-spiess Nov 14, 2024
5fa7f67
Add change log
philipp-spiess Nov 14, 2024
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
Prev Previous commit
Next Next commit
Make sure to remember that a small breakpoint does not unset all larg… 
…er ones
  • Loading branch information
@philipp-spiess
philipp-spiess committed Nov 14, 2024
commit 5cf748490e8cb72fa43358be4c3997fa526a48c7
10 changes: 3 additions & 7 deletions integrations/upgrade/js-config.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1495,16 +1495,12 @@ describe('border compatibility', () => {
@media (width >= theme(--breakpoint-sm)) {
max-width: none;
}
@media (width >= theme(--breakpoint-lg)) {
max-width: none;
@media (width >= theme(--breakpoint-md)) {
max-width: var(--breakpoint-md);
}
@media (width >= theme(--breakpoint-xl)) {
max-width: none;
}
@media (width >= theme(--breakpoint-2xl)) {
@media (width >= theme(--breakpoint-lg)) {
max-width: none;
}
@media (width >= 48rem);
@media (width >= 1280px) {
max-width: 1280px;
}
Expand Down
51 changes: 9 additions & 42 deletions packages/tailwindcss/src/compat/container-config.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,18 +193,6 @@ test('allows breakpoints to be overwritten', async () => {
@media (width >= 40rem) {
max-width: none;
}
@media (width >= 48rem) {
max-width: none;
}
@media (width >= 64rem) {
max-width: none;
}
@media (width >= 80rem) {
max-width: none;
}
@media (width >= 96rem) {
max-width: none;
}
@media (width >= 1280px) {
max-width: 1280px;
}
Expand Down Expand Up @@ -278,13 +266,10 @@ test('padding applies to custom `container` screens', async () => {
@media (width >= 40rem) {
max-width: none;
}
@media (width >= 64rem) {
max-width: none;
}
@media (width >= 80rem) {
max-width: none;
@media (width >= 48rem) {
max-width: var(--breakpoint-md);
}
@media (width >= 96rem) {
@media (width >= 64rem) {
max-width: none;
}
@media (width >= 48rem) {
Expand Down Expand Up @@ -357,18 +342,6 @@ test("an empty `screen` config will undo all custom media screens and won't appl
@media (width >= 40rem) {
max-width: none;
}
@media (width >= 48rem) {
max-width: none;
}
@media (width >= 64rem) {
max-width: none;
}
@media (width >= 80rem) {
max-width: none;
}
@media (width >= 96rem) {
max-width: none;
}
}
"
`)
Expand Down Expand Up @@ -519,13 +492,10 @@ test('combines custom padding and screen overwrites', async () => {
@media (width >= 40rem) {
max-width: none !important;
}
@media (width >= 64rem) {
max-width: none !important;
}
@media (width >= 80rem) {
max-width: none !important;
@media (width >= 48rem) {
max-width: var(--breakpoint-md) !important;
}
@media (width >= 96rem) {
@media (width >= 64rem) {
max-width: none !important;
}
@media (width >= 1280px) {
Expand All @@ -542,13 +512,10 @@ test('combines custom padding and screen overwrites', async () => {
@media (width >= 40rem) {
max-width: none;
}
@media (width >= 64rem) {
max-width: none;
}
@media (width >= 80rem) {
max-width: none;
@media (width >= 48rem) {
max-width: var(--breakpoint-md);
}
@media (width >= 96rem) {
@media (width >= 64rem) {
max-width: none;
}
@media (width >= 1280px) {
Expand Down
24 changes: 18 additions & 6 deletions packages/tailwindcss/src/compat/container.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,24 +57,36 @@ export function buildCustomContainerUtilityRules(
let breakpoints = Array.from(designSystem.theme.namespace('--breakpoint').entries())
breakpoints.sort((a, z) => compareBreakpoints(a[1], z[1], 'asc'))

let didUnsetPreviousRange = false
for (let [key, value] of breakpoints) {
// If we happen to find a `--breakpoint-*` variable with the same key and
// value, it will already be part of the core utility and we can skip it.
if (!key) continue

if (key in screens && (screens as Record<string, string>)[key] === value) {
if (didUnsetPreviousRange) {
rules.push(
atRule('@media', `(width >= theme(--breakpoint-${key}))`, [
decl('max-width', `var(--breakpoint-${key})`),
]),
)
didUnsetPreviousRange = false
}

breakpointOverwrites.set(key, {
rule: `(width >= ${value})`,
nodes: [],
})
continue
}

// We do not want to collect this core breakpoint in the `breakpointOverwrites`
// map, since it will not be relevant for subsequent
rules.push(
atRule('@media', `(width >= theme(--breakpoint-${key}))`, [decl('max-width', 'none')]),
)
if (!didUnsetPreviousRange) {
// We do not want to collect this core breakpoint in the `breakpointOverwrites`
// map, since it will not be relevant for subsequent
rules.push(
atRule('@media', `(width >= theme(--breakpoint-${key}))`, [decl('max-width', 'none')]),
)
didUnsetPreviousRange = true
}
}

for (let [key, value] of Object.entries(screens)) {
Expand Down