From 77438abcc045d7b2dbd40d64627dae3108274c96 Mon Sep 17 00:00:00 2001 From: BlackTooth <39750199+xiaojieajie@users.noreply.github.com> Date: Fri, 1 Jul 2022 18:19:17 +0800 Subject: [PATCH] feat(preset-mini): add grid autocomplete (#1201) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: 隆杰 --- packages/preset-mini/src/rules/grid.ts | 8 ++++---- test/__snapshots__/autocomplete.test.ts.snap | 8 ++++++++ test/autocomplete.test.ts | 8 ++++++++ 3 files changed, 20 insertions(+), 4 deletions(-) diff --git a/packages/preset-mini/src/rules/grid.ts b/packages/preset-mini/src/rules/grid.ts index 1ad4d0aadb..ac99223e28 100644 --- a/packages/preset-mini/src/rules/grid.ts +++ b/packages/preset-mini/src/rules/grid.ts @@ -40,22 +40,22 @@ export const grids: Rule[] = [ // 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)-'] }], // 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)-'] }], // 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)-', 'grid-(rows|cols)-none'] }], // template none ['grid-rows-none', { 'grid-template-rows': 'none' }], diff --git a/test/__snapshots__/autocomplete.test.ts.snap b/test/__snapshots__/autocomplete.test.ts.snap index 2c18b577bb..741ab0b295 100644 --- a/test/__snapshots__/autocomplete.test.ts.snap +++ b/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", diff --git a/test/autocomplete.test.ts b/test/autocomplete.test.ts index af952d17bd..bcd804eb03 100644 --- a/test/autocomplete.test.ts +++ b/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-',