chore: handle typing for newer style properties

Author: wjkg

packages/css-processor/src/CSSNativeParseRun.ts

@@ -40,7 +40,6 @@ const extraLongViewStyles: Record<ExtraNativeLongViewStyleKeys, 'block'> = {
   shadowOffset: 'block',
   shadowOpacity: 'block',
   shadowRadius: 'block',
-  testID: 'block',
   tintColor: 'block',
   transformMatrix: 'block',
   translateX: 'block',

packages/css-processor/src/__tests__/CSSProcessor.test.ts

@@ -216,13 +216,13 @@ describe('CSSProcessor', () => {
     it('should pack known extra longhand properties', () => {
       expect(
         processor.compileStyleDeclaration({
-          testID: 'test'
+          tintColor: 'blue'
         })
       ).toMatchObject({
         native: {
           block: {
             retain: {
-              testID: 'test'
+              tintColor: 'blue'
             }
           }
         }

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

@@ -4,7 +4,8 @@ import {
   CSSLongNativeTextPropKey,
   NativeTextStyleKey,
   CSSShortPropsKey,
-  CSSLongNativeUntranslatableBlockPropKey
+  CSSLongNativeUntranslatableBlockPropKey,
+  CSSUnimplementedNativePropKey
 } from './property-types';
 
 export type ExtendedNativeViewStyleKeys = keyof ViewStyle | keyof ImageStyle;
@@ -35,6 +36,11 @@ export type ExtraNativeShortViewStyleKeys = Extract<
   | 'paddingVertical'
 >;
 
+export type NativeUnimplementedStyleKeys = Extract<
+  ExtendedNativeViewStyleKeys,
+  'borderCurve' | 'experimental_backgroundImage' | 'objectFit'
+>;
+
 export type ExtraNativeShortStyle = Pick<
   TextStyle & ViewStyle,
   ExtraNativeShortViewStyleKeys | NativeShortKeys
@@ -51,8 +57,10 @@ export type ExtraNativeUntranslatedLongStyles = Pick<
 export type ExtraNativeLongViewStyleKeys = Exclude<
   Exclude<ExtendedNativeViewStyleKeys, CSSShortPropsKey>,
   | CSSLongNativeBlockPropKey
+  | CSSUnimplementedNativePropKey
   | NativeDirectionalStyleKeys
   | ExtraNativeShortViewStyleKeys
+  | NativeUnimplementedStyleKeys
 >;
 
 /**
@@ -68,7 +76,9 @@ export type NativeShortKeys = Extract<
  */
 export type ExtraNativeTextStyleKeys = Exclude<
   Exclude<NativeTextStyleKey, CSSShortPropsKey>,
-  CSSLongNativeTextPropKey
+  | CSSLongNativeTextPropKey
+  | CSSUnimplementedNativePropKey
+  | NativeUnimplementedStyleKeys
 >;
 
 export type ExtraNativeTextStyle = Partial<

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

@@ -72,12 +72,61 @@ export type CSSFlowedPropKey = Extract<
   | 'wordSpacing'
 >;
 
+/**
+ * CSS properties supported by React Native, but not yet by the processor
+ */
+export type CSSUnimplementedNativePropKey = Extract<
+  keyof TextStyle | keyof ViewStyle,
+  | 'boxSizing'
+  | 'boxShadow'
+  | 'marginBlock'
+  | 'marginBlockEnd'
+  | 'marginBlockStart'
+  | 'marginInline'
+  | 'marginInlineEnd'
+  | 'marginInlineStart'
+  | 'paddingBlock'
+  | 'paddingBlockEnd'
+  | 'paddingBlockStart'
+  | 'paddingInline'
+  | 'paddingInlineEnd'
+  | 'paddingInlineStart'
+  | 'gap'
+  | 'columnGap'
+  | 'rowGap'
+  | 'borderBlockColor'
+  | 'borderBlockEndColor'
+  | 'borderBlockStartColor'
+  | 'borderEndEndRadius'
+  | 'borderEndStartRadius'
+  | 'borderStartEndRadius'
+  | 'borderStartStartRadius'
+  | 'filter'
+  | 'inset'
+  | 'insetBlock'
+  | 'insetBlockEnd'
+  | 'insetBlockStart'
+  | 'insetInline'
+  | 'insetInlineEnd'
+  | 'insetInlineStart'
+  | 'isolation'
+  | 'mixBlendMode'
+  | 'outlineColor'
+  | 'outlineOffset'
+  | 'outlineStyle'
+  | 'outlineWidth'
+  | 'pointerEvents'
+  | 'transformOrigin'
+  | 'cursor'
+  | 'verticalAlign'
+>;
+
 /**
  * Long, Native Text properties
  */
 export type CSSLongNativeTextPropKey = Extract<
   keyof StandardLonghandProperties,
-  NativeTextStyleKey
+  Exclude<NativeTextStyleKey, CSSUnimplementedNativePropKey>
 >;
 
 /**
@@ -169,7 +218,7 @@ export type CSSShortNativeTranslatableBlockPropKey = Exclude<
  */
 export type CSSLongNativeBlockPropKey = Extract<
   keyof StandardLonghandProperties | 'borderStyle',
-  keyof ViewStyle
+  Exclude<keyof ViewStyle, CSSUnimplementedNativePropKey>
 >;
 
 /**