From fac166fe16cde894cf641a3d1cec271d0d0cc0fe Mon Sep 17 00:00:00 2001
From: praburangki <praburangki@gmail.com>
Date: Fri, 18 Nov 2022 03:45:05 +0800
Subject: [PATCH] feat(preset-mini): add grid-areas (#1848)

Co-authored-by: Chris <1633711653@qq.com>
---
 packages/preset-mini/src/_rules/grid.ts     | 7 +++++++
 test/__snapshots__/preset-mini.test.ts.snap | 5 +++++
 test/assets/preset-mini-targets.ts          | 5 +++++
 3 files changed, 17 insertions(+)

diff --git a/packages/preset-mini/src/_rules/grid.ts b/packages/preset-mini/src/_rules/grid.ts
index ac99223e28..193b500150 100644
--- 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
index 3f042734d5..6b22715909 100644
--- 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
index ac015a8c80..725e3629fc 100644
--- 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',