feat(preset-wind): add support for max-width in container (#2142)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

packages/preset-mini/src/_theme/types.ts

@@ -68,6 +68,7 @@ export interface Theme {
   container?: {
     center?: boolean
     padding?: string | Record<string, string>
+    maxWidth?: Record<string, string>
   }
   // vars
   /** Used to generate CSS variables placeholder in preflight */

packages/preset-wind/src/rules/container.ts

@@ -1,4 +1,5 @@
 import type { CSSObject, Rule, Shortcut, VariantHandlerContext } from '@unocss/core'
+import { isString } from '@unocss/core'
 import type { Theme } from '@unocss/preset-mini'
 import { resolveBreakpoints } from '@unocss/preset-mini/utils'
 
@@ -10,36 +11,44 @@ export const container: Rule<Theme>[] = [
     (m, context) => {
       const { theme, variantHandlers } = context
 
-      let width = '100%'
-
       const themePadding = theme.container?.padding
       let padding: string | undefined
 
-      if (typeof themePadding === 'string')
+      if (isString(themePadding))
         padding = themePadding
       else
         padding = themePadding?.DEFAULT
 
+      const themeMaxWidth = theme.container?.maxWidth
+      let maxWidth: string | undefined
+
       for (const v of variantHandlers) {
         const query = v.handle?.({} as VariantHandlerContext, x => x)?.parent
-        if (typeof query === 'string') {
+        if (isString(query)) {
           const match = query.match(queryMatcher)?.[1]
           if (match) {
-            width = match
-
             const bp = resolveBreakpoints(context) ?? {}
             const matchBp = Object.keys(bp).find(key => bp[key] === match)
 
-            if (matchBp && typeof themePadding !== 'string')
+            if (!themeMaxWidth)
+              maxWidth = match
+            else if (matchBp)
+              maxWidth = themeMaxWidth?.[matchBp]
+
+            if (matchBp && !isString(themePadding))
               padding = themePadding?.[matchBp] ?? padding
           }
         }
       }
 
       const css: CSSObject = {
-        'max-width': width,
+        'max-width': maxWidth,
       }
 
+      // only apply width: 100% when no variant handler is present
+      if (!variantHandlers.length)
+        css.width = '100%'
+
       if (theme.container?.center) {
         css['margin-left'] = 'auto'
         css['margin-right'] = 'auto'

test/__snapshots__/prefix.test.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`prefix > multiple preset prefix 1`] = `
 "/* layer: default */
-.h-container{max-width:100%;}
+.h-container{width:100%;}
 .hover\\\\:h-p4:hover{padding:1rem;}
 .h-text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
 .bar,
@@ -32,7 +32,7 @@ exports[`prefix > multiple preset prefix 1`] = `
 .\\\\32 xl\\\\:h-container{max-width:1280px;}
 }}
 @media (min-width: 1536px){
-.\\\\32 xl\\\\:h-container{max-width:100%;}
+.\\\\32 xl\\\\:h-container{width:100%;}
 .h-container{max-width:1536px;}
 }
 @media (min-width: 1536px){@media (min-width: 1536px){
@@ -48,7 +48,7 @@ exports[`prefix > multiple preset prefix 1`] = `
 
 exports[`prefix > preset prefix 1`] = `
 "/* layer: default */
-.h-container{max-width:100%;}
+.h-container{width:100%;}
 .dark .dark\\\\:children\\\\:hover\\\\:h-space-x-4:hover>*>:not([hidden])~:not([hidden]),
 .dark .dark\\\\:hover\\\\:children\\\\:h-space-x-4>*:hover>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(1rem * calc(1 - var(--un-space-x-reverse)));margin-right:calc(1rem * var(--un-space-x-reverse));}
 .dark .dark\\\\:hover\\\\:children\\\\:h-divide-x>*:hover>:not([hidden])~:not([hidden]){--un-divide-x-reverse:0;border-left-width:calc(1px * calc(1 - var(--un-divide-x-reverse)));border-right-width:calc(1px * var(--un-divide-x-reverse));border-left-style:solid;border-right-style:solid;}
@@ -75,7 +75,7 @@ exports[`prefix > preset prefix 1`] = `
 .\\\\32 xl\\\\:h-container{max-width:1280px;}
 }}
 @media (min-width: 1536px){
-.\\\\32 xl\\\\:h-container{max-width:100%;}
+.\\\\32 xl\\\\:h-container{width:100%;}
 .h-container{max-width:1536px;}
 }
 @media (min-width: 1536px){@media (min-width: 1536px){

test/__snapshots__/preset-wind.test.ts.snap

@@ -9,7 +9,7 @@ exports[`empty prefix 1`] = `
 
 exports[`preset-wind > centered containers 1`] = `
 "/* layer: shortcuts */
-.container{max-width:100%;margin-left:auto;margin-right:auto;}
+.container{width:100%;margin-left:auto;margin-right:auto;}
 @media (min-width: 640px){
 .container{max-width:640px;margin-left:auto;margin-right:auto;}
 }
@@ -36,7 +36,7 @@ exports[`preset-wind > centered containers 1`] = `
 
 exports[`preset-wind > containers 1`] = `
 "/* layer: shortcuts */
-.container{max-width:100%;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem;}
+.container{width:100%;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem;}
 @media (min-width: 640px){
 .container{max-width:640px;margin-left:auto;margin-right:auto;padding-left:2rem;padding-right:2rem;}
 }
@@ -61,6 +61,28 @@ exports[`preset-wind > containers 1`] = `
 }"
 `;
 
+exports[`preset-wind > containers with max width 1`] = `
+"/* layer: shortcuts */
+.container{width:100%;}
+@media (min-width: 640px){
+.container{max-width:540px;}
+}
+@media (min-width: 768px){
+.container,
+.md\\\\:container{max-width:720px;}
+}
+@media (min-width: 1024px){
+.container,
+.lg\\\\:container,
+.md\\\\:container{max-width:960px;}
+}
+@media (min-width: 1280px){
+.container,
+.lg\\\\:container,
+.md\\\\:container{max-width:1140px;}
+}"
+`;
+
 exports[`preset-wind > custom var prefix 1`] = `
 "/* layer: default */
 .scale-100{--hi-scale-x:1;--hi-scale-y:1;transform:translateX(var(--hi-translate-x)) translateY(var(--hi-translate-y)) translateZ(var(--hi-translate-z)) rotate(var(--hi-rotate)) rotateX(var(--hi-rotate-x)) rotateY(var(--hi-rotate-y)) rotateZ(var(--hi-rotate-z)) skewX(var(--hi-skew-x)) skewY(var(--hi-skew-y)) scaleX(var(--hi-scale-x)) scaleY(var(--hi-scale-y)) scaleZ(var(--hi-scale-z));}

test/preset-wind.test.ts

@@ -93,6 +93,36 @@ describe('preset-wind', () => {
     expect(css).toMatchSnapshot()
   })
 
+  test('containers with max width', async () => {
+    const uno = createGenerator({
+      presets: [
+        presetWind(),
+      ],
+      theme: {
+        container: {
+          maxWidth: {
+            sm: '540px',
+            md: '720px',
+            lg: '960px',
+            xl: '1140px',
+            xxl: '1320px',
+          },
+        },
+      },
+    })
+
+    const targets = [
+      'container',
+      'md:container',
+      'lg:container',
+    ]
+
+    const { css, matched } = await uno.generate(new Set(targets), { preflights: false })
+
+    expect(matched).toEqual(new Set(targets))
+    expect(css).toMatchSnapshot()
+  })
+
   test('custom var prefix', async () => {
     const uno = createGenerator({
       presets: [