feat: accept undefined value in the pattern

__tests__/parseValue.test.ts

@@ -20,6 +20,15 @@ describe('parse value tests', () => {
   it('should parse responsive height correctly', () => {
     expect(parseValue('10rh')).toEqual(rh(10));
   });
+  it('should parse responsive scale with undefined in the pattern correctly', () => {
+    expect(parseValue(`${undefined}rs`)).toBe(undefined);
+  });
+  it('should parse responsive width with undefined in the pattern correctly', () => {
+    expect(parseValue(`${undefined}rw`)).toBe(undefined);
+  });
+  it('should parse responsive height with undefined in the pattern correctly', () => {
+    expect(parseValue(`${undefined}rh`)).toBe(undefined);
+  });
   it('should parse values are float or have sign correctly', () => {
     expect(parseValue('+10rs')).toEqual(rs(10));
     expect(parseValue('-10rs')).toEqual(rs(-10));

src/layout/createRStyle/parseValue.ts

@@ -16,6 +16,9 @@ export const parseValue = (
     if (!executed) {
       return value;
     }
+    if (executed[1] === 'undefined') {
+      return undefined;
+    }
     const styleValue = parseFloat(executed[1] as string);
 
     const suffix = executed[4];

src/types.ts

@@ -44,7 +44,7 @@ export type NamedStyles<T> = {
     | WithPattern<ImageStyle>;
 };
 export type Pattern = 'rs' | 'rw' | 'rh';
-export type ResponsivePattern = `${number}${Pattern}`;
+export type ResponsivePattern = `${number | undefined}${Pattern}`;
 export type ValuePattern = string | number | ResponsivePattern;
 export type MethodType = 'linear' | 'recursive';
 export type CreateStyleConfig = {

src/utils/constants.ts

@@ -1 +1 @@
-export const PATTERN_REGEX = /^([+-]?\d+(\.\d+)?|(\.\d+))(rs|rw|rh)$/;
+export const PATTERN_REGEX = /^(undefined|[+-]?\d+(\.\d+)?|(\.\d+))(rs|rw|rh)$/;