[styles] Add typings for font-face (#16639)

mui · Jul 19, 2019 · 6200f48 · 6200f48
1 parent 827728d
commit 6200f48
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 1 deletion.
diff --git a/packages/material-ui-styles/src/createStyles/createStyles.spec.ts b/packages/material-ui-styles/src/createStyles/createStyles.spec.ts
@@ -0,0 +1,34 @@
+import { createStyles } from '@material-ui/styles';
+
+{
+  // Missing types for @font-face
+  // https://github.com/mui-org/material-ui/issues/15771
+
+  // Object
+  createStyles({
+    '@global': {
+      '@font-face': {
+        fontFamily: '...',
+        src: '...',
+        fallbacks: [{ fontFamily: '...', src: '...' }],
+      },
+    },
+  });
+
+  // Array
+  createStyles({
+    '@global': {
+      '@font-face': [
+        {
+          fontFamily: '...',
+          src: '...',
+          fallbacks: [{ fontFamily: '...', src: '...' }],
+        },
+        {
+          fontFamily: '...',
+          src: '...',
+        },
+      ],
+    },
+  });
+}
diff --git a/packages/material-ui-styles/src/withStyles/withStyles.d.ts b/packages/material-ui-styles/src/withStyles/withStyles.d.ts
@@ -3,10 +3,17 @@ import { PropInjector, CoerceEmptyInterface, IsEmptyInterface } from '@material-
 import * as CSS from 'csstype';
 import * as JSS from 'jss';
 
+// Disable automatic export
+export {};
+
+type JSSFontface = CSS.FontFace & { fallbacks?: CSS.FontFace[] };
+
 /**
  * Allows the user to augment the properties available
  */
-export interface BaseCSSProperties extends CSS.Properties<number | string> {}
+export interface BaseCSSProperties extends CSS.Properties<number | string> {
+  '@font-face'?: JSSFontface | JSSFontface[];
+}
 
 export interface CSSProperties extends BaseCSSProperties {
   // Allow pseudo selectors and media queries