Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(preset-wind): add padding for container rule (#2014)
  • Loading branch information
praburangki committed Dec 21, 2022
1 parent dad2e0f commit e21c581
Show file tree
Hide file tree
Showing 4 changed files with 52 additions and 15 deletions.
1 change: 1 addition & 0 deletions packages/preset-mini/src/_theme/types.ts
Expand Up @@ -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 */
Expand Down
44 changes: 35 additions & 9 deletions 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'

Expand All @@ -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 },
],
Expand Down
12 changes: 6 additions & 6 deletions test/__snapshots__/preset-wind.test.ts.snap
Expand Up @@ -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;}
}"
`;

Expand Down
10 changes: 10 additions & 0 deletions test/preset-wind.test.ts
Expand Up @@ -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',
},
},
},
})

Expand Down

0 comments on commit e21c581

Please sign in to comment.