Chore: Rewrite grafana-sql css using object styles (#87052)

.betterer.results

@@ -723,21 +723,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "6"]
     ],
     "packages/grafana-sql/src/components/query-editor-raw/QueryToolbox.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"]
-    ],
-    "packages/grafana-sql/src/components/query-editor-raw/QueryValidator.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-sql/src/components/query-editor-raw/RawEditor.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, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
     ],
     "packages/grafana-sql/src/components/visual-query-builder/AwesomeQueryBuilder.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]

packages/grafana-sql/src/components/query-editor-raw/QueryToolbox.tsx

@@ -20,31 +20,31 @@ export function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ..
 
   const styles = useMemo(() => {
     return {
-      container: css`
-        border: 1px solid ${theme.colors.border.medium};
-        border-top: none;
-        padding: ${theme.spacing(0.5, 0.5, 0.5, 0.5)};
-        display: flex;
-        flex-grow: 1;
-        justify-content: space-between;
-        font-size: ${theme.typography.bodySmall.fontSize};
-      `,
-      error: css`
-        color: ${theme.colors.error.text};
-        font-size: ${theme.typography.bodySmall.fontSize};
-        font-family: ${theme.typography.fontFamilyMonospace};
-      `,
-      valid: css`
-        color: ${theme.colors.success.text};
-      `,
-      info: css`
-        color: ${theme.colors.text.secondary};
-      `,
-      hint: css`
-        color: ${theme.colors.text.disabled};
-        white-space: nowrap;
-        cursor: help;
-      `,
+      container: css({
+        border: `1px solid ${theme.colors.border.medium}`,
+        borderTop: 'none',
+        padding: theme.spacing(0.5, 0.5, 0.5, 0.5),
+        display: 'flex',
+        flexGrow: 1,
+        justifyContent: 'space-between',
+        fontSize: theme.typography.bodySmall.fontSize,
+      }),
+      error: css({
+        color: theme.colors.error.text,
+        fontSize: theme.typography.bodySmall.fontSize,
+        fontFamily: theme.typography.fontFamilyMonospace,
+      }),
+      valid: css({
+        color: theme.colors.success.text,
+      }),
+      info: css({
+        color: theme.colors.text.secondary,
+      }),
+      hint: css({
+        color: theme.colors.text.disabled,
+        whiteSpace: 'nowrap',
+        cursor: 'help',
+      }),
     };
   }, [theme]);
 

packages/grafana-sql/src/components/query-editor-raw/QueryValidator.tsx

@@ -22,17 +22,17 @@ export function QueryValidator({ db, query, onValidate, range }: QueryValidatorP
 
   const styles = useMemo(() => {
     return {
-      error: css`
-        color: ${theme.colors.error.text};
-        font-size: ${theme.typography.bodySmall.fontSize};
-        font-family: ${theme.typography.fontFamilyMonospace};
-      `,
-      valid: css`
-        color: ${theme.colors.success.text};
-      `,
-      info: css`
-        color: ${theme.colors.text.secondary};
-      `,
+      error: css({
+        color: theme.colors.error.text,
+        fontSize: theme.typography.bodySmall.fontSize,
+        fontFamily: theme.typography.fontFamilyMonospace,
+      }),
+      valid: css({
+        color: theme.colors.success.text,
+      }),
+      info: css({
+        color: theme.colors.text.secondary,
+      }),
     };
   }, [theme]);
 

packages/grafana-sql/src/components/query-editor-raw/RawEditor.tsx

@@ -114,13 +114,13 @@ export function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryTo
 
 function getStyles(theme: GrafanaTheme2) {
   return {
-    modal: css`
-      width: 95vw;
-      height: 95vh;
-    `,
-    modalContent: css`
-      height: 100%;
-      padding-top: 0;
-    `,
+    modal: css({
+      width: '95vw',
+      height: '95vh',
+    }),
+    modalContent: css({
+      height: '100%',
+      paddingTop: 0,
+    }),
   };
 }