IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Esteban Beltran 2022-07-26 10:36:18 +02:00 committed by GitHub
parent c6340a8214
commit 8f4d924531
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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();
});
});
});
});

66
packages/grafana-toolkit/src/config/webpack/loaders.ts
View File

@ -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: [
shouldExtractCss
? {
loader: require.resolve('file-loader'),
options: {
outputPath: '/',
name: '[path][name].[ext]',
},
}
: // When using single css import images are inlined as base64 URIs in the result bundle
{
loader: 'url-loader',
},
],
type: 'asset/resource',
generator: {
publicPath: `img/`,
outputPath: 'img/',
},
},
{
test: /\.(woff|woff2|eot|ttf|otf)(\?v=\d+\.\d+\.\d+)?$/,
loader: require.resolve('file-loader'),
options: {
// Keep publicPath relative for host.com/grafana/ deployments
publicPath: `public/plugins/${getPluginId()}/fonts`,
outputPath: 'fonts',
name: '[name].[ext]',
type: 'asset/resource',
generator: {
publicPath: `fonts/`,
outputPath: 'fonts/',
},
},
];