feat(preset-mini): add grid autocomplete (#1201)

Co-authored-by: 隆杰 <longjie.li@taxsoyea.net>

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

@@ -40,22 +40,22 @@ export const grids: Rule<Theme>[] = [
 
   // 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 })],
+  [/^(?:grid-)?(row|col)-end-(.+)$/, ([, c, v]) => ({ [`grid-${rowCol(c)}-end`]: h.bracket.cssvar(v) ?? v }), { autocomplete: ['grid-(row|col)-(start|end)-<num>'] }],
 
   // auto flows
-  [/^(?:grid-)?auto-(rows|cols)-(.+)$/, ([, c, v], { theme }) => ({ [`grid-auto-${rowCol(c)}`]: autoDirection(c, theme, v) })],
+  [/^(?:grid-)?auto-(rows|cols)-(.+)$/, ([, c, v], { theme }) => ({ [`grid-auto-${rowCol(c)}`]: autoDirection(c, theme, v) }), { autocomplete: ['grid-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('-', ' ') })],
+  [/^(?: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-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))` })],
+  [/^grid-(rows|cols)-(\d+)$/, ([, c, d]) => ({ [`grid-template-${rowCol(c)}`]: `repeat(${d},minmax(0,1fr))` }), { autocomplete: ['grid-(rows|cols)-<num>', 'grid-(rows|cols)-none'] }],
 
   // template none
   ['grid-rows-none', { 'grid-template-rows': 'none' }],

test/__snapshots__/autocomplete.test.ts.snap

@@ -22,6 +22,7 @@ exports[`autocomplete > should provide autocomplete 1`] = `
 {
   "align-": "align-base align-baseline align-bottom align-btm align-inherit align-initial align-mid align-middle align-revert align-revert-layer",
   "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",
   "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",
@@ -35,6 +36,13 @@ exports[`autocomplete > should provide autocomplete 1`] = `
   "filter-": "filter-drop filter-drop-shadow filter-drop-shadow-color filter-grayscale filter-inherit filter-initial filter-invert filter-none filter-revert filter-revert-layer",
   "fle": "flex flex-1 flex-auto flex-col flex-col-reverse flex-initial flex-inline flex-none flex-nowrap flex-row",
   "font-": "font-100 font-200 font-300 font-400 font-500 font-600 font-700 font-800 font-900 font-black",
+  "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-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-0 grid-rows-1 grid-rows-2 grid-rows-3 grid-rows-4 grid-rows-5 grid-rows-6 grid-rows-8 grid-rows-10 grid-rows-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",
   "leading-": "leading-loose leading-none leading-normal leading-relaxed leading-snug leading-tight",
   "line-clamp-": "line-clamp-0 line-clamp-1 line-clamp-2 line-clamp-3 line-clamp-4 line-clamp-5 line-clamp-6 line-clamp-8 line-clamp-10 line-clamp-12",

test/autocomplete.test.ts

@@ -95,6 +95,14 @@ 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-',