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, "\'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"]
     ],
     "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`
+      container: css({
-        border: 1px solid ${theme.colors.border.medium};
+        border: `1px solid ${theme.colors.border.medium}`,
-        border-top: none;
+        borderTop: 'none',
-        padding: ${theme.spacing(0.5, 0.5, 0.5, 0.5)};
+        padding: theme.spacing(0.5, 0.5, 0.5, 0.5),
-        display: flex;
+        display: 'flex',
-        flex-grow: 1;
+        flexGrow: 1,
-        justify-content: space-between;
+        justifyContent: 'space-between',
-        font-size: ${theme.typography.bodySmall.fontSize};
+        fontSize: theme.typography.bodySmall.fontSize,
-      `,
+      }),
-      error: css`
+      error: css({
-        color: ${theme.colors.error.text};
+        color: theme.colors.error.text,
-        font-size: ${theme.typography.bodySmall.fontSize};
+        fontSize: theme.typography.bodySmall.fontSize,
-        font-family: ${theme.typography.fontFamilyMonospace};
+        fontFamily: theme.typography.fontFamilyMonospace,
-      `,
+      }),
-      valid: css`
+      valid: css({
-        color: ${theme.colors.success.text};
+        color: theme.colors.success.text,
-      `,
+      }),
-      info: css`
+      info: css({
-        color: ${theme.colors.text.secondary};
+        color: theme.colors.text.secondary,
-      `,
+      }),
-      hint: css`
+      hint: css({
-        color: ${theme.colors.text.disabled};
+        color: theme.colors.text.disabled,
-        white-space: nowrap;
+        whiteSpace: 'nowrap',
-        cursor: help;
+        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`
+      error: css({
-        color: ${theme.colors.error.text};
+        color: theme.colors.error.text,
-        font-size: ${theme.typography.bodySmall.fontSize};
+        fontSize: theme.typography.bodySmall.fontSize,
-        font-family: ${theme.typography.fontFamilyMonospace};
+        fontFamily: theme.typography.fontFamilyMonospace,
-      `,
+      }),
-      valid: css`
+      valid: css({
-        color: ${theme.colors.success.text};
+        color: theme.colors.success.text,
-      `,
+      }),
-      info: css`
+      info: css({
-        color: ${theme.colors.text.secondary};
+        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`
+    modal: css({
-      width: 95vw;
+      width: '95vw',
-      height: 95vh;
+      height: '95vh',
-    `,
+    }),
-    modalContent: css`
+    modalContent: css({
-      height: 100%;
+      height: '100%',
-      padding-top: 0;
+      paddingTop: 0,
-    `,
+    }),
   };
 }