fix: flex property should convert considering the default values for …

…flexShrink and flexBasis
Jackardios · Feb 11, 2023 · e417b51 · e417b51
1 parent 0bf17d5
commit e417b51
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 5 deletions.
diff --git a/src/constants/converters.ts b/src/constants/converters.ts
@@ -839,10 +839,33 @@ export const TAILWIND_DECLARATION_CONVERTERS: TailwindDeclarationConverters = {
     return classes;
   },
 
-  flex: (declaration, config) =>
-    config.tailwindConfig.corePlugins.flex
-      ? convertDeclarationValue(declaration.value, config.mapping.flex, 'flex')
-      : [],
+  flex: (declaration, config) => {
+    if (!config.tailwindConfig.corePlugins.flex) {
+      return [];
+    }
+
+    let classes = convertDeclarationValue(
+      declaration.value,
+      config.mapping.flex,
+      'flex',
+      ''
+    );
+
+    if (classes.length) {
+      return classes;
+    }
+
+    const [flexGrow, flexShrink = '1', flexBasis = '0%'] = declaration.value
+      .trim()
+      .split(/\s+/m);
+
+    return convertDeclarationValue(
+      `${flexGrow} ${flexShrink} ${flexBasis}`,
+      config.mapping.flex,
+      'flex',
+      declaration.value
+    );
+  },
 
   'flex-basis': (declaration, config) =>
     config.tailwindConfig.corePlugins.flexBasis

diff --git a/test/TailwindConverter.spec.ts b/test/TailwindConverter.spec.ts
@@ -440,6 +440,7 @@ describe('TailwindConverter', () => {
           'after:border-r-8',
           'after:border-dashed',
           'after:border-t-[some-invalid-value]',
+          'after:flex-1',
           'after:rounded-tl-none',
           'after:rounded-tr-[0.25%]',
           'after:border-t-[current]',
@@ -455,6 +456,8 @@ describe('TailwindConverter', () => {
           'break-inside-avoid-column',
           'caret-[color:var(--cyan)]',
           'h-9',
+          'flex-1',
+          'xl:flex-[1_0]',
           'xl:clear-both',
           'xl:text-lime-200',
           'xl:gap-x-48',

diff --git a/test/__snapshots__/TailwindConverter.spec.ts.snap b/test/__snapshots__/TailwindConverter.spec.ts.snap
@@ -65,7 +65,7 @@ exports[`TailwindConverter should convert the complex CSS 1`] = `
   @apply border pl-[25%] pr-[1.5em] pt-0 pb-px bottom-full;
 }
 .bar {
-  @apply backdrop-brightness-90 backdrop-sepia-[25%] backdrop-blur-none animate-[some-animation_2s_linear_infinite] origin-[12%_25.5%] ease-[cubic-bezier(0.23,0,0.25,1)] lg:backdrop-brightness-75 lg:backdrop-sepia lg:bg-local lg:bg-blend-difference lg:bg-clip-padding lg:bg-[hsl(30,51%,22%)] lg:disabled:bg-gradient-to-tr lg:disabled:bg-origin-padding lg:disabled:bg-left-bottom lg:disabled:bg-no-repeat lg:disabled:bg-contain lg:disabled:border-b-2 after:border-spacing-[5%] after:rounded-full after:border-l-[3px] after:border-l-transparent after:border-l-[1rem] after:border-r-2 after:border-r-[aqua] after:border-r-8 after:border-dashed after:border-t-[some-invalid-value] after:rounded-tl-none after:rounded-tr-[0.25%] after:border-t-[current] after:border-t-[100vh] after:border-dotted after:border-0 after:bottom-[100vw] box-decoration-slice shadow box-border break-after-all break-before-page break-inside-avoid-column caret-[color:var(--cyan)] h-9 xl:clear-both xl:text-lime-200 xl:gap-x-48 xl:columns-3 xl:content-none xl:cursor-pointer xl:hidden xl:fill-sky-800 xl:blur-sm xl:brightness-50 xl:sepia xl:contrast-100 xl:hue-rotate-30 xl:invert-0 xl:opacity-5 xl:saturate-150 xl:flex-auto xl:basis-3 xl:flex-col-reverse xl:grow xl:shrink-0 xl:flex-wrap-reverse xl:float-right xl:text-2xl xl:antialiased xl:italic xl:ordinal xl:font-semibold;
+  @apply backdrop-brightness-90 backdrop-sepia-[25%] backdrop-blur-none animate-[some-animation_2s_linear_infinite] origin-[12%_25.5%] ease-[cubic-bezier(0.23,0,0.25,1)] lg:backdrop-brightness-75 lg:backdrop-sepia lg:bg-local lg:bg-blend-difference lg:bg-clip-padding lg:bg-[hsl(30,51%,22%)] lg:disabled:bg-gradient-to-tr lg:disabled:bg-origin-padding lg:disabled:bg-left-bottom lg:disabled:bg-no-repeat lg:disabled:bg-contain lg:disabled:border-b-2 after:border-spacing-[5%] after:rounded-full after:border-l-[3px] after:border-l-transparent after:border-l-[1rem] after:border-r-2 after:border-r-[aqua] after:border-r-8 after:border-dashed after:border-t-[some-invalid-value] after:flex-1 after:rounded-tl-none after:rounded-tr-[0.25%] after:border-t-[current] after:border-t-[100vh] after:border-dotted after:border-0 after:bottom-[100vw] box-decoration-slice shadow box-border break-after-all break-before-page break-inside-avoid-column caret-[color:var(--cyan)] h-9 flex-1 xl:flex-[1_0] xl:clear-both xl:text-lime-200 xl:gap-x-48 xl:columns-3 xl:content-none xl:cursor-pointer xl:hidden xl:fill-sky-800 xl:blur-sm xl:brightness-50 xl:sepia xl:contrast-100 xl:hue-rotate-30 xl:invert-0 xl:opacity-5 xl:saturate-150 xl:flex-auto xl:basis-3 xl:flex-col-reverse xl:grow xl:shrink-0 xl:flex-wrap-reverse xl:float-right xl:text-2xl xl:antialiased xl:italic xl:ordinal xl:font-semibold;
 
   /* arbitary value */
   animation-delay: 200ms;

diff --git a/test/fixtures/input.css b/test/fixtures/input.css
@@ -160,6 +160,7 @@
     border-top-width: 100vh;
     border-width: 0px;
     bottom: 100vw;
+    flex: 1;
   }
 }
 
@@ -173,8 +174,10 @@
   break-inside: avoid-column;
   caret-color: var(--cyan);
   height: 2.25rem;
+  flex: 1 1;
 
   @media (min-width: 1280px) {
+    flex: 1 0;
     clear: both;
     color: #d9f99d;
     column-gap: 12rem;