Merge pull request #7019 from backstage/rugvip/fonts

cli: added support for importing font files

.changeset/big-eyes-dance.md

@@ -0,0 +1,5 @@
+---
+'@backstage/cli': patch
+---
+
+Added support for importing font files. Imports in CSS via `url()` are supported for the final frontend bundle, but not for packages that are built for publishing. Module imports of fonts files from TypeScript are supported everywhere.

packages/cli/asset-types/asset-types.d.ts

@@ -68,6 +68,26 @@ declare module '*.svg' {
   export default src;
 }
 
+declare module '*.eot' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.woff' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.woff2' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.ttf' {
+  const src: string;
+  export default src;
+}
+
 declare module '*.css' {
   const classes: { readonly [key: string]: string };
   export default classes;

packages/cli/src/lib/builder/config.ts

@@ -80,7 +80,17 @@ export const makeConfigs = async (
         postcss(),
         forwardFileImports({
           exclude: /\.icon\.svg$/,
-          include: [/\.svg$/, /\.png$/, /\.gif$/, /\.jpg$/, /\.jpeg$/],
+          include: [
+            /\.svg$/,
+            /\.png$/,
+            /\.gif$/,
+            /\.jpg$/,
+            /\.jpeg$/,
+            /\.eot$/,
+            /\.woff$/,
+            /\.woff2$/,
+            /\.ttf$/,
+          ],
         }),
         json(),
         yaml(),

packages/cli/src/lib/bundler/transforms.ts

@@ -89,6 +89,17 @@ export const transforms = (options: TransformOptions): Transforms => {
         name: 'static/[name].[hash:8].[ext]',
       },
     },
+    {
+      test: /\.(eot|woff|woff2|ttf)$/,
+      use: [
+        {
+          loader: require.resolve('file-loader'),
+          options: {
+            name: 'static/[name].[hash:8].[ext]',
+          },
+        },
+      ],
+    },
     {
       test: /\.ya?ml$/,
       use: require.resolve('yml-loader'),