feat(preset-mini): add grid-areas (#1848)

Co-authored-by: Chris <1633711653@qq.com>
unocss · Nov 17, 2022 · fac166f · fac166f
1 parent 448142a
commit fac166f
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 0 deletions.
diff --git a/packages/preset-mini/src/_rules/grid.ts b/packages/preset-mini/src/_rules/grid.ts
@@ -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' }],

diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap
@@ -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;}

diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
@@ -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',