feat: implement support for missing style properties

Author: 5ZYSZ3K

packages/css-processor/src/CSSNativeParseRun.ts

@@ -2,6 +2,7 @@ import { CSSParseRun } from './CSSParseRun';
 import { MixedStyleDeclaration } from './CSSProcessor';
 import { CSSPropertiesValidationRegistry } from './CSSPropertiesValidationRegistry';
 import { lookupRecord } from './helpers';
+import { ValidatorsType } from './makepropertiesValidators';
 import {
   ExtraNativeTextStyle,
   NativeDirectionalStyleKeys,
@@ -42,7 +43,15 @@ const extraLongViewStyles: Record<ExtraNativeLongViewStyleKeys, 'block'> = {
   shadowRadius: 'block',
   tintColor: 'block',
   transformMatrix: 'block',
-  translateX: 'block'
+  gap: 'block',
+  inset: 'block',
+  insetBlock: 'block',
+  insetInline: 'block',
+  paddingBlock: 'block',
+  paddingInline: 'block',
+  marginBlock: 'block',
+  marginInline: 'block',
+  objectFit: 'block'
 };
 
 const extraTextStyles: Record<keyof ExtraNativeTextStyle, 'text'> = {
@@ -72,16 +81,16 @@ export class CSSNativeParseRun extends CSSParseRun {
 
   private fillProp<K extends keyof MixedStyleDeclaration>(
     key: K,
-    value: any
+    value: MixedStyleDeclaration[K]
   ): void {
     const validator = this.validationMap.getValidatorForProperty(
-      String(key)
-    ) as any;
+      String(key) as keyof ValidatorsType
+    );
     if (validator && 'normalizeNativeValue' in validator) {
       const normalizedValue = validator.normalizeNativeValue(value);
       if (normalizedValue instanceof ShortMergeRequest) {
         normalizedValue.forEach(([innerKey, innerValue]) => {
-          this.fillProp(innerKey as any, innerValue);
+          this.fillProp(innerKey, innerValue);
         });
       } else {
         // assume longhand merge
@@ -112,10 +121,8 @@ export class CSSNativeParseRun extends CSSParseRun {
 
   protected fillProcessedProps(): void {
     const declaration = this.declaration;
-    for (const key of Object.keys(declaration) as Array<
-      keyof MixedStyleDeclaration
-    >) {
-      this.fillProp(key, this.declaration[key]);
+    for (const [key, value] of Object.entries(declaration)) {
+      this.fillProp(key as keyof MixedStyleDeclaration, value);
     }
   }
 }

packages/css-processor/src/makepropertiesValidators.ts

@@ -138,6 +138,46 @@ export default function makepropertiesValidators(config: CSSProcessorConfig) {
       model: nativeTranslatableBlockRetainModel,
       propertyName: 'flexFlow'
     }),
+    gap: new ShortFlexCSSPropertyValidator({
+      config,
+      propertyName: 'gap',
+      model: nativeTranslatableBlockRetainModel
+    }),
+    inset: new ShortFlexCSSPropertyValidator({
+      config,
+      propertyName: 'inset',
+      model: nativeTranslatableBlockRetainModel
+    }),
+    insetBlock: new ShortFlexCSSPropertyValidator({
+      config,
+      propertyName: 'insetBlock',
+      model: nativeTranslatableBlockRetainModel
+    }),
+    insetInline: new ShortFlexCSSPropertyValidator({
+      config,
+      propertyName: 'insetInline',
+      model: nativeTranslatableBlockRetainModel
+    }),
+    marginBlock: new ShortFlexCSSPropertyValidator({
+      config,
+      propertyName: 'marginBlock',
+      model: nativeTranslatableBlockRetainModel
+    }),
+    marginInline: new ShortFlexCSSPropertyValidator({
+      config,
+      propertyName: 'marginInline',
+      model: nativeTranslatableBlockRetainModel
+    }),
+    paddingBlock: new ShortFlexCSSPropertyValidator({
+      config,
+      propertyName: 'paddingBlock',
+      model: nativeTranslatableBlockRetainModel
+    }),
+    paddingInline: new ShortFlexCSSPropertyValidator({
+      config,
+      propertyName: 'paddingInline',
+      model: nativeTranslatableBlockRetainModel
+    }),
     font: new ShortFontCSSValidator({
       config,
       model: nativeTranslatableTextFlowModel,

packages/css-processor/src/native-types.ts

@@ -45,18 +45,7 @@ export type ExtraNativeUntranslatedLongStyles = Pick<
   CSSLongNativeUntranslatableBlockPropKey
 >;
 
-type YetUnimplementedNativeTextStyleKeys =
-  | 'translateY'
-  | 'borderCurve'
-  | 'gap'
-  | 'inset'
-  | 'insetBlock'
-  | 'insetInline'
-  | 'marginBlock'
-  | 'marginInline'
-  | 'paddingBlock'
-  | 'paddingInline'
-  | 'objectFit';
+type UnimplementedNativeStyleKeys = 'translateX' | 'translateY' | 'borderCurve';
 
 /**
  * Extraneous React Native ViewStyle keys.
@@ -66,7 +55,7 @@ export type ExtraNativeLongViewStyleKeys = Exclude<
   | CSSLongNativeBlockPropKey
   | NativeDirectionalStyleKeys
   | ExtraNativeShortViewStyleKeys
-  | YetUnimplementedNativeTextStyleKeys
+  | UnimplementedNativeStyleKeys
 >;
 
 /**