Don't create rule that would repeated built-in rule

Author: philipp-spiess

integrations/upgrade/js-config.test.ts

@@ -1436,7 +1436,7 @@ describe('border compatibility', () => {
     },
   )
 
-  test.only(
+  test(
     'migrates `container` component configurations',
     {
       fs: {
@@ -1491,23 +1491,21 @@ describe('border compatibility', () => {
         @utility container {
           margin-inline: auto;
           padding-inline: 2rem;
-          @media (width >= theme(--breakpoint-2xl)) {
-            padding-inline: 4rem;
-          }
           @media (width >= theme(--breakpoint-sm)) {
-            padding-inline: none;
+            max-width: none;
           }
           @media (width >= theme(--breakpoint-md)) {
-            padding-inline: none;
+            max-width: none;
           }
           @media (width >= theme(--breakpoint-lg)) {
-            padding-inline: none;
+            max-width: none;
           }
           @media (width >= theme(--breakpoint-xl)) {
-            padding-inline: 1280px;
+            max-width: 1280px;
           }
           @media (width >= theme(--breakpoint-2xl)) {
-            padding-inline: 1536px;
+            max-width: 1536px;
+            padding-inline: 4rem;
           }
         }
 

packages/tailwindcss/src/compat/container-config.test.ts

@@ -200,10 +200,10 @@ test('allows breakpoints to be overwritten', async () => {
         max-width: none;
       }
       @media (width >= 80rem) {
-        max-width: 1280px;
+        max-width: var(--breakpoint-xl);
       }
       @media (width >= 96rem) {
-        max-width: 1536px;
+        max-width: var(--breakpoint-2xl);
       }
     }
     "
@@ -294,6 +294,7 @@ test('combines custom padding and screen overwrites', async () => {
               '2xl': '4rem',
             },
             screens: {
+              md: '48rem',
               xl: '1280px',
               '2xl': '1536px',
             },
@@ -336,17 +337,14 @@ test('combines custom padding and screen overwrites', async () => {
       @media (width >= 40rem) {
         max-width: none;
       }
-      @media (width >= 48rem) {
-        max-width: none;
-      }
       @media (width >= 64rem) {
         max-width: none;
       }
       @media (width >= 80rem) {
-        max-width: 1280px;
+        max-width: var(--breakpoint-xl);
       }
       @media (width >= 96rem) {
-        max-width: 1536px;
+        max-width: var(--breakpoint-2xl);
         padding-inline: 4rem;
       }
     }

packages/tailwindcss/src/compat/container.ts

@@ -58,7 +58,11 @@ export function buildCustomContainerUtilityRules(
     }
 
     for (let [key, value] of Object.entries(screens)) {
-      breakpointOverwrites.set(key, [decl('max-width', value)])
+      let coreBreakpoint = breakpoints.find(([k]) => k === key)
+      if (coreBreakpoint && value === coreBreakpoint[1]) {
+        continue
+      }
+      breakpointOverwrites.set(key, [decl('max-width', `var(--breakpoint-${key})`)])
     }
   }