fix: css properties with undefined custom property values

packages/@react-spectrum/utils/src/styleProps.ts

@@ -128,6 +128,10 @@ export function dimensionValue(value: DimensionValue) {
     return value + 'px';
   }
 
+  if (!value) {
+    return undefined;
+  }
+
   if (UNIT_RE.test(value)) {
     return value;
   }
@@ -154,10 +158,18 @@ function colorValue(value: ColorValue, type: ColorType = 'default', version = 5)
 }
 
 function backgroundColorValue(value: BackgroundColorValue, version = 5) {
+  if (!value) {
+    return undefined;
+  }
+
   return `var(--spectrum-alias-background-color-${value}, ${colorValue(value as ColorValue, 'background', version)})`;
 }
 
 function borderColorValue(value: BorderColorValue, version = 5) {
+  if (!value)  {
+    return undefined;
+  }
+
   if (value === 'default') {
     return 'var(--spectrum-alias-border-color)';
   }
@@ -172,6 +184,10 @@ function borderSizeValue(value?: BorderSizeValue | null) {
 }
 
 function borderRadiusValue(value: BorderRadiusValue) {
+  if (!value) {
+    return undefined;
+  }
+
   return `var(--spectrum-alias-border-radius-${value})`;
 }
 

packages/@react-spectrum/utils/test/styleProps.test.js

@@ -22,6 +22,13 @@ describe('styleProps', function () {
       });
     });
 
+    describe('falsy', function () {
+      it('""', function () {
+        let value = dimensionValue();
+        expect(value).toBe(undefined);
+      });
+    });
+
     describe('units', function () {
       it('px', function () {
         let value = dimensionValue('100px');
@@ -68,6 +75,51 @@ describe('styleProps', function () {
     });
   });
 
+  describe('backgroundColorValue', () => {
+    it('falsy', () => {
+      let style = convertStyleProps({backgroundColor: {S: 'gray-50'}}, viewStyleProps, 'ltr', ['base']);
+      expect(style.backgroundColor).toBe(undefined);
+    });
+    it('gray-50, version 5', () => {
+      let style = convertStyleProps({backgroundColor: {S: 'gray-50'}}, viewStyleProps, 'ltr', ['base', 'S']);
+      expect(style.backgroundColor).toBe('var(--spectrum-alias-background-color-gray-50, var(--spectrum-legacy-color-gray-50, var(--spectrum-global-color-gray-50, var(--spectrum-semantic-gray-50-color-background))))');
+    });
+    it('red-1400, version 6', () => {
+      let style = convertStyleProps({backgroundColor: {S: 'red-1400'}, colorVersion: 6}, viewStyleProps, 'ltr', ['base', 'S']);
+      expect(style.backgroundColor).toBe('var(--spectrum-alias-background-color-red-1400, var(--spectrum-red-1400, var(--spectrum-semantic-red-1400-color-background)))');
+    });
+  });
+
+  describe('borderColorValue', () => {
+    it('falsy', () => {
+      let style = convertStyleProps({borderColor: {S: 'gray-50'}}, viewStyleProps, 'ltr', ['base']);
+      expect(style.borderColor).toBe(undefined);
+    });
+    it('default', () => {
+      let style = convertStyleProps({borderColor: 'default'}, viewStyleProps, 'ltr', ['base']);
+      expect(style.borderColor).toBe('var(--spectrum-alias-border-color)');
+    });
+    it('gray-50, version 5', () => {
+      let style = convertStyleProps({borderColor: {S: 'gray-50'}}, viewStyleProps, 'ltr', ['base', 'S']);
+      expect(style.borderColor).toBe('var(--spectrum-alias-border-color-gray-50, var(--spectrum-legacy-color-gray-50, var(--spectrum-global-color-gray-50, var(--spectrum-semantic-gray-50-color-border))))');
+    });
+    it('red-1400, version 6', () => {
+      let style = convertStyleProps({borderColor: {S: 'red-1400'}, colorVersion: 6}, viewStyleProps, 'ltr', ['base', 'S']);
+      expect(style.borderColor).toBe('var(--spectrum-alias-border-color-red-1400, var(--spectrum-red-1400, var(--spectrum-semantic-red-1400-color-border)))');
+    });
+  });
+
+  describe('borderRadiusValue', () => {
+    it('falsy', () => {
+      let style = convertStyleProps({borderRadius: {S: 'small'}}, viewStyleProps, 'ltr', ['base']);
+      expect(style.borderRadius).toBe(undefined);
+    });
+    it('small', () => {
+      let style = convertStyleProps({borderRadius: {S: 'small'}}, viewStyleProps, 'ltr', ['base', 'S']);
+      expect(style.borderRadius).toBe('var(--spectrum-alias-border-radius-small)');
+    });
+  });
+
   describe('borderSizeValue', function () {
     it('should default to 0 if base is undefined', function () {
       let style = convertStyleProps({borderEndWidth: {S: 'thin'}}, viewStyleProps, 'ltr', ['base']);