diff --git a/src/rules/flex.ts b/src/rules/flex.ts index 00fc620..86b9f9a 100644 --- a/src/rules/flex.ts +++ b/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.remToRpx(d) })], + [/^(?: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.remToRpx(d) }), { autocomplete: ['flex-basis-$spacing', 'basis-$spacing'] }], // directions ['flex-row', { 'flex-direction': 'row' }], diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap index 17b23fb..32e16d0 100644 --- a/test/__snapshots__/preset-mini.test.ts.snap +++ b/test/__snapshots__/preset-mini.test.ts.snap @@ -504,10 +504,14 @@ 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{flex-basis:0;} .flex-basis-\\\\$variable{flex-basis:var(--variable);} diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts index 6698f82..c2fc589 100644 --- a/test/assets/preset-mini-targets.ts +++ b/test/assets/preset-mini-targets.ts @@ -272,8 +272,12 @@ export const presetMiniTargets: string[] = [ 'flex-[$variable1_$variable2_$variable3]', 'shrink', 'shrink-0', + 'shrink-10', + 'shrink-$variable', 'grow', 'grow-0', + 'grow-10', + 'grow-$variable', 'basis-auto', 'basis-none', 'gap-none',