fix: dont parse flex: 1

packages/uniwind/src/bundler/css-processor/css.ts

@@ -2,16 +2,16 @@ 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 {
     private readonly logger = new Logger('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)) {

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)

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
 }

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')

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%;
+}