feat(preset-mini): allow shorter syntax for grid-cols utilities (#3533)…

… (#3542)

Co-authored-by: Chris <hizyyv@gmail.com>
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

packages/preset-mini/src/_rules/grid.ts

@@ -40,26 +40,26 @@ export const grids: Rule<Theme>[] = [
     const v = h.bracket.number(s)
     if (v != null)
       return { [`grid-${rowCol(c)}`]: `span ${v}/span ${v}` }
-  }, { autocomplete: ['grid-(row|col)-span-<num>', '(row|col)-span-<num>'] }],
+  }, { autocomplete: '(grid-row|grid-col|row|col)-span-<num>' }],
 
   // starts & ends
   [/^(?:grid-)?(row|col)-start-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-start`]: h.bracket.cssvar(v) ?? v })],
-  [/^(?:grid-)?(row|col)-end-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-end`]: h.bracket.cssvar(v) ?? v }), { autocomplete: ['grid-(row|col)-(start|end)-<num>'] }],
+  [/^(?:grid-)?(row|col)-end-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-end`]: h.bracket.cssvar(v) ?? v }), { autocomplete: '(grid-row|grid-col|row|col)-(start|end)-<num>' }],
 
   // auto flows
-  [/^(?:grid-)?auto-(rows|cols)-(.+)$/, ([, c, v], { theme }) => ({ [`grid-auto-${rowCol(c)}`]: autoDirection(c, theme, v) }), { autocomplete: ['grid-auto-(rows|cols)-<num>'] }],
+  [/^(?:grid-)?auto-(rows|cols)-(.+)$/, ([, c, v], { theme }) => ({ [`grid-auto-${rowCol(c)}`]: autoDirection(c, theme, v) }), { autocomplete: '(grid-auto|auto)-(rows|cols)-<num>' }],
 
   // grid-auto-flow, auto-flow: uno
   // grid-flow: wind
   [/^(?:grid-auto-flow|auto-flow|grid-flow)-(.+)$/, ([, v]) => ({ 'grid-auto-flow': h.bracket.cssvar(v) })],
   [/^(?:grid-auto-flow|auto-flow|grid-flow)-(row|col|dense|row-dense|col-dense)$/, ([, v]) => ({ 'grid-auto-flow': rowCol(v).replace('-', ' ') }), { autocomplete: ['(grid-auto-flow|auto-flow|grid-flow)-(row|col|dense|row-dense|col-dense)'] }],
 
   // templates
-  [/^grid-(rows|cols)-(.+)$/, ([, c, v], { theme }) => ({
+  [/^(?:grid-)?(rows|cols)-(.+)$/, ([, c, v], { theme }) => ({
     [`grid-template-${rowCol(c)}`]: theme[`gridTemplate${rowColTheme(c)}`]?.[v] ?? h.bracket.cssvar(v),
   })],
-  [/^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'] }],
+  [/^(?: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|grid-cols|rows|cols)-<num>' }],
 
   // areas
   [/^grid-area(s)?-(.+)$/, ([, s, v]) => {

test/__snapshots__/autocomplete.test.ts.snap

@@ -23,6 +23,7 @@ exports[`autocomplete > should provide autocomplete 1`] = `
   "align-": "align-base align-baseline align-bottom align-btm align-end align-inherit align-initial align-mid align-middle align-revert",
   "aspect-": "aspect-ratio aspect-square aspect-video",
   "auto-flow-": "auto-flow-col auto-flow-col-dense auto-flow-dense auto-flow-row auto-flow-row-dense",
+  "auto-rows-": "auto-rows-0 auto-rows-1 auto-rows-2 auto-rows-3 auto-rows-4 auto-rows-5 auto-rows-6 auto-rows-8 auto-rows-10 auto-rows-12",
   "bg-": "bg-amber bg-auto bg-black bg-blend-color bg-blend-color-burn bg-blend-color-dodge bg-blend-darken bg-blend-difference bg-blend-exclusion bg-blend-hard-light",
   "bg-gradient-": "bg-gradient-conic bg-gradient-from bg-gradient-linear bg-gradient-radial bg-gradient-repeating bg-gradient-shape bg-gradient-to bg-gradient-via",
   "bg-r": "bg-red bg-repeat bg-repeat-inherit bg-repeat-initial bg-repeat-revert bg-repeat-revert-layer bg-repeat-round bg-repeat-space bg-repeat-unset bg-repeat-x",
@@ -36,12 +37,6 @@ exports[`autocomplete > should provide autocomplete 1`] = `
   "filter-": "filter-blur filter-drop filter-drop-shadow filter-drop-shadow-color filter-grayscale filter-inherit filter-initial filter-invert filter-none filter-revert",
   "fle": "flex flex-auto flex-col flex-col-reverse flex-content-around flex-content-between flex-content-center flex-content-end flex-content-evenly flex-content-inherit",
   "font-": "font-black font-bold font-extrabold font-extralight font-italic font-light font-medium font-mono font-normal font-not-italic",
-  "grid-auto-flow-": "grid-auto-flow-col grid-auto-flow-col-dense grid-auto-flow-dense grid-auto-flow-row grid-auto-flow-row-dense",
-  "grid-auto-rows-": "grid-auto-rows-0 grid-auto-rows-1 grid-auto-rows-2 grid-auto-rows-3 grid-auto-rows-4 grid-auto-rows-5 grid-auto-rows-6 grid-auto-rows-8 grid-auto-rows-10 grid-auto-rows-12",
-  "grid-flow-": "grid-flow-col grid-flow-col-dense grid-flow-dense grid-flow-row grid-flow-row-dense",
-  "grid-row": "grid-rows-none grid-rows-subgrid",
-  "grid-row-end-": "grid-row-end-0 grid-row-end-1 grid-row-end-2 grid-row-end-3 grid-row-end-4 grid-row-end-5 grid-row-end-6 grid-row-end-8 grid-row-end-10 grid-row-end-12",
-  "grid-row-start-": "grid-row-start-0 grid-row-start-1 grid-row-start-2 grid-row-start-3 grid-row-start-4 grid-row-start-5 grid-row-start-6 grid-row-start-8 grid-row-start-10 grid-row-start-12",
   "grid-rows-": "grid-rows-none grid-rows-subgrid grid-rows-0 grid-rows-1 grid-rows-2 grid-rows-3 grid-rows-4 grid-rows-5 grid-rows-6 grid-rows-8",
   "grow-": "grow-0 grow-1 grow-2 grow-3 grow-4 grow-5 grow-6 grow-8 grow-10 grow-12",
   "keyframes-": "keyframes-back-in-down keyframes-back-in-left keyframes-back-in-right keyframes-back-in-up keyframes-back-out-down keyframes-back-out-left keyframes-back-out-right keyframes-back-out-up keyframes-bounce keyframes-bounce-alt",
@@ -55,6 +50,7 @@ exports[`autocomplete > should provide autocomplete 1`] = `
   "outline-": "outline-amber outline-auto outline-black outline-blue outline-bluegray outline-blueGray outline-coolgray outline-coolGray outline-current outline-cyan",
   "outline-offset-": "outline-offset-0 outline-offset-1 outline-offset-2 outline-offset-3 outline-offset-4 outline-offset-5 outline-offset-6 outline-offset-8 outline-offset-10 outline-offset-12",
   "placeholder-": "placeholder-.dark: placeholder-.light: placeholder-@dark: placeholder-@hover: placeholder-@light: placeholder-absolute placeholder-active: placeholder-after: placeholder-animate-delay placeholder-animate-direction",
+  "rows-": "rows-0 rows-1 rows-2 rows-3 rows-4 rows-5 rows-6 rows-8 rows-10 rows-12",
   "scale-": "scale-0 scale-10 scale-20 scale-30 scale-40 scale-50 scale-60 scale-70 scale-80 scale-90",
   "scale-x-": "scale-x-0 scale-x-10 scale-x-20 scale-x-30 scale-x-40 scale-x-50 scale-x-60 scale-x-70 scale-x-80 scale-x-90",
   "scroll-": "scroll-auto scroll-block scroll-inherit scroll-initial scroll-inline scroll-m scroll-ma scroll-p scroll-pa scroll-revert",

test/__snapshots__/preset-attributify.test.ts.snap

@@ -74,6 +74,7 @@ exports[`attributify > variant 1`] = `
 exports[`attributify > with trueToNonValued 1`] = `
 "/* layer: default */
 [grid~="\\~"]{display:grid;}
+.cols-2,
 [grid~="cols-2"]{grid-template-columns:repeat(2,minmax(0,1fr));}
 [flex~="true"]{display:flex;}"
 `;

test/assets/output/preset-mini-targets.css

@@ -648,14 +648,16 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .auto-flow-col-dense,
 .grid-flow-col-dense{grid-auto-flow:column dense;}
 .grid-flow-dense{grid-auto-flow:dense;}
-.grid-cols-\[1fr_2fr_100px_min-content\]{grid-template-columns:1fr 2fr 100px min-content;}
+.cols-\[repeat\(3\,auto\)\],
 .grid-cols-\[repeat\(3\,auto\)\]{grid-template-columns:repeat(3,auto);}
+.grid-cols-\[1fr_2fr_100px_min-content\]{grid-template-columns:1fr 2fr 100px min-content;}
 .grid-cols-\$1{grid-template-columns:var(--\31 );}
 .grid-rows-\[1fr_2fr_100px_min-content\]{grid-template-rows:1fr 2fr 100px min-content;}
 .grid-cols-minmax-1rem{grid-template-columns:repeat(auto-fill,minmax(1rem,1fr));}
 .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-rows-3,
+.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";}

test/assets/preset-mini-targets.ts

@@ -371,8 +371,10 @@ export const presetMiniTargets: string[] = [
   'grid-cols-[1fr_2fr_100px_min-content]',
   'grid-cols-2',
   'grid-cols-[repeat(3,auto)]',
+  'cols-[repeat(3,auto)]',
   'grid-rows-[1fr_2fr_100px_min-content]',
   'grid-rows-3',
+  'rows-3',
   'grid',
   'auto-rows-min',
   'auto-rows-fr',

test/autocomplete.test.ts

@@ -57,6 +57,8 @@ describe('autocomplete', () => {
         // sort this list in alphabetical order
         'align-',
         'aspect-',
+        'auto-flow-', // grid-auto-flow
+        'auto-rows-', // grid-auto-rows
         'bg-',
         'bg-gradient-',
         'bg-r',
@@ -70,6 +72,8 @@ describe('autocomplete', () => {
         'filter-',
         'fle',
         'font-',
+        'font-',
+        'grid-rows-',
         'grow-',
         'keyframes-',
         'leading-',
@@ -82,6 +86,7 @@ describe('autocomplete', () => {
         'outline-',
         'outline-offset-',
         'placeholder-',
+        'rows-', // grid-rows
         'scroll-',
         'scroll-m-',
         'shadow-',
@@ -100,14 +105,6 @@ describe('autocomplete', () => {
         'transform-scale-',
         'transform-skew-x-',
         'transform-skew-y-',
-        'grid-row',
-        'grid-row-start-',
-        'grid-row-end-',
-        'grid-rows-',
-        'grid-auto-flow-',
-        'grid-flow-',
-        'auto-flow-',
-        'grid-auto-rows-',
         'v-',
         'w-',
         'z-',