From 6d4405bd7184d331035034ac0a54f1822142df51 Mon Sep 17 00:00:00 2001 From: ZuperZee Date: Thu, 6 Nov 2025 09:11:45 +0100 Subject: [PATCH 1/2] refac: use emotion for registering fonts Grafana plugin validator has 'no-direct-css-imports' rule: https://github.com/grafana/plugin-validator/blob/7be5debe7d9e2061c382b443ab1b149c59b87d8b/pkg/analysis/passes/coderules/semgrep-rules.yaml#L198 To follow that rule, use emotion to register the fonts instead of direct CSS imports. --- src/HTMLPanel.tsx | 46 +++++++++++++++++- src/fonts.scss | 31 ------------ src/{ => static}/fonts/OFL.txt | 0 src/{ => static}/fonts/OpenSans-Bold.woff2 | Bin src/{ => static}/fonts/OpenSans-Light.woff2 | Bin src/{ => static}/fonts/OpenSans-Regular.woff2 | Bin .../fonts/OpenSans-SemiBold.woff2 | Bin 7 files changed, 44 insertions(+), 33 deletions(-) delete mode 100644 src/fonts.scss rename src/{ => static}/fonts/OFL.txt (100%) rename src/{ => static}/fonts/OpenSans-Bold.woff2 (100%) rename src/{ => static}/fonts/OpenSans-Light.woff2 (100%) rename src/{ => static}/fonts/OpenSans-Regular.woff2 (100%) rename src/{ => static}/fonts/OpenSans-SemiBold.woff2 (100%) diff --git a/src/HTMLPanel.tsx b/src/HTMLPanel.tsx index 920d00b..c16fa64 100755 --- a/src/HTMLPanel.tsx +++ b/src/HTMLPanel.tsx @@ -8,8 +8,6 @@ import { } from '@grafana/data'; import { config, getTemplateSrv, getLocationSrv, locationService } from '@grafana/runtime'; import { OptionsInterface, CalcsMutation, ErrorObj, HTMLNodeElement } from 'types'; -import 'fonts.scss'; -import 'fonts/OFL.txt'; import { parseJSON } from 'utils/parseJSON'; import _ from 'lodash'; import { Errors } from 'components/Errors'; @@ -19,6 +17,7 @@ import { triggerPanelwillunmount } from 'utils/events/panelwillunmount'; import { addHtml } from 'utils/addHtml'; import { CustomScrollbar, ScrollContainer } from '@grafana/ui'; import semver from 'semver'; +import { css } from '@emotion/css'; interface Props extends PanelProps {} interface PanelState { @@ -299,6 +298,8 @@ export class HTMLPanel extends PureComponent { options: { useGrafanaScrollbar, overflow }, } = this.props; + registerFonts(); + return ( <>
@@ -322,3 +323,44 @@ export class HTMLPanel extends PureComponent { ); } } + +function registerFonts() { + css([ + { + '@font-face': { + fontFamily: 'Open Sans', + src: `url('${__webpack_public_path__}static/fonts/OpenSans-Light.woff2') format('woff2')`, + fontWeight: '300', + fontStyle: 'normal', + fontDisplay: 'swap', + }, + }, + { + '@font-face': { + fontFamily: 'Open Sans', + src: `url('${__webpack_public_path__}static/fonts/OpenSans-Regular.woff2') format('woff2')`, + fontWeight: 'normal', + fontStyle: 'normal', + fontDisplay: 'swap', + }, + }, + { + '@font-face': { + fontFamily: 'Open Sans', + src: `url('${__webpack_public_path__}static/fonts/OpenSans-SemiBold.woff2') format('woff2')`, + fontWeight: '600', + fontStyle: 'normal', + fontDisplay: 'swap', + }, + }, + { + '@font-face': { + fontFamily: 'Open Sans', + src: `url('${__webpack_public_path__}static/fonts/OpenSans-Bold.woff2') format('woff2')`, + fontWeight: 'bold', + fontStyle: 'normal', + fontDisplay: 'swap', + }, + }, + ]); +} diff --git a/src/fonts.scss b/src/fonts.scss deleted file mode 100644 index 365fab2..0000000 --- a/src/fonts.scss +++ /dev/null @@ -1,31 +0,0 @@ -@font-face { - font-family: 'Open Sans'; - src: url('fonts/OpenSans-Light.woff2') format('woff2'); - font-weight: 300; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Open Sans'; - src: url('fonts/OpenSans-Regular.woff2') format('woff2'); - font-weight: normal; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Open Sans'; - src: url('fonts/OpenSans-SemiBold.woff2') format('woff2'); - font-weight: 600; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Open Sans'; - src: url('fonts/OpenSans-Bold.woff2') format('woff2'); - font-weight: bold; - font-style: normal; - font-display: swap; -} diff --git a/src/fonts/OFL.txt b/src/static/fonts/OFL.txt similarity index 100% rename from src/fonts/OFL.txt rename to src/static/fonts/OFL.txt diff --git a/src/fonts/OpenSans-Bold.woff2 b/src/static/fonts/OpenSans-Bold.woff2 similarity index 100% rename from src/fonts/OpenSans-Bold.woff2 rename to src/static/fonts/OpenSans-Bold.woff2 diff --git a/src/fonts/OpenSans-Light.woff2 b/src/static/fonts/OpenSans-Light.woff2 similarity index 100% rename from src/fonts/OpenSans-Light.woff2 rename to src/static/fonts/OpenSans-Light.woff2 diff --git a/src/fonts/OpenSans-Regular.woff2 b/src/static/fonts/OpenSans-Regular.woff2 similarity index 100% rename from src/fonts/OpenSans-Regular.woff2 rename to src/static/fonts/OpenSans-Regular.woff2 diff --git a/src/fonts/OpenSans-SemiBold.woff2 b/src/static/fonts/OpenSans-SemiBold.woff2 similarity index 100% rename from src/fonts/OpenSans-SemiBold.woff2 rename to src/static/fonts/OpenSans-SemiBold.woff2 From 2f952546b4466f72e67b8725f592793dd95fd0ab Mon Sep 17 00:00:00 2001 From: ZuperZee Date: Mon, 10 Nov 2025 07:33:41 +0100 Subject: [PATCH 2/2] refac: only register fonts when module is loaded Instead of registering the font on every render, it now only registers the fonts when the module is loaded. --- src/HTMLPanel.tsx | 45 +------------------------------------------- src/registerFonts.ts | 45 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 46 insertions(+), 44 deletions(-) create mode 100644 src/registerFonts.ts diff --git a/src/HTMLPanel.tsx b/src/HTMLPanel.tsx index c16fa64..cc0246a 100755 --- a/src/HTMLPanel.tsx +++ b/src/HTMLPanel.tsx @@ -17,7 +17,7 @@ import { triggerPanelwillunmount } from 'utils/events/panelwillunmount'; import { addHtml } from 'utils/addHtml'; import { CustomScrollbar, ScrollContainer } from '@grafana/ui'; import semver from 'semver'; -import { css } from '@emotion/css'; +import './registerFonts'; interface Props extends PanelProps {} interface PanelState { @@ -298,8 +298,6 @@ export class HTMLPanel extends PureComponent { options: { useGrafanaScrollbar, overflow }, } = this.props; - registerFonts(); - return ( <>
@@ -323,44 +321,3 @@ export class HTMLPanel extends PureComponent { ); } } - -function registerFonts() { - css([ - { - '@font-face': { - fontFamily: 'Open Sans', - src: `url('${__webpack_public_path__}static/fonts/OpenSans-Light.woff2') format('woff2')`, - fontWeight: '300', - fontStyle: 'normal', - fontDisplay: 'swap', - }, - }, - { - '@font-face': { - fontFamily: 'Open Sans', - src: `url('${__webpack_public_path__}static/fonts/OpenSans-Regular.woff2') format('woff2')`, - fontWeight: 'normal', - fontStyle: 'normal', - fontDisplay: 'swap', - }, - }, - { - '@font-face': { - fontFamily: 'Open Sans', - src: `url('${__webpack_public_path__}static/fonts/OpenSans-SemiBold.woff2') format('woff2')`, - fontWeight: '600', - fontStyle: 'normal', - fontDisplay: 'swap', - }, - }, - { - '@font-face': { - fontFamily: 'Open Sans', - src: `url('${__webpack_public_path__}static/fonts/OpenSans-Bold.woff2') format('woff2')`, - fontWeight: 'bold', - fontStyle: 'normal', - fontDisplay: 'swap', - }, - }, - ]); -} diff --git a/src/registerFonts.ts b/src/registerFonts.ts new file mode 100644 index 0000000..17dcfd7 --- /dev/null +++ b/src/registerFonts.ts @@ -0,0 +1,45 @@ +import { css } from '@emotion/css'; + +function registerFonts() { + css([ + { + '@font-face': { + fontFamily: 'Open Sans', + src: `url('${__webpack_public_path__}static/fonts/OpenSans-Light.woff2') format('woff2')`, + fontWeight: '300', + fontStyle: 'normal', + fontDisplay: 'swap', + }, + }, + { + '@font-face': { + fontFamily: 'Open Sans', + src: `url('${__webpack_public_path__}static/fonts/OpenSans-Regular.woff2') format('woff2')`, + fontWeight: 'normal', + fontStyle: 'normal', + fontDisplay: 'swap', + }, + }, + { + '@font-face': { + fontFamily: 'Open Sans', + src: `url('${__webpack_public_path__}static/fonts/OpenSans-SemiBold.woff2') format('woff2')`, + fontWeight: '600', + fontStyle: 'normal', + fontDisplay: 'swap', + }, + }, + { + '@font-face': { + fontFamily: 'Open Sans', + src: `url('${__webpack_public_path__}static/fonts/OpenSans-Bold.woff2') format('woff2')`, + fontWeight: 'bold', + fontStyle: 'normal', + fontDisplay: 'swap', + }, + }, + ]); +} + +// Register fonts when module is loaded +registerFonts();