Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(preset-mini): add grid-areas (#1848)
Co-authored-by: Chris <1633711653@qq.com>
  • Loading branch information
praburangki and zyyv committed Nov 17, 2022
1 parent 448142a commit fac166f
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 0 deletions.
7 changes: 7 additions & 0 deletions packages/preset-mini/src/_rules/grid.ts
Expand Up @@ -57,6 +57,13 @@ export const grids: Rule<Theme>[] = [
[/^grid-(rows|cols)-minmax-([\w.-]+)$/, ([, c, d]) => ({ [`grid-template-${rowCol(c)}`]: `repeat(auto-fill,minmax(${d},1fr))` })],
[/^grid-(rows|cols)-(\d+)$/, ([, c, d]) => ({ [`grid-template-${rowCol(c)}`]: `repeat(${d},minmax(0,1fr))` }), { autocomplete: ['grid-(rows|cols)-<num>', 'grid-(rows|cols)-none'] }],

// areas
[/^grid-area(s)?-(.+)$/, ([, s, v]) => {
if (s != null)
return { 'grid-template-areas': h.cssvar(v) ?? v.split('-').map(s => `"${h.bracket(s)}"`).join(' ') }
return { 'grid-area': h.bracket.cssvar(v) }
}],

// template none
['grid-rows-none', { 'grid-template-rows': 'none' }],
['grid-cols-none', { 'grid-template-columns': 'none' }],
Expand Down
5 changes: 5 additions & 0 deletions test/__snapshots__/preset-mini.test.ts.snap
Expand Up @@ -579,6 +579,11 @@ unocss .scope-\\\\[unocss\\\\]\\\\:block{display:block;}
.grid-rows-minmax-100px{grid-template-rows:repeat(auto-fill,minmax(100px,1fr));}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr));}
.grid-area-\\\\[content\\\\]{grid-area:content;}
.grid-area-\\\\$variable{grid-area:var(--variable);}
.grid-areas-\\\\[prepend_content_append\\\\]{grid-template-areas:\\"prepend content append\\";}
.grid-areas-\\\\[prepend_content_append\\\\]-\\\\[prepend_content_append\\\\]{grid-template-areas:\\"prepend content append\\" \\"prepend content append\\";}
.grid-areas-\\\\$variable{grid-template-areas:var(--variable);}
.gap-\\\\$variable{grid-gap:var(--variable);gap:var(--variable);}
.gap-4{grid-gap:1rem;gap:1rem;}
.gap-inherit{grid-gap:inherit;gap:inherit;}
Expand Down
5 changes: 5 additions & 0 deletions test/assets/preset-mini-targets.ts
Expand Up @@ -315,6 +315,11 @@ export const presetMiniTargets: string[] = [
'grid-rows-minmax-100px',
'grid-flow-dense',
'grid-flow-col-dense',
'grid-area-[content]',
'grid-area-$variable',
'grid-areas-[prepend_content_append]',
'grid-areas-[prepend_content_append]-[prepend_content_append]',
'grid-areas-$variable',

// layout
'of-y-visible',
Expand Down

0 comments on commit fac166f

Please sign in to comment.