Grafana/toolkit: Fix incorrect image and font generation for plugin builds (#52661)

packages/grafana-toolkit/src/config/webpack/loaders.test.ts

@@ -1,4 +1,4 @@
-import { getStylesheetEntries, hasThemeStylesheets } from './loaders';
+import { getStylesheetEntries } from './loaders';
 
 describe('Loaders', () => {
   describe('stylesheet helpers', () => {
@@ -22,28 +22,5 @@ describe('Loaders', () => {
         expect(result).toThrow();
       });
     });
-
-    describe('hasThemeStylesheets', () => {
-      it('throws when only one theme file is defined', () => {
-        const errorSpy = jest.spyOn(console, 'error').mockImplementation();
-        const result = () => {
-          hasThemeStylesheets(`${__dirname}/../mocks/stylesheetsSupport/missing-theme-file`);
-        };
-        expect(result).toThrow();
-        errorSpy.mockRestore();
-      });
-
-      it('returns false when no theme files present', () => {
-        const result = hasThemeStylesheets(`${__dirname}/../mocks/stylesheetsSupport/no-theme-files`);
-
-        expect(result).toBeFalsy();
-      });
-
-      it('returns true when theme files present', () => {
-        const result = hasThemeStylesheets(`${__dirname}/../mocks/stylesheetsSupport/ok`);
-
-        expect(result).toBeTruthy();
-      });
-    });
   });
 });

packages/grafana-toolkit/src/config/webpack/loaders.ts

@@ -1,8 +1,6 @@
 import fs from 'fs';
 import path from 'path';
 
-import { getPluginId } from '../utils/getPluginId';
-
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const supportedExtensions = ['css', 'scss', 'less', 'sass'];
@@ -33,39 +31,6 @@ export const getStylesheetEntries = (root: string = process.cwd()) => {
   return entries;
 };
 
-export const hasThemeStylesheets = (root: string = process.cwd()) => {
-  const stylesheetsPaths = getStylesheetPaths(root);
-  const stylesheetsSummary: boolean[] = [];
-
-  const result = stylesheetsPaths.reduce((acc, current) => {
-    if (fs.existsSync(`${current}.css`) || fs.existsSync(`${current}.scss`)) {
-      stylesheetsSummary.push(true);
-      return acc && true;
-    } else {
-      stylesheetsSummary.push(false);
-      return false;
-    }
-  }, true);
-
-  const hasMissingStylesheets = stylesheetsSummary.filter((s) => s).length === 1;
-
-  // seems like there is one theme file defined only
-  if (result === false && hasMissingStylesheets) {
-    console.error('\nWe think you want to specify theme stylesheet, but it seems like there is something missing...');
-    stylesheetsSummary.forEach((s, i) => {
-      if (s) {
-        console.log(stylesheetsPaths[i], 'discovered');
-      } else {
-        console.log(stylesheetsPaths[i], 'missing');
-      }
-    });
-
-    throw new Error('Stylesheet missing!');
-  }
-
-  return result;
-};
-
 export const getStyleLoaders = () => {
   const extractionLoader = {
     loader: MiniCssExtractPlugin.loader,
@@ -139,34 +104,21 @@ export const getStyleLoaders = () => {
 };
 
 export const getFileLoaders = () => {
-  const shouldExtractCss = hasThemeStylesheets();
-
   return [
     {
       test: /\.(png|jpe?g|gif|svg)$/,
-      use: [
+      type: 'asset/resource',
-        shouldExtractCss
+      generator: {
-          ? {
+        publicPath: `img/`,
-              loader: require.resolve('file-loader'),
+        outputPath: 'img/',
-              options: {
+      },
-                outputPath: '/',
-                name: '[path][name].[ext]',
-              },
-            }
-          : // When using single css import images are inlined as base64 URIs in the result bundle
-            {
-              loader: 'url-loader',
-            },
-      ],
     },
     {
       test: /\.(woff|woff2|eot|ttf|otf)(\?v=\d+\.\d+\.\d+)?$/,
-      loader: require.resolve('file-loader'),
+      type: 'asset/resource',
-      options: {
+      generator: {
-        // Keep publicPath relative for host.com/grafana/ deployments
+        publicPath: `fonts/`,
-        publicPath: `public/plugins/${getPluginId()}/fonts`,
+        outputPath: 'fonts/',
-        outputPath: 'fonts',
-        name: '[name].[ext]',
       },
     },
   ];