From 1693c0ea1952002c9571504d773fbca4bf56b5b0 Mon Sep 17 00:00:00 2001
From: Hubert Bieszczad <brentlokk@gmail.com>
Date: Thu, 21 May 2026 08:17:24 +0200
Subject: [PATCH] fix: dont parse flex: 1

---
 .../uniwind/src/bundler/css-processor/css.ts  | 19 ++++++++++++++-----
 .../src/bundler/css-processor/processor.ts    |  2 +-
 .../src/bundler/css-processor/types.ts        |  2 ++
 .../native/styles-parsing/layout.test.tsx     | 10 ++++++----
 packages/uniwind/tests/test.css               |  7 +++++++
 5 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/packages/uniwind/src/bundler/css-processor/css.ts b/packages/uniwind/src/bundler/css-processor/css.ts
index 2e6492f8..a1d19f84 100644
--- a/packages/uniwind/src/bundler/css-processor/css.ts
+++ b/packages/uniwind/src/bundler/css-processor/css.ts
@@ -2,7 +2,7 @@ import type { OverflowKeyword } from 'lightningcss'
 import { isDefined } from '../../common/utils'
 import { Logger } from '../logger'
 import type { ProcessorBuilder } from './processor'
-import type { DeclarationValues } from './types'
+import type { DeclarationProperty, DeclarationValues } from './types'
 import { deepEqual, pipe, roundToPrecision, shouldBeSerialized } from './utils'
 
 export class CSS {
@@ -10,8 +10,8 @@ export class CSS {
 
     constructor(private readonly Processor: ProcessorBuilder) {}
 
-    processValue(declarationValue: DeclarationValues): any {
-        const processedValue = this.getProcessedValue(declarationValue)
+    processValue(declarationValue: DeclarationValues, declarationProperty?: DeclarationProperty): any {
+        const processedValue = this.getProcessedValue(declarationValue, declarationProperty)
 
         if (typeof processedValue === 'string') {
             return this.makeSafeForSerialization(processedValue)
@@ -48,7 +48,7 @@ export class CSS {
         return processedValue
     }
 
-    private getProcessedValue(declarationValue: DeclarationValues): any {
+    private getProcessedValue(declarationValue: DeclarationValues, declarationProperty?: DeclarationProperty): any {
         if (typeof declarationValue !== 'object') {
             return declarationValue
         }
@@ -319,11 +319,20 @@ export class CSS {
         }
 
         if ('grow' in declarationValue) {
-            return {
+            const parsedFlex = {
                 flexGrow: declarationValue.grow,
                 flexShrink: declarationValue.shrink,
                 flexBasis: this.processValue(declarationValue.basis),
             }
+
+            // CSS `flex: 1` is a shorthand for `flex-grow: 1; flex-shrink: 1; flex-basis: 0%` but for native we just want flex: 1
+            if (declarationProperty === 'flex' && parsedFlex.flexGrow === 1 && parsedFlex.flexShrink === 1 && parsedFlex.flexBasis === '"0%"') {
+                return {
+                    flex: 1,
+                }
+            }
+
+            return parsedFlex
         }
 
         if (Array.isArray(declarationValue)) {
diff --git a/packages/uniwind/src/bundler/css-processor/processor.ts b/packages/uniwind/src/bundler/css-processor/processor.ts
index ccce6eae..5e71e4d2 100644
--- a/packages/uniwind/src/bundler/css-processor/processor.ts
+++ b/packages/uniwind/src/bundler/css-processor/processor.ts
@@ -115,7 +115,7 @@ export class ProcessorBuilder {
             return
         }
 
-        style[declaration.property] = this.CSS.processValue(declaration.value)
+        style[declaration.property] = this.CSS.processValue(declaration.value, declaration.property)
 
         if (!isVar && important) {
             style.importantProperties.push(declaration.property)
diff --git a/packages/uniwind/src/bundler/css-processor/types.ts b/packages/uniwind/src/bundler/css-processor/types.ts
index 2bbcd97e..204af1f3 100644
--- a/packages/uniwind/src/bundler/css-processor/types.ts
+++ b/packages/uniwind/src/bundler/css-processor/types.ts
@@ -46,6 +46,8 @@ export type DeclarationValues =
     | AbsoluteFontWeight
     | UnresolvedColor
 
+export type DeclarationProperty = Declaration['property']
+
 export type ProcessMetaValues = {
     className?: string | null
 }
diff --git a/packages/uniwind/tests/native/styles-parsing/layout.test.tsx b/packages/uniwind/tests/native/styles-parsing/layout.test.tsx
index 6e7196c1..0418c664 100644
--- a/packages/uniwind/tests/native/styles-parsing/layout.test.tsx
+++ b/packages/uniwind/tests/native/styles-parsing/layout.test.tsx
@@ -7,6 +7,7 @@ describe('Layout', () => {
         const { getStylesFromId } = renderUniwind(
             <React.Fragment>
                 <View className="flex-1" testID="flex-1" />
+                <View className="flex-1-custom" testID="flex-1-custom" />
                 <View className="flex-row" testID="flex-row" />
                 <View className="flex-col" testID="flex-col" />
                 <View className="items-center" testID="items-center" />
@@ -23,10 +24,11 @@ describe('Layout', () => {
             </React.Fragment>,
         )
 
-        const flex1 = getStylesFromId('flex-1')
-        expect(flex1.flexGrow).toBe(1)
-        expect(flex1.flexShrink).toBe(1)
-        expect(flex1.flexBasis).toBe('0%')
+        const flex1Custom = getStylesFromId('flex-1-custom')
+        expect(flex1Custom.flexGrow).toBe(1)
+        expect(flex1Custom.flexShrink).toBe(1)
+        expect(flex1Custom.flexBasis).toBe('0%')
+        expect(getStylesFromId('flex-1').flex).toBe(1)
         expect(getStylesFromId('flex-row').flexDirection).toBe('row')
         expect(getStylesFromId('flex-col').flexDirection).toBe('column')
         expect(getStylesFromId('items-center').alignItems).toBe('center')
diff --git a/packages/uniwind/tests/test.css b/packages/uniwind/tests/test.css
index 3bd6f8b4..32ac20e7 100644
--- a/packages/uniwind/tests/test.css
+++ b/packages/uniwind/tests/test.css
@@ -33,3 +33,10 @@
 @utility multiple-transform {
   transform: translateX(10px) translateY(10px);
 }
+
+/* Verify if this doesn't get transformed to flex: 1 */
+@utility flex-1-custom {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 0%;
+}