From 960ec474c5c91bd9dd0c3f1a29929bd6d7b284ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9A=86=E6=9D=B0?= Date: Fri, 1 Jul 2022 17:13:08 +0800 Subject: [PATCH 1/2] feat(preset-mini): add grid autocomplete --- packages/preset-mini/src/rules/grid.ts | 8 ++++---- test/__snapshots__/autocomplete.test.ts.snap | 9 ++++++++- test/autocomplete.test.ts | 9 ++++++++- 3 files changed, 20 insertions(+), 6 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..da0d663ccb 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", @@ -59,7 +67,6 @@ exports[`autocomplete > should provide autocomplete 1`] = ` "transform-skew-x-": "transform-skew-x-0 transform-skew-x-10 transform-skew-x-20 transform-skew-x-30 transform-skew-x-40 transform-skew-x-50 transform-skew-x-60 transform-skew-x-70 transform-skew-x-80 transform-skew-x-90", "transform-skew-y-": "transform-skew-y-0 transform-skew-y-10 transform-skew-y-20 transform-skew-y-30 transform-skew-y-40 transform-skew-y-50 transform-skew-y-60 transform-skew-y-70 transform-skew-y-80 transform-skew-y-90", "transition-": "transition-all transition-colors transition-inherit transition-initial transition-none transition-opacity transition-revert transition-revert-layer transition-shadow transition-transform", - "v-": "v-base v-baseline v-bottom v-btm v-inherit v-initial v-mid v-middle v-revert v-revert-layer", "w-": "w-2xl w-3xl w-4xl w-5xl w-6xl w-7xl w-auto w-lg w-md w-none", "z-": "z-0 z-1 z-2 z-3 z-4 z-5 z-6 z-8 z-10 z-12", } diff --git a/test/autocomplete.test.ts b/test/autocomplete.test.ts index af952d17bd..a3729f8f77 100644 --- a/test/autocomplete.test.ts +++ b/test/autocomplete.test.ts @@ -95,7 +95,14 @@ describe('autocomplete', () => { 'transform-scale-', 'transform-skew-x-', 'transform-skew-y-', - 'v-', + 'grid-row', + 'grid-row-start-', + 'grid-row-end-', + 'grid-rows-', + 'grid-auto-flow-', + 'grid-flow-', + 'auto-flow-', + 'grid-auto-rows-', 'w-', 'z-', ]), From 889043031aef2de922c5d5144bb2f3790ceb0ed0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9A=86=E6=9D=B0?= Date: Fri, 1 Jul 2022 17:17:28 +0800 Subject: [PATCH 2/2] add v- --- test/__snapshots__/autocomplete.test.ts.snap | 1 + test/autocomplete.test.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/test/__snapshots__/autocomplete.test.ts.snap b/test/__snapshots__/autocomplete.test.ts.snap index da0d663ccb..741ab0b295 100644 --- a/test/__snapshots__/autocomplete.test.ts.snap +++ b/test/__snapshots__/autocomplete.test.ts.snap @@ -67,6 +67,7 @@ exports[`autocomplete > should provide autocomplete 1`] = ` "transform-skew-x-": "transform-skew-x-0 transform-skew-x-10 transform-skew-x-20 transform-skew-x-30 transform-skew-x-40 transform-skew-x-50 transform-skew-x-60 transform-skew-x-70 transform-skew-x-80 transform-skew-x-90", "transform-skew-y-": "transform-skew-y-0 transform-skew-y-10 transform-skew-y-20 transform-skew-y-30 transform-skew-y-40 transform-skew-y-50 transform-skew-y-60 transform-skew-y-70 transform-skew-y-80 transform-skew-y-90", "transition-": "transition-all transition-colors transition-inherit transition-initial transition-none transition-opacity transition-revert transition-revert-layer transition-shadow transition-transform", + "v-": "v-base v-baseline v-bottom v-btm v-inherit v-initial v-mid v-middle v-revert v-revert-layer", "w-": "w-2xl w-3xl w-4xl w-5xl w-6xl w-7xl w-auto w-lg w-md w-none", "z-": "z-0 z-1 z-2 z-3 z-4 z-5 z-6 z-8 z-10 z-12", } diff --git a/test/autocomplete.test.ts b/test/autocomplete.test.ts index a3729f8f77..bcd804eb03 100644 --- a/test/autocomplete.test.ts +++ b/test/autocomplete.test.ts @@ -103,6 +103,7 @@ describe('autocomplete', () => { 'grid-flow-', 'auto-flow-', 'grid-auto-rows-', + 'v-', 'w-', 'z-', ]),