Support VendorProperties in types

Author: hasparus

packages/css/src/types.ts

@@ -22,7 +22,9 @@ export type ResponsiveStyleValue<T> = T | Array<T | null>
  */
 export interface CSSProperties
   extends CSS.StandardProperties<number | string>,
-    CSS.SvgProperties<number | string> {}
+    CSS.SvgProperties<number | string>,
+    CSS.VendorProperties<number | string> 
+    {}
 
 /**
  * Map of all CSS pseudo selectors (`:hover`, `:focus`, ...)

packages/css/test/index.ts

@@ -196,7 +196,7 @@ test('works with the css prop', () => {
 })
 
 test('works with functional arguments', () => {
-  const result = css(t => ({
+  const result = css((t) => ({
     color: t.colors.primary,
   }))(theme)
   expect(result).toEqual({
@@ -206,7 +206,7 @@ test('works with functional arguments', () => {
 
 test('supports functional values', () => {
   const result = css({
-    color: t => t.colors.primary,
+    color: (t) => t.colors.primary,
   })(theme)
   expect(result).toEqual({
     color: 'tomato',
@@ -285,7 +285,7 @@ test('handles negative margins from scale that is an object', () => {
   const result = css({
     mt: '-s',
     mx: '-m',
-  })({...theme, space: { s: '16px', m: '32px' }})
+  })({ ...theme, space: { s: '16px', m: '32px' } })
   expect(result).toEqual({
     marginTop: '-16px',
     marginLeft: '-32px',
@@ -344,7 +344,7 @@ test('ignores array values longer than breakpoints', () => {
 
 test('functional values can return responsive arrays', () => {
   const result = css({
-    color: t => [t.colors.primary, t.colors.secondary],
+    color: (t) => [t.colors.primary, t.colors.secondary],
   })(theme)
   expect(result).toEqual({
     '@media screen and (min-width: 40em)': {
@@ -494,3 +494,9 @@ test('returns correct media query order 2', () => {
     'paddingBottom',
   ])
 })
+
+test('supports vendor properties', () => {
+  expect(css({ WebkitOverflowScrolling: 'touch' })(theme)).toStrictEqual({
+    WebkitOverflowScrolling: 'touch',
+  })
+})

packages/sidenav/src/index.tsx

@@ -130,7 +130,7 @@ export const Sidenav = forwardRef<
             transition: 'transform .2s ease-out',
             transform: [open ? 'translateX(0)' : 'translate(-100%)', 'none'],
             bg: ['background', 'transparent'],
-            ...{ WebkitOverflowScrolling: 'touch' },
+            WebkitOverflowScrolling: 'touch',
           }}
         />
       </MDXProvider>
@@ -267,7 +267,7 @@ export const AccordionNav = forwardRef<
             transition: 'transform .2s ease-out',
             transform: [open ? 'translateX(0)' : 'translate(-100%)', 'none'],
             bg: ['background', 'transparent'],
-            ...{ WebkitOverflowScrolling: 'touch' },
+            WebkitOverflowScrolling: 'touch',
           }}>
           <ul
             sx={{