From 253f274d6a56b7664c143233ab4c985f9e99789f Mon Sep 17 00:00:00 2001
From: praburangki <praburangki@gmail.com>
Date: Sun, 6 Nov 2022 10:00:18 +0800
Subject: [PATCH 1/4] feat(preset-mini): add grid-areas

---
 packages/preset-mini/src/_rules/grid.ts     | 4 ++++
 test/__snapshots__/preset-mini.test.ts.snap | 2 ++
 test/assets/preset-mini-targets.ts          | 2 ++
 3 files changed, 8 insertions(+)

diff --git a/packages/preset-mini/src/_rules/grid.ts b/packages/preset-mini/src/_rules/grid.ts
index ac99223e28..d3ff9e276c 100644
--- a/packages/preset-mini/src/_rules/grid.ts
+++ b/packages/preset-mini/src/_rules/grid.ts
@@ -57,6 +57,10 @@ 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-areas-(.+)$/, ([, v]) => ({ 'grid-template-areas': `"${h.bracket.cssvar(v)}"` })],
+  [/^grid-area-(.+)$/, ([, v]) => ({ '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 22a8c65e08..03f3547b8e 100644
--- a/test/__snapshots__/preset-mini.test.ts.snap
+++ b/test/__snapshots__/preset-mini.test.ts.snap
@@ -579,6 +579,8 @@ 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-areas-\\\\[prepend_content_append\\\\]{grid-template-areas:\\"prepend content append\\";}
+.grid-area-\\\\[content\\\\]{grid-area:content;}
 .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 5b9eeb4725..611db2d688 100644
--- a/test/assets/preset-mini-targets.ts
+++ b/test/assets/preset-mini-targets.ts
@@ -315,6 +315,8 @@ export const presetMiniTargets: string[] = [
   'grid-rows-minmax-100px',
   'grid-flow-dense',
   'grid-flow-col-dense',
+  'grid-areas-[prepend_content_append]',
+  'grid-area-[content]',
 
   // layout
   'of-y-visible',

From 69f3cb1dd761357db711ab356eb659ea5386303e Mon Sep 17 00:00:00 2001
From: Chris <1633711653@qq.com>
Date: Mon, 7 Nov 2022 10:25:57 +0800
Subject: [PATCH 2/4] chore: update

---
 packages/preset-mini/src/_rules/grid.ts     | 7 +++++--
 test/__snapshots__/preset-mini.test.ts.snap | 3 ++-
 test/assets/preset-mini-targets.ts          | 3 ++-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/preset-mini/src/_rules/grid.ts b/packages/preset-mini/src/_rules/grid.ts
index d3ff9e276c..9be06a881c 100644
--- a/packages/preset-mini/src/_rules/grid.ts
+++ b/packages/preset-mini/src/_rules/grid.ts
@@ -58,8 +58,11 @@ export const grids: Rule<Theme>[] = [
   [/^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-areas-(.+)$/, ([, v]) => ({ 'grid-template-areas': `"${h.bracket.cssvar(v)}"` })],
-  [/^grid-area-(.+)$/, ([, v]) => ({ 'grid-area': h.bracket.cssvar(v) })],
+  [/^grid-area(s)?-(.+)$/, ([, s, v]) => {
+    if (s != null)
+      return { 'grid-template-areas': v.split('-').map(s => `"${h.bracket.cssvar(s)}"`).join(' ') }
+    return { 'grid-area': h.bracket.cssvar(v) }
+  }],
 
   // template none
   ['grid-rows-none', { 'grid-template-rows': 'none' }],
diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap
index 03f3547b8e..045576abf3 100644
--- a/test/__snapshots__/preset-mini.test.ts.snap
+++ b/test/__snapshots__/preset-mini.test.ts.snap
@@ -579,8 +579,9 @@ 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-areas-\\\\[prepend_content_append\\\\]{grid-template-areas:\\"prepend content append\\";}
 .grid-area-\\\\[content\\\\]{grid-area:content;}
+.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\\";}
 .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 611db2d688..51e2181908 100644
--- a/test/assets/preset-mini-targets.ts
+++ b/test/assets/preset-mini-targets.ts
@@ -315,8 +315,9 @@ export const presetMiniTargets: string[] = [
   'grid-rows-minmax-100px',
   'grid-flow-dense',
   'grid-flow-col-dense',
-  'grid-areas-[prepend_content_append]',
   'grid-area-[content]',
+  'grid-areas-[prepend_content_append]',
+  'grid-areas-[prepend_content_append]-[prepend_content_append]',
 
   // layout
   'of-y-visible',

From 645bb3941d68d51cfc6ca6113d22f86149965783 Mon Sep 17 00:00:00 2001
From: Chris <1633711653@qq.com>
Date: Mon, 7 Nov 2022 10:45:36 +0800
Subject: [PATCH 3/4] chore: update

---
 packages/preset-mini/src/_rules/grid.ts     | 2 +-
 test/__snapshots__/preset-mini.test.ts.snap | 2 ++
 test/assets/preset-mini-targets.ts          | 2 ++
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/preset-mini/src/_rules/grid.ts b/packages/preset-mini/src/_rules/grid.ts
index 9be06a881c..d7e453707f 100644
--- a/packages/preset-mini/src/_rules/grid.ts
+++ b/packages/preset-mini/src/_rules/grid.ts
@@ -60,7 +60,7 @@ export const grids: Rule<Theme>[] = [
   // areas
   [/^grid-area(s)?-(.+)$/, ([, s, v]) => {
     if (s != null)
-      return { 'grid-template-areas': v.split('-').map(s => `"${h.bracket.cssvar(s)}"`).join(' ') }
+      return { 'grid-template-areas': v.startsWith('$') ? h.cssvar(v) : v.split('-').map(s => `"${h.bracket(s)}"`).join(' ') }
     return { 'grid-area': h.bracket.cssvar(v) }
   }],
 
diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap
index 045576abf3..a00974c1d0 100644
--- a/test/__snapshots__/preset-mini.test.ts.snap
+++ b/test/__snapshots__/preset-mini.test.ts.snap
@@ -580,8 +580,10 @@ unocss .scope-\\\\[unocss\\\\]\\\\:block{display:block;}
 .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 51e2181908..9776a1cd33 100644
--- a/test/assets/preset-mini-targets.ts
+++ b/test/assets/preset-mini-targets.ts
@@ -316,8 +316,10 @@ export const presetMiniTargets: string[] = [
   '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',

From dc6977b051ad1ea814f56a576b700974778cf370 Mon Sep 17 00:00:00 2001
From: Chris <1633711653@qq.com>
Date: Mon, 7 Nov 2022 11:38:25 +0800
Subject: [PATCH 4/4] chore: update

---
 packages/preset-mini/src/_rules/grid.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/preset-mini/src/_rules/grid.ts b/packages/preset-mini/src/_rules/grid.ts
index d7e453707f..193b500150 100644
--- a/packages/preset-mini/src/_rules/grid.ts
+++ b/packages/preset-mini/src/_rules/grid.ts
@@ -60,7 +60,7 @@ export const grids: Rule<Theme>[] = [
   // areas
   [/^grid-area(s)?-(.+)$/, ([, s, v]) => {
     if (s != null)
-      return { 'grid-template-areas': v.startsWith('$') ? h.cssvar(v) : v.split('-').map(s => `"${h.bracket(s)}"`).join(' ') }
+      return { 'grid-template-areas': h.cssvar(v) ?? v.split('-').map(s => `"${h.bracket(s)}"`).join(' ') }
     return { 'grid-area': h.bracket.cssvar(v) }
   }],