feat(preset-wind): add padding for container rule (#2014)

unocss · Dec 21, 2022 · e21c581 · e21c581
1 parent dad2e0f
commit e21c581
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 15 deletions.
diff --git a/packages/preset-mini/src/_theme/types.ts b/packages/preset-mini/src/_theme/types.ts
@@ -67,6 +67,7 @@ export interface Theme {
   // container
   container?: {
     center?: boolean
+    padding?: string | Record<string, string>
   }
   // vars
   /** Used to generate CSS variables placeholder in preflight */

diff --git a/packages/preset-wind/src/rules/container.ts b/packages/preset-wind/src/rules/container.ts
@@ -1,4 +1,4 @@
-import type { Rule, Shortcut, VariantHandlerContext } from '@unocss/core'
+import type { CSSObject, Rule, Shortcut, VariantHandlerContext } from '@unocss/core'
 import type { Theme } from '@unocss/preset-mini'
 import { resolveBreakpoints } from '@unocss/preset-mini/utils'
 
@@ -7,24 +7,50 @@ const queryMatcher = /@media \(min-width: (.+)\)/
 export const container: Rule<Theme>[] = [
   [
     /^__container$/,
-    (m, { theme, variantHandlers }) => {
+    (m, context) => {
+      const { theme, variantHandlers } = context
+
       let width = '100%'
+
+      const themePadding = theme.container?.padding
+      let padding: string | undefined
+
+      if (typeof themePadding === 'string')
+        padding = themePadding
+      else
+        padding = themePadding?.DEFAULT
+
       for (const v of variantHandlers) {
         const query = v.handle?.({} as VariantHandlerContext, x => x)?.parent
         if (typeof query === 'string') {
           const match = query.match(queryMatcher)?.[1]
-          if (match)
+          if (match) {
             width = match
+
+            const bp = resolveBreakpoints(context) ?? {}
+            const matchBp = Object.keys(bp).find(key => bp[key] === match)
+
+            if (matchBp && typeof themePadding !== 'string')
+              padding = themePadding?.[matchBp] ?? padding
+          }
         }
       }
+
+      const css: CSSObject = {
+        'max-width': width,
+      }
+
       if (theme.container?.center) {
-        return {
-          'max-width': width,
-          'margin-left': 'auto',
-          'margin-right': 'auto',
-        }
+        css['margin-left'] = 'auto'
+        css['margin-right'] = 'auto'
       }
-      return { 'max-width': width }
+
+      if (themePadding) {
+        css['padding-left'] = padding
+        css['padding-right'] = padding
+      }
+
+      return css
     },
     { internal: true },
   ],

diff --git a/test/__snapshots__/preset-wind.test.ts.snap b/test/__snapshots__/preset-wind.test.ts.snap
@@ -29,28 +29,28 @@ exports[`preset-wind > centered containers 1`] = `
 
 exports[`preset-wind > containers 1`] = `
 "/* layer: shortcuts */
-.container{max-width:100%;}
+.container{max-width:100%;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem;}
 @media (min-width: 640px){
-.container{max-width:640px;}
+.container{max-width:640px;margin-left:auto;margin-right:auto;padding-left:2rem;padding-right:2rem;}
 }
 @media (min-width: 768px){
 .container,
-.md\\\\:container{max-width:768px;}
+.md\\\\:container{max-width:768px;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem;}
 }
 @media (min-width: 1024px){
 .container,
 .lg\\\\:container,
-.md\\\\:container{max-width:1024px;}
+.md\\\\:container{max-width:1024px;margin-left:auto;margin-right:auto;padding-left:4rem;padding-right:4rem;}
 }
 @media (min-width: 1280px){
 .container,
 .lg\\\\:container,
-.md\\\\:container{max-width:1280px;}
+.md\\\\:container{max-width:1280px;margin-left:auto;margin-right:auto;padding-left:5rem;padding-right:5rem;}
 }
 @media (min-width: 1536px){
 .container,
 .lg\\\\:container,
-.md\\\\:container{max-width:1536px;}
+.md\\\\:container{max-width:1536px;margin-left:auto;margin-right:auto;padding-left:6rem;padding-right:6rem;}
 }"
 `;
 

diff --git a/test/preset-wind.test.ts b/test/preset-wind.test.ts
@@ -19,6 +19,16 @@ const uno = createGenerator({
     data: {
       dropdown: 'data-bs-toggle="dropdown"',
     },
+    container: {
+      center: true,
+      padding: {
+        'DEFAULT': '1rem',
+        'sm': '2rem',
+        'lg': '4rem',
+        'xl': '5rem',
+        '2xl': '6rem',
+      },
+    },
   },
 })