From b68f40d5c583ef3eb5b7d8f1877065aebd5a4dd0 Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Tue, 7 May 2024 10:11:49 +0100
Subject: [PATCH] Chore: Rewrite grafana-prometheus css using object styles
 (#86835)

---
 .betterer.results                             | 120 +----------
 .../src/components/PromExemplarField.tsx      |  20 +-
 .../src/components/PromExploreExtraField.tsx  |  12 +-
 .../components/PrometheusMetricsBrowser.tsx   | 136 ++++++-------
 .../monaco-query-field/MonacoQueryField.tsx   |  22 +--
 .../src/configuration/ConfigEditor.tsx        |  98 ++++-----
 .../src/configuration/ExemplarsSettings.tsx   |   6 +-
 .../src/querybuilder/QueryPattern.tsx         |  32 +--
 .../src/querybuilder/QueryPatternsModal.tsx   |  18 +-
 .../querybuilder/components/LabelFilters.tsx  |   8 +-
 .../querybuilder/components/MetricSelect.tsx  |  94 ++++-----
 .../components/PromQueryCodeEditor.tsx        |  10 +-
 .../metrics-modal/AdditionalSettings.tsx      |  30 +--
 .../components/metrics-modal/ResultsTable.tsx | 122 ++++++------
 .../components/metrics-modal/styles.ts        | 186 +++++++++---------
 .../querybuilder/shared/QueryBuilderHints.tsx |  14 +-
 16 files changed, 406 insertions(+), 522 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index 26c4772289c..3e0046c904c 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -460,15 +460,6 @@ exports[`better eslint`] = {
     "packages/grafana-o11y-ds-frontend/src/utils.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
-    "packages/grafana-prometheus/src/components/PromExemplarField.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"]
-    ],
-    "packages/grafana-prometheus/src/components/PromExploreExtraField.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
     "packages/grafana-prometheus/src/components/PromQueryField.test.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
@@ -476,44 +467,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
     "packages/grafana-prometheus/src/components/PrometheusMetricsBrowser.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"],
-      [0, 0, 0, "Styles should be written using objects.", "4"],
-      [0, 0, 0, "Styles should be written using objects.", "5"],
-      [0, 0, 0, "Styles should be written using objects.", "6"],
-      [0, 0, 0, "Styles should be written using objects.", "7"],
-      [0, 0, 0, "Styles should be written using objects.", "8"],
-      [0, 0, 0, "Styles should be written using objects.", "9"],
-      [0, 0, 0, "Styles should be written using objects.", "10"],
-      [0, 0, 0, "Styles should be written using objects.", "11"],
-      [0, 0, 0, "Styles should be written using objects.", "12"]
-    ],
-    "packages/grafana-prometheus/src/components/monaco-query-field/MonacoQueryField.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
-    "packages/grafana-prometheus/src/configuration/ConfigEditor.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"],
-      [0, 0, 0, "Styles should be written using objects.", "4"],
-      [0, 0, 0, "Styles should be written using objects.", "5"],
-      [0, 0, 0, "Styles should be written using objects.", "6"],
-      [0, 0, 0, "Styles should be written using objects.", "7"],
-      [0, 0, 0, "Styles should be written using objects.", "8"],
-      [0, 0, 0, "Styles should be written using objects.", "9"],
-      [0, 0, 0, "Styles should be written using objects.", "10"],
-      [0, 0, 0, "Styles should be written using objects.", "11"],
-      [0, 0, 0, "Styles should be written using objects.", "12"],
-      [0, 0, 0, "Styles should be written using objects.", "13"],
-      [0, 0, 0, "Styles should be written using objects.", "14"],
-      [0, 0, 0, "Styles should be written using objects.", "15"]
-    ],
-    "packages/grafana-prometheus/src/configuration/ExemplarsSettings.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
+      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
     ],
     "packages/grafana-prometheus/src/datasource.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@@ -555,87 +509,21 @@ exports[`better eslint`] = {
     "packages/grafana-prometheus/src/language_utils.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
-    "packages/grafana-prometheus/src/querybuilder/QueryPattern.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"]
-    ],
-    "packages/grafana-prometheus/src/querybuilder/QueryPatternsModal.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
     "packages/grafana-prometheus/src/querybuilder/components/LabelFilterItem.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"],
       [0, 0, 0, "Do not use any type assertions.", "2"],
       [0, 0, 0, "Do not use any type assertions.", "3"]
     ],
-    "packages/grafana-prometheus/src/querybuilder/components/LabelFilters.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
     "packages/grafana-prometheus/src/querybuilder/components/LabelParamEditor.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
     "packages/grafana-prometheus/src/querybuilder/components/MetricSelect.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"],
-      [0, 0, 0, "Styles should be written using objects.", "4"],
-      [0, 0, 0, "Styles should be written using objects.", "5"],
-      [0, 0, 0, "Styles should be written using objects.", "6"],
-      [0, 0, 0, "Styles should be written using objects.", "7"],
-      [0, 0, 0, "Styles should be written using objects.", "8"],
-      [0, 0, 0, "Styles should be written using objects.", "9"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
     "packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilder.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
-    "packages/grafana-prometheus/src/querybuilder/components/PromQueryCodeEditor.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
-    "packages/grafana-prometheus/src/querybuilder/components/metrics-modal/AdditionalSettings.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"]
-    ],
-    "packages/grafana-prometheus/src/querybuilder/components/metrics-modal/ResultsTable.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"],
-      [0, 0, 0, "Styles should be written using objects.", "4"],
-      [0, 0, 0, "Styles should be written using objects.", "5"],
-      [0, 0, 0, "Styles should be written using objects.", "6"],
-      [0, 0, 0, "Styles should be written using objects.", "7"],
-      [0, 0, 0, "Styles should be written using objects.", "8"],
-      [0, 0, 0, "Styles should be written using objects.", "9"],
-      [0, 0, 0, "Styles should be written using objects.", "10"],
-      [0, 0, 0, "Styles should be written using objects.", "11"],
-      [0, 0, 0, "Styles should be written using objects.", "12"]
-    ],
-    "packages/grafana-prometheus/src/querybuilder/components/metrics-modal/styles.ts:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"],
-      [0, 0, 0, "Styles should be written using objects.", "4"],
-      [0, 0, 0, "Styles should be written using objects.", "5"],
-      [0, 0, 0, "Styles should be written using objects.", "6"],
-      [0, 0, 0, "Styles should be written using objects.", "7"],
-      [0, 0, 0, "Styles should be written using objects.", "8"],
-      [0, 0, 0, "Styles should be written using objects.", "9"],
-      [0, 0, 0, "Styles should be written using objects.", "10"],
-      [0, 0, 0, "Styles should be written using objects.", "11"],
-      [0, 0, 0, "Styles should be written using objects.", "12"],
-      [0, 0, 0, "Styles should be written using objects.", "13"],
-      [0, 0, 0, "Styles should be written using objects.", "14"],
-      [0, 0, 0, "Styles should be written using objects.", "15"],
-      [0, 0, 0, "Styles should be written using objects.", "16"],
-      [0, 0, 0, "Styles should be written using objects.", "17"],
-      [0, 0, 0, "Styles should be written using objects.", "18"]
-    ],
     "packages/grafana-prometheus/src/querybuilder/shared/OperationEditor.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
@@ -643,10 +531,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"]
     ],
-    "packages/grafana-prometheus/src/querybuilder/shared/QueryBuilderHints.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
     "packages/grafana-prometheus/src/querybuilder/shared/types.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
diff --git a/packages/grafana-prometheus/src/components/PromExemplarField.tsx b/packages/grafana-prometheus/src/components/PromExemplarField.tsx
index 8b300687dad..2431d37cf63 100644
--- a/packages/grafana-prometheus/src/components/PromExemplarField.tsx
+++ b/packages/grafana-prometheus/src/components/PromExemplarField.tsx
@@ -66,15 +66,15 @@ export function PromExemplarField({ datasource, onChange, query, ...rest }: Prop
 
 function getStyles(theme: GrafanaTheme2) {
   return {
-    eyeIcon: css`
-      margin-left: ${theme.spacing(2)};
-    `,
-    activeIcon: css`
-      color: ${theme.colors.primary.main};
-    `,
-    iconWrapper: css`
-      display: flex;
-      align-items: center;
-    `,
+    eyeIcon: css({
+      marginLeft: theme.spacing(2),
+    }),
+    activeIcon: css({
+      color: theme.colors.primary.main,
+    }),
+    iconWrapper: css({
+      display: 'flex',
+      alignItems: 'center',
+    }),
   };
 }
diff --git a/packages/grafana-prometheus/src/components/PromExploreExtraField.tsx b/packages/grafana-prometheus/src/components/PromExploreExtraField.tsx
index 0d3fa86a1b4..a202786e14a 100644
--- a/packages/grafana-prometheus/src/components/PromExploreExtraField.tsx
+++ b/packages/grafana-prometheus/src/components/PromExploreExtraField.tsx
@@ -60,9 +60,9 @@ export const PromExploreExtraField = memo(({ query, datasource, onChange, onRunQ
         data-testid={promExploreExtraFieldTestIds.queryTypeField}
         className={cx(
           'gf-form explore-input-margin',
-          css`
-            flex-wrap: nowrap;
-          `
+          css({
+            flexWrap: 'nowrap',
+          })
         )}
         aria-label="Query type field"
       >
@@ -79,9 +79,9 @@ export const PromExploreExtraField = memo(({ query, datasource, onChange, onRunQ
         data-testid={promExploreExtraFieldTestIds.stepField}
         className={cx(
           'gf-form',
-          css`
-            flex-wrap: nowrap;
-          `
+          css({
+            flexWrap: 'nowrap',
+          })
         )}
         aria-label="Step field"
       >
diff --git a/packages/grafana-prometheus/src/components/PrometheusMetricsBrowser.tsx b/packages/grafana-prometheus/src/components/PrometheusMetricsBrowser.tsx
index e58a57c9323..b5136a8ca7b 100644
--- a/packages/grafana-prometheus/src/components/PrometheusMetricsBrowser.tsx
+++ b/packages/grafana-prometheus/src/components/PrometheusMetricsBrowser.tsx
@@ -116,75 +116,75 @@ export function facetLabels(
 }
 
 const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
-  wrapper: css`
-    background-color: ${theme.colors.background.secondary};
-    padding: ${theme.spacing(1)};
-    width: 100%;
-  `,
-  list: css`
-    margin-top: ${theme.spacing(1)};
-    display: flex;
-    flex-wrap: wrap;
-    max-height: 200px;
-    overflow: auto;
-    align-content: flex-start;
-  `,
-  section: css`
-    & + & {
-      margin: ${theme.spacing(2)} 0;
-    }
-    position: relative;
-  `,
-  selector: css`
-    font-family: ${theme.typography.fontFamilyMonospace};
-    margin-bottom: ${theme.spacing(1)};
-  `,
-  status: css`
-    padding: ${theme.spacing(0.5)};
-    color: ${theme.colors.text.secondary};
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  wrapper: css({
+    backgroundColor: theme.colors.background.secondary,
+    padding: theme.spacing(1),
+    width: '100%',
+  }),
+  list: css({
+    marginTop: theme.spacing(1),
+    display: 'flex',
+    flexWrap: 'wrap',
+    maxHeight: '200px',
+    overflow: 'auto',
+    alignContent: 'flex-start',
+  }),
+  section: css({
+    '& + &': {
+      margin: `${theme.spacing(2)} 0`,
+    },
+    position: 'relative',
+  }),
+  selector: css({
+    fontFamily: theme.typography.fontFamilyMonospace,
+    marginBottom: theme.spacing(1),
+  }),
+  status: css({
+    padding: theme.spacing(0.5),
+    color: theme.colors.text.secondary,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
     /* using absolute positioning because flex interferes with ellipsis */
-    position: absolute;
-    width: 50%;
-    right: 0;
-    text-align: right;
-    transition: opacity 100ms linear;
-    opacity: 0;
-  `,
-  statusShowing: css`
-    opacity: 1;
-  `,
-  error: css`
-    color: ${theme.colors.error.main};
-  `,
-  valueList: css`
-    margin-right: ${theme.spacing(1)};
-    resize: horizontal;
-  `,
-  valueListWrapper: css`
-    border-left: 1px solid ${theme.colors.border.medium};
-    margin: ${theme.spacing(1)} 0;
-    padding: ${theme.spacing(1)} 0 ${theme.spacing(1)} ${theme.spacing(1)};
-  `,
-  valueListArea: css`
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: ${theme.spacing(1)};
-  `,
-  valueTitle: css`
-    margin-left: -${theme.spacing(0.5)};
-    margin-bottom: ${theme.spacing(1)};
-  `,
-  validationStatus: css`
-    padding: ${theme.spacing(0.5)};
-    margin-bottom: ${theme.spacing(1)};
-    color: ${theme.colors.text.maxContrast};
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  `,
+    position: 'absolute',
+    width: '50%',
+    right: 0,
+    textAlign: 'right',
+    transition: 'opacity 100ms linear',
+    opacity: 0,
+  }),
+  statusShowing: css({
+    opacity: 1,
+  }),
+  error: css({
+    color: theme.colors.error.main,
+  }),
+  valueList: css({
+    marginRight: theme.spacing(1),
+    resize: 'horizontal',
+  }),
+  valueListWrapper: css({
+    borderLeft: `1px solid ${theme.colors.border.medium}`,
+    margin: `${theme.spacing(1)} 0`,
+    padding: `${theme.spacing(1)} 0 ${theme.spacing(1)} ${theme.spacing(1)}`,
+  }),
+  valueListArea: css({
+    display: 'flex',
+    flexWrap: 'wrap',
+    marginTop: theme.spacing(1),
+  }),
+  valueTitle: css({
+    marginLeft: `-${theme.spacing(0.5)}`,
+    marginBottom: theme.spacing(1),
+  }),
+  validationStatus: css({
+    padding: theme.spacing(0.5),
+    marginBottom: theme.spacing(1),
+    color: theme.colors.text.maxContrast,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  }),
 }));
 
 /**
diff --git a/packages/grafana-prometheus/src/components/monaco-query-field/MonacoQueryField.tsx b/packages/grafana-prometheus/src/components/monaco-query-field/MonacoQueryField.tsx
index c0b3acbd2fc..b3c3f8e9d88 100644
--- a/packages/grafana-prometheus/src/components/monaco-query-field/MonacoQueryField.tsx
+++ b/packages/grafana-prometheus/src/components/monaco-query-field/MonacoQueryField.tsx
@@ -80,17 +80,17 @@ function ensurePromQL(monaco: Monaco) {
 
 const getStyles = (theme: GrafanaTheme2, placeholder: string) => {
   return {
-    container: css`
-      border-radius: ${theme.shape.radius.default};
-      border: 1px solid ${theme.components.input.borderColor};
-    `,
-    placeholder: css`
-      ::after {
-        content: '${placeholder}';
-        font-family: ${theme.typography.fontFamilyMonospace};
-        opacity: 0.6;
-      }
-    `,
+    container: css({
+      borderRadius: theme.shape.radius.default,
+      border: `1px solid ${theme.components.input.borderColor}`,
+    }),
+    placeholder: css({
+      '::after': {
+        content: `'${placeholder}'`,
+        fontFamily: theme.typography.fontFamilyMonospace,
+        opacity: 0.6,
+      },
+    }),
   };
 };
 
diff --git a/packages/grafana-prometheus/src/configuration/ConfigEditor.tsx b/packages/grafana-prometheus/src/configuration/ConfigEditor.tsx
index 28355af85be..b5818b34b12 100644
--- a/packages/grafana-prometheus/src/configuration/ConfigEditor.tsx
+++ b/packages/grafana-prometheus/src/configuration/ConfigEditor.tsx
@@ -87,54 +87,54 @@ export const validateInput = (
 
 export function overhaulStyles(theme: GrafanaTheme2) {
   return {
-    additionalSettings: css`
-      margin-bottom: 25px;
-    `,
-    secondaryGrey: css`
-      color: ${theme.colors.secondary.text};
-      opacity: 65%;
-    `,
-    inlineError: css`
-      margin: 0px 0px 4px 245px;
-    `,
-    switchField: css`
-      align-items: center;
-    `,
-    sectionHeaderPadding: css`
-      padding-top: 32px;
-    `,
-    sectionBottomPadding: css`
-      padding-bottom: 28px;
-    `,
-    subsectionText: css`
-      font-size: 12px;
-    `,
-    hrBottomSpace: css`
-      margin-bottom: 56px;
-    `,
-    hrTopSpace: css`
-      margin-top: 50px;
-    `,
-    textUnderline: css`
-      text-decoration: underline;
-    `,
-    versionMargin: css`
-      margin-bottom: 12px;
-    `,
-    advancedHTTPSettingsMargin: css`
-      margin: 24px 0 8px 0;
-    `,
-    advancedSettings: css`
-      padding-top: 32px;
-    `,
-    alertingTop: css`
-      margin-top: 40px !important;
-    `,
-    overhaulPageHeading: css`
-      font-weight: 400;
-    `,
-    container: css`
-      maxwidth: 578;
-    `,
+    additionalSettings: css({
+      marginBottom: '25px',
+    }),
+    secondaryGrey: css({
+      color: theme.colors.secondary.text,
+      opacity: '65%',
+    }),
+    inlineError: css({
+      margin: '0px 0px 4px 245px',
+    }),
+    switchField: css({
+      alignItems: 'center',
+    }),
+    sectionHeaderPadding: css({
+      paddingTop: '32px',
+    }),
+    sectionBottomPadding: css({
+      paddingBottom: '28px',
+    }),
+    subsectionText: css({
+      fontSize: '12px',
+    }),
+    hrBottomSpace: css({
+      marginBottom: '56px',
+    }),
+    hrTopSpace: css({
+      marginTop: '50px',
+    }),
+    textUnderline: css({
+      textDecoration: 'underline',
+    }),
+    versionMargin: css({
+      marginBottom: '12px',
+    }),
+    advancedHTTPSettingsMargin: css({
+      margin: '24px 0 8px 0',
+    }),
+    advancedSettings: css({
+      paddingTop: '32px',
+    }),
+    alertingTop: css({
+      marginTop: '40px !important',
+    }),
+    overhaulPageHeading: css({
+      fontWeight: 400,
+    }),
+    container: css({
+      maxwidth: 578,
+    }),
   };
 }
diff --git a/packages/grafana-prometheus/src/configuration/ExemplarsSettings.tsx b/packages/grafana-prometheus/src/configuration/ExemplarsSettings.tsx
index 24ad9a5d1ad..b0868370695 100644
--- a/packages/grafana-prometheus/src/configuration/ExemplarsSettings.tsx
+++ b/packages/grafana-prometheus/src/configuration/ExemplarsSettings.tsx
@@ -48,9 +48,9 @@ export function ExemplarsSettings({ options, onChange, disabled }: Props) {
           <Button
             variant="secondary"
             data-testid={selectors.components.DataSource.Prometheus.configPage.exemplarsAddButton}
-            className={css`
-              margin-bottom: 10px;
-            `}
+            className={css({
+              marginBottom: '10px',
+            })}
             icon="plus"
             onClick={(event) => {
               event.preventDefault();
diff --git a/packages/grafana-prometheus/src/querybuilder/QueryPattern.tsx b/packages/grafana-prometheus/src/querybuilder/QueryPattern.tsx
index a332a7f2da4..5f4507f1cd4 100644
--- a/packages/grafana-prometheus/src/querybuilder/QueryPattern.tsx
+++ b/packages/grafana-prometheus/src/querybuilder/QueryPattern.tsx
@@ -99,21 +99,21 @@ export const QueryPattern = (props: Props) => {
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    card: css`
-      width: 49.5%;
-      display: flex;
-      flex-direction: column;
-    `,
-    rawQueryContainer: css`
-      flex-grow: 1;
-    `,
-    rawQuery: css`
-      background-color: ${theme.colors.background.primary};
-      padding: ${theme.spacing(1)};
-      margin-top: ${theme.spacing(1)};
-    `,
-    spacing: css`
-      margin-bottom: ${theme.spacing(1)};
-    `,
+    card: css({
+      width: '49.5%',
+      display: 'flex',
+      flexDirection: 'column',
+    }),
+    rawQueryContainer: css({
+      flexGrow: 1,
+    }),
+    rawQuery: css({
+      backgroundColor: theme.colors.background.primary,
+      padding: theme.spacing(1),
+      marginTop: theme.spacing(1),
+    }),
+    spacing: css({
+      marginBottom: theme.spacing(1),
+    }),
   };
 };
diff --git a/packages/grafana-prometheus/src/querybuilder/QueryPatternsModal.tsx b/packages/grafana-prometheus/src/querybuilder/QueryPatternsModal.tsx
index 404b0b7a502..ce54fb149df 100644
--- a/packages/grafana-prometheus/src/querybuilder/QueryPatternsModal.tsx
+++ b/packages/grafana-prometheus/src/querybuilder/QueryPatternsModal.tsx
@@ -120,14 +120,14 @@ export const QueryPatternsModal = (props: Props) => {
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    cardsContainer: css`
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      justify-content: space-between;
-    `,
-    spacing: css`
-      margin-bottom: ${theme.spacing(1)};
-    `,
+    cardsContainer: css({
+      display: 'flex',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      justifyContent: 'space-between',
+    }),
+    spacing: css({
+      marginBottom: theme.spacing(1),
+    }),
   };
 };
diff --git a/packages/grafana-prometheus/src/querybuilder/components/LabelFilters.tsx b/packages/grafana-prometheus/src/querybuilder/components/LabelFilters.tsx
index 9364dd83f28..1bb5e393593 100644
--- a/packages/grafana-prometheus/src/querybuilder/components/LabelFilters.tsx
+++ b/packages/grafana-prometheus/src/querybuilder/components/LabelFilters.tsx
@@ -86,9 +86,11 @@ export function LabelFilters({
       {variableEditor ? (
         <InlineFieldRow>
           <div
-            className={cx(css`
-              display: flex;
-            `)}
+            className={cx(
+              css({
+                display: 'flex',
+              })
+            )}
           >
             <InlineLabel
               width={20}
diff --git a/packages/grafana-prometheus/src/querybuilder/components/MetricSelect.tsx b/packages/grafana-prometheus/src/querybuilder/components/MetricSelect.tsx
index f739a487844..f813ea6dd61 100644
--- a/packages/grafana-prometheus/src/querybuilder/components/MetricSelect.tsx
+++ b/packages/grafana-prometheus/src/querybuilder/components/MetricSelect.tsx
@@ -366,53 +366,53 @@ export function MetricSelect({
 }
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  select: css`
-    min-width: 125px;
-  `,
-  highlight: css`
-    label: select__match-highlight;
-    background: inherit;
-    padding: inherit;
-    color: ${theme.colors.warning.contrastText};
-    background-color: ${theme.colors.warning.main};
-  `,
-  customOption: css`
-    padding: 8px;
-    display: flex;
-    justify-content: space-between;
-    cursor: pointer;
-    :hover {
-      background-color: ${theme.colors.emphasize(theme.colors.background.primary, 0.1)};
-    }
-  `,
-  customOptionlabel: css`
-    color: ${theme.colors.text.primary};
-  `,
-  customOptionDesc: css`
-    color: ${theme.colors.text.secondary};
-    font-size: ${theme.typography.size.xs};
-    opacity: 50%;
-  `,
-  focus: css`
-    background-color: ${theme.colors.emphasize(theme.colors.background.primary, 0.1)};
-  `,
-  customOptionWidth: css`
-    min-width: 400px;
-  `,
-  customMenuFooter: css`
-    flex: 0;
-    display: flex;
-    justify-content: space-between;
-    padding: ${theme.spacing(1.5)};
-    border-top: 1px solid ${theme.colors.border.weak};
-    color: ${theme.colors.text.secondary};
-  `,
-  customMenuContainer: css`
-    display: flex;
-    flex-direction: column;
-    background: ${theme.colors.background.primary};
-    box-shadow: ${theme.shadows.z3};
-  `,
+  select: css({
+    minWidth: '125px',
+  }),
+  highlight: css({
+    label: 'select__match-highlight',
+    background: 'inherit',
+    padding: 'inherit',
+    color: theme.colors.warning.contrastText,
+    backgroundColor: theme.colors.warning.main,
+  }),
+  customOption: css({
+    padding: '8px',
+    display: 'flex',
+    justifyContent: 'space-between',
+    cursor: 'pointer',
+    ':hover': {
+      backgroundColor: theme.colors.emphasize(theme.colors.background.primary, 0.1),
+    },
+  }),
+  customOptionlabel: css({
+    color: theme.colors.text.primary,
+  }),
+  customOptionDesc: css({
+    color: theme.colors.text.secondary,
+    fontSize: theme.typography.size.xs,
+    opacity: '50%',
+  }),
+  focus: css({
+    backgroundColor: theme.colors.emphasize(theme.colors.background.primary, 0.1),
+  }),
+  customOptionWidth: css({
+    minWidth: '400px',
+  }),
+  customMenuFooter: css({
+    flex: 0,
+    display: 'flex',
+    justifyContent: 'space-between',
+    padding: theme.spacing(1.5),
+    borderTop: `1px solid ${theme.colors.border.weak}`,
+    color: theme.colors.text.secondary,
+  }),
+  customMenuContainer: css({
+    display: 'flex',
+    flexDirection: 'column',
+    background: theme.colors.background.primary,
+    boxShadow: theme.shadows.z3,
+  }),
 });
 
 export const formatPrometheusLabelFiltersToString = (
diff --git a/packages/grafana-prometheus/src/querybuilder/components/PromQueryCodeEditor.tsx b/packages/grafana-prometheus/src/querybuilder/components/PromQueryCodeEditor.tsx
index 84e5805a4f3..a972a2e435c 100644
--- a/packages/grafana-prometheus/src/querybuilder/components/PromQueryCodeEditor.tsx
+++ b/packages/grafana-prometheus/src/querybuilder/components/PromQueryCodeEditor.tsx
@@ -44,10 +44,10 @@ const getStyles = (theme: GrafanaTheme2) => {
   return {
     // This wrapper styling can be removed after the old PromQueryEditor is removed.
     // This is removing margin bottom on the old legacy inline form styles
-    wrapper: css`
-      .gf-form {
-        margin-bottom: 0;
-      }
-    `,
+    wrapper: css({
+      '.gf-form': {
+        marginBottom: 0,
+      },
+    }),
   };
 };
diff --git a/packages/grafana-prometheus/src/querybuilder/components/metrics-modal/AdditionalSettings.tsx b/packages/grafana-prometheus/src/querybuilder/components/metrics-modal/AdditionalSettings.tsx
index 38caa6e6f49..f9af4e62125 100644
--- a/packages/grafana-prometheus/src/querybuilder/components/metrics-modal/AdditionalSettings.tsx
+++ b/packages/grafana-prometheus/src/querybuilder/components/metrics-modal/AdditionalSettings.tsx
@@ -67,20 +67,20 @@ export function AdditionalSettings(props: AdditionalSettingsProps) {
 
 function getStyles(theme: GrafanaTheme2) {
   return {
-    settingsIcon: css`
-      color: ${theme.colors.text.secondary};
-    `,
-    selectItem: css`
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      padding: 4px 0;
-    `,
-    selectItemLabel: css`
-      margin: 0 0 0 ${theme.spacing(1)};
-      align-self: center;
-      color: ${theme.colors.text.secondary};
-      font-size: 12px;
-    `,
+    settingsIcon: css({
+      color: theme.colors.text.secondary,
+    }),
+    selectItem: css({
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: '4px 0',
+    }),
+    selectItemLabel: css({
+      margin: `0 0 0 ${theme.spacing(1)}`,
+      alignSelf: 'center',
+      color: theme.colors.text.secondary,
+      fontSize: '12px',
+    }),
   };
 }
diff --git a/packages/grafana-prometheus/src/querybuilder/components/metrics-modal/ResultsTable.tsx b/packages/grafana-prometheus/src/querybuilder/components/metrics-modal/ResultsTable.tsx
index ef396c58e21..a9529e01a14 100644
--- a/packages/grafana-prometheus/src/querybuilder/components/metrics-modal/ResultsTable.tsx
+++ b/packages/grafana-prometheus/src/querybuilder/components/metrics-modal/ResultsTable.tsx
@@ -187,67 +187,65 @@ export function ResultsTable(props: ResultsTableProps) {
 
 const getStyles = (theme: GrafanaTheme2, disableTextWrap: boolean) => {
   return {
-    table: css`
-      ${disableTextWrap ? '' : 'table-layout: fixed;'}
-      border-radius: ${theme.shape.radius.default};
-      width: 100%;
-      white-space: ${disableTextWrap ? 'nowrap' : 'normal'};
-      td {
-        padding: ${theme.spacing(1)};
-      }
-
-      td,
-      th {
-        min-width: ${theme.spacing(3)};
-        border-bottom: 1px solid ${theme.colors.border.weak};
-      }
-    `,
-    row: css`
-      label: row;
-      border-bottom: 1px solid ${theme.colors.border.weak}
-      &:last-child {
-        border-bottom: 0;
-      }
-    `,
-    tableHeaderPadding: css`
-      padding: 8px;
-    `,
-    matchHighLight: css`
-      background: inherit;
-      color: ${theme.components.textHighlight.text};
-      background-color: ${theme.components.textHighlight.background};
-    `,
-    nameWidth: css`
-      ${disableTextWrap ? '' : 'width: 37.5%;'}
-    `,
-    nameOverflow: css`
-      ${disableTextWrap ? '' : 'overflow-wrap: anywhere;'}
-    `,
-    typeWidth: css`
-      ${disableTextWrap ? '' : 'width: 15%;'}
-    `,
-    descriptionWidth: css`
-      ${disableTextWrap ? '' : 'width: 35%;'}
-    `,
-    selectButtonWidth: css`
-      ${disableTextWrap ? '' : 'width: 12.5%;'}
-    `,
-    stickyHeader: css`
-      position: sticky;
-      top: 0;
-      background-color: ${theme.colors.background.primary};
-    `,
-    noResults: css`
-      text-align: center;
-      color: ${theme.colors.text.secondary};
-    `,
-    tooltipSpace: css`
-      margin-left: 4px;
-    `,
-    centerButton: css`
-      display: block;
-      margin: auto;
-      border: none;
-    `,
+    table: css({
+      tableLayout: disableTextWrap ? undefined : 'fixed',
+      borderRadius: theme.shape.radius.default,
+      width: '100%',
+      whiteSpace: disableTextWrap ? 'nowrap' : 'normal',
+      td: {
+        padding: theme.spacing(1),
+      },
+      'td,th': {
+        minWidth: theme.spacing(3),
+        borderBottom: `1px solid ${theme.colors.border.weak}`,
+      },
+    }),
+    row: css({
+      label: 'row',
+      borderBottom: `1px solid ${theme.colors.border.weak}`,
+      '&:last-child': {
+        borderBottom: 0,
+      },
+    }),
+    tableHeaderPadding: css({
+      padding: '8px',
+    }),
+    matchHighLight: css({
+      background: 'inherit',
+      color: theme.components.textHighlight.text,
+      backgroundColor: theme.components.textHighlight.background,
+    }),
+    nameWidth: css({
+      width: disableTextWrap ? undefined : '37.5%',
+    }),
+    nameOverflow: css({
+      overflowWrap: disableTextWrap ? undefined : 'anywhere',
+    }),
+    typeWidth: css({
+      width: disableTextWrap ? undefined : '15%',
+    }),
+    descriptionWidth: css({
+      width: disableTextWrap ? undefined : '35%',
+    }),
+    selectButtonWidth: css({
+      width: disableTextWrap ? undefined : '12.5%',
+    }),
+    stickyHeader: css({
+      position: 'sticky',
+      top: 0,
+      backgroundColor: theme.colors.background.primary,
+    }),
+    noResults: css({
+      textAlign: 'center',
+      color: theme.colors.text.secondary,
+    }),
+    tooltipSpace: css({
+      marginLeft: '4px',
+    }),
+    centerButton: css({
+      display: 'block',
+      margin: 'auto',
+      border: 'none',
+    }),
   };
 };
diff --git a/packages/grafana-prometheus/src/querybuilder/components/metrics-modal/styles.ts b/packages/grafana-prometheus/src/querybuilder/components/metrics-modal/styles.ts
index e105530602c..bcc6fa425c7 100644
--- a/packages/grafana-prometheus/src/querybuilder/components/metrics-modal/styles.ts
+++ b/packages/grafana-prometheus/src/querybuilder/components/metrics-modal/styles.ts
@@ -5,98 +5,98 @@ import { GrafanaTheme2 } from '@grafana/data';
 
 export const getStyles = (theme: GrafanaTheme2, disableTextWrap: boolean) => {
   return {
-    modal: css`
-      width: 85vw;
-      ${theme.breakpoints.down('md')} {
-        width: 100%;
-      }
-      ${theme.breakpoints.up('xl')} {
-        width: 60%;
-      }
-    `,
-    inputWrapper: css`
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-    `,
-    inputItemFirst: css`
-      flex-basis: 40%;
-      padding-right: 16px;
-      ${theme.breakpoints.down('md')} {
-        padding-right: 0px;
-        padding-bottom: 16px;
-      }
-    `,
-    inputItem: css`
-      flex-grow: 1;
-      flex-basis: 20%;
-      ${theme.breakpoints.down('md')} {
-        min-width: 100%;
-      }
-    `,
-    selectWrapper: css`
-      margin-bottom: ${theme.spacing(1)};
-    `,
-    resultsAmount: css`
-      color: ${theme.colors.text.secondary};
-      font-size: 0.85rem;
-      padding: 0 0 4px 0;
-    `,
-    resultsData: css`
-      margin: 4px 0 ${theme.spacing(2)} 0;
-    `,
-    resultsDataCount: css`
-      margin: 0;
-    `,
-    resultsDataFiltered: css`
-      color: ${theme.colors.text.secondary};
-      text-align: center;
-      border: solid 1px rgba(204, 204, 220, 0.25);
-      padding: 7px;
-    `,
-    resultsDataFilteredText: css`
-      display: inline;
-      vertical-align: text-top;
-    `,
-    results: css`
-      height: calc(80vh - 310px);
-      overflow-y: scroll;
-    `,
-    resultsFooter: css`
-      margin-top: 24px;
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      align-items: center;
-      position: sticky;
-    `,
-    currentlySelected: css`
-      color: grey;
-      opacity: 75%;
-      font-size: 0.75rem;
-    `,
-    loadingSpinner: css`
-      visibility: hidden;
-    `,
-    visible: css`
-      visibility: visible;
-    `,
-    settingsBtn: css`
-      float: right;
-    `,
-    noBorder: css`
-      border: none;
-    `,
-    resultsPerPageLabel: css`
-      color: ${theme.colors.text.secondary};
-      opacity: 75%;
-      padding-top: 5px;
-      font-size: 0.85rem;
-      margin-right: 8px;
-    `,
-    resultsPerPageWrapper: css`
-      display: flex;
-    `,
+    modal: css({
+      width: '85vw',
+      [theme.breakpoints.down('md')]: {
+        width: '100%',
+      },
+      [theme.breakpoints.up('xl')]: {
+        width: '60%',
+      },
+    }),
+    inputWrapper: css({
+      display: 'flex',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+    }),
+    inputItemFirst: css({
+      flexBasis: '40%',
+      paddingRight: '16px',
+      [theme.breakpoints.down('md')]: {
+        paddingRight: '0px',
+        paddingBottom: '16px',
+      },
+    }),
+    inputItem: css({
+      flexGrow: 1,
+      flexBasis: '20%',
+      [theme.breakpoints.down('md')]: {
+        minWidth: '100%',
+      },
+    }),
+    selectWrapper: css({
+      marginBottom: theme.spacing(1),
+    }),
+    resultsAmount: css({
+      color: theme.colors.text.secondary,
+      fontSize: '0.85rem',
+      padding: '0 0 4px 0',
+    }),
+    resultsData: css({
+      margin: `4px 0 ${theme.spacing(2)} 0`,
+    }),
+    resultsDataCount: css({
+      margin: 0,
+    }),
+    resultsDataFiltered: css({
+      color: theme.colors.text.secondary,
+      textAlign: 'center',
+      border: 'solid 1px rgba(204, 204, 220, 0.25)',
+      padding: '7px',
+    }),
+    resultsDataFilteredText: css({
+      display: 'inline',
+      verticalAlign: 'text-top',
+    }),
+    results: css({
+      height: 'calc(80vh - 310px)',
+      overflowY: 'scroll',
+    }),
+    resultsFooter: css({
+      marginTop: '24px',
+      display: 'flex',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      position: 'sticky',
+    }),
+    currentlySelected: css({
+      color: 'grey',
+      opacity: '75%',
+      fontSize: '0.75rem',
+    }),
+    loadingSpinner: css({
+      visibility: 'hidden',
+    }),
+    visible: css({
+      visibility: 'visible',
+    }),
+    settingsBtn: css({
+      float: 'right',
+    }),
+    noBorder: css({
+      border: 'none',
+    }),
+    resultsPerPageLabel: css({
+      color: theme.colors.text.secondary,
+      opacity: '75%',
+      paddingTop: '5px',
+      fontSize: '0.85rem',
+      marginRight: '8px',
+    }),
+    resultsPerPageWrapper: css({
+      display: 'flex',
+    }),
   };
 };
diff --git a/packages/grafana-prometheus/src/querybuilder/shared/QueryBuilderHints.tsx b/packages/grafana-prometheus/src/querybuilder/shared/QueryBuilderHints.tsx
index 25ed6b8e271..2024bff7753 100644
--- a/packages/grafana-prometheus/src/querybuilder/shared/QueryBuilderHints.tsx
+++ b/packages/grafana-prometheus/src/querybuilder/shared/QueryBuilderHints.tsx
@@ -77,12 +77,12 @@ QueryBuilderHints.displayName = 'QueryBuilderHints';
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    container: css`
-      display: flex;
-      align-items: start;
-    `,
-    hint: css`
-      margin-right: ${theme.spacing(1)};
-    `,
+    container: css({
+      display: 'flex',
+      alignItems: 'start',
+    }),
+    hint: css({
+      marginRight: theme.spacing(1),
+    }),
   };
 };