From 2632091cc8f955086ef4799c92da67794c594cef Mon Sep 17 00:00:00 2001 From: chris-zhu <1633711653@qq.com> Date: Sun, 17 Jul 2022 11:23:22 +0800 Subject: [PATCH 1/2] fix(preset-mini): update grow & shrink rules --- packages/preset-mini/src/rules/flex.ts | 8 +++----- test/__snapshots__/autocomplete.test.ts.snap | 1 + test/__snapshots__/preset-mini.test.ts.snap | 2 ++ test/assets/preset-mini-targets.ts | 2 ++ test/autocomplete.test.ts | 1 + 5 files changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/preset-mini/src/rules/flex.ts b/packages/preset-mini/src/rules/flex.ts index f84348ce1b..d30b835307 100644 --- a/packages/preset-mini/src/rules/flex.ts +++ b/packages/preset-mini/src/rules/flex.ts @@ -16,11 +16,9 @@ export const flex: Rule[] = [ ['flex-none', { flex: 'none' }], // shrink/grow/basis - [/^(?:flex-)?shrink$/, () => ({ 'flex-shrink': 1 })], - [/^(?:flex-)?shrink-0$/, () => ({ 'flex-shrink': 0 })], - [/^(?:flex-)?grow$/, () => ({ 'flex-grow': 1 })], - [/^(?:flex-)?grow-0$/, () => ({ 'flex-grow': 0 })], - [/^(?:flex-)?basis-(.+)$/, ([, d], { theme }) => ({ 'flex-basis': theme.spacing?.[d] ?? h.bracket.cssvar.auto.fraction.rem(d) })], + [/^(?:flex-)?shrink(?:-(.*))?$/, ([, d]) => ({ 'flex-shrink': h.bracket.number(d) ?? 1 }), { autocomplete: ['flex-shrink-', 'shrink-'] }], + [/^(?:flex-)?grow(?:-(.*))?$/, ([, d]) => ({ 'flex-grow': h.bracket.number(d) ?? 1 }), { autocomplete: ['flex-grow-', 'grow-'] }], + [/^(?:flex-)?basis-(.+)$/, ([, d], { theme }) => ({ 'flex-basis': theme.spacing?.[d] ?? h.bracket.cssvar.auto.fraction.rem(d) }), { autocomplete: ['flex-basis-$spacing', 'basis-$spacing'] }], // directions ['flex-row', { 'flex-direction': 'row' }], diff --git a/test/__snapshots__/autocomplete.test.ts.snap b/test/__snapshots__/autocomplete.test.ts.snap index 741ab0b295..594e08d9f6 100644 --- a/test/__snapshots__/autocomplete.test.ts.snap +++ b/test/__snapshots__/autocomplete.test.ts.snap @@ -43,6 +43,7 @@ exports[`autocomplete > should provide autocomplete 1`] = ` "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", + "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", "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/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap index d81ea07926..565b9a5e83 100644 --- a/test/__snapshots__/preset-mini.test.ts.snap +++ b/test/__snapshots__/preset-mini.test.ts.snap @@ -504,10 +504,12 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina .shrink{flex-shrink:1;} .flex-shrink-0, .shrink-0{flex-shrink:0;} +.shrink-10{flex-shrink:10;} .flex-grow, .grow{flex-grow:1;} .flex-grow-0, .grow-0{flex-grow:0;} +.grow-10{flex-grow:10;} .basis-auto{flex-basis:auto;} .basis-none, .flex-basis-0{flex-basis:0rem;} diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts index 6698f8289e..36a56860ab 100644 --- a/test/assets/preset-mini-targets.ts +++ b/test/assets/preset-mini-targets.ts @@ -272,8 +272,10 @@ export const presetMiniTargets: string[] = [ 'flex-[$variable1_$variable2_$variable3]', 'shrink', 'shrink-0', + 'shrink-10', 'grow', 'grow-0', + 'grow-10', 'basis-auto', 'basis-none', 'gap-none', diff --git a/test/autocomplete.test.ts b/test/autocomplete.test.ts index bcd804eb03..9de90d1a7d 100644 --- a/test/autocomplete.test.ts +++ b/test/autocomplete.test.ts @@ -71,6 +71,7 @@ describe('autocomplete', () => { 'fle', 'font-', 'font-', + 'grow-', 'keyframes-', 'leading-', 'line-clamp-', From bb98808ab5445f2d4ee70714408b233a3fcb08b2 Mon Sep 17 00:00:00 2001 From: chris-zhu <1633711653@qq.com> Date: Sun, 17 Jul 2022 12:49:12 +0800 Subject: [PATCH 2/2] chore: update --- packages/preset-mini/src/rules/flex.ts | 4 ++-- test/__snapshots__/preset-mini.test.ts.snap | 2 ++ test/assets/preset-mini-targets.ts | 2 ++ 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/preset-mini/src/rules/flex.ts b/packages/preset-mini/src/rules/flex.ts index d30b835307..34f2f432c3 100644 --- a/packages/preset-mini/src/rules/flex.ts +++ b/packages/preset-mini/src/rules/flex.ts @@ -16,8 +16,8 @@ export const flex: Rule[] = [ ['flex-none', { flex: 'none' }], // shrink/grow/basis - [/^(?:flex-)?shrink(?:-(.*))?$/, ([, d]) => ({ 'flex-shrink': h.bracket.number(d) ?? 1 }), { autocomplete: ['flex-shrink-', 'shrink-'] }], - [/^(?:flex-)?grow(?:-(.*))?$/, ([, d]) => ({ 'flex-grow': h.bracket.number(d) ?? 1 }), { autocomplete: ['flex-grow-', 'grow-'] }], + [/^(?:flex-)?shrink(?:-(.*))?$/, ([, d = '']) => ({ 'flex-shrink': h.bracket.cssvar.number(d) ?? 1 }), { autocomplete: ['flex-shrink-', 'shrink-'] }], + [/^(?:flex-)?grow(?:-(.*))?$/, ([, d = '']) => ({ 'flex-grow': h.bracket.cssvar.number(d) ?? 1 }), { autocomplete: ['flex-grow-', 'grow-'] }], [/^(?:flex-)?basis-(.+)$/, ([, d], { theme }) => ({ 'flex-basis': theme.spacing?.[d] ?? h.bracket.cssvar.auto.fraction.rem(d) }), { autocomplete: ['flex-basis-$spacing', 'basis-$spacing'] }], // directions diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap index 565b9a5e83..d1c0f0ac41 100644 --- a/test/__snapshots__/preset-mini.test.ts.snap +++ b/test/__snapshots__/preset-mini.test.ts.snap @@ -504,11 +504,13 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina .shrink{flex-shrink:1;} .flex-shrink-0, .shrink-0{flex-shrink:0;} +.shrink-\\\\$variable{flex-shrink:var(--variable);} .shrink-10{flex-shrink:10;} .flex-grow, .grow{flex-grow:1;} .flex-grow-0, .grow-0{flex-grow:0;} +.grow-\\\\$variable{flex-grow:var(--variable);} .grow-10{flex-grow:10;} .basis-auto{flex-basis:auto;} .basis-none, diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts index 36a56860ab..c2fc58996f 100644 --- a/test/assets/preset-mini-targets.ts +++ b/test/assets/preset-mini-targets.ts @@ -273,9 +273,11 @@ export const presetMiniTargets: string[] = [ 'shrink', 'shrink-0', 'shrink-10', + 'shrink-$variable', 'grow', 'grow-0', 'grow-10', + 'grow-$variable', 'basis-auto', 'basis-none', 'gap-none',