Chore: Add emotion object syntax rule to eslint (#95429)

add object syntax rule to eslint

.betterer.ts

@@ -89,7 +89,6 @@ function countEslintErrors() {
     const baseConfig = await cli.calculateConfigForFile(filePaths[0]);
 
     const baseRules: Partial<Linter.RulesRecord> = {
-      '@emotion/syntax-preference': [2, 'object'],
       '@typescript-eslint/no-explicit-any': 'error',
       '@grafana/no-aria-label-selectors': 'error',
       'no-restricted-imports': [

.eslintrc

@@ -18,6 +18,7 @@
     "import/external-module-folders": ["node_modules", ".yarn"],
   },
   "rules": {
+    "@emotion/syntax-preference": [2, "object"],
     "@grafana/no-border-radius-literal": "error",
     "@grafana/no-unreduced-motion": "error",
     "react/prop-types": "off",

packages/grafana-ui/.eslintrc

@@ -1,6 +1,5 @@
 {
   "rules": {
-    "@emotion/syntax-preference": [2, "object"],
     "no-restricted-imports": [
       "error",
       {

public/app/angular/components/PageHeader/PageHeader.tsx

@@ -139,9 +139,9 @@ function renderHeaderTitle(title: string, highlightText: NavModelItem['highlight
       {highlightText && (
         <ProBadge
           text={highlightText}
-          className={css`
-            vertical-align: middle;
-          `}
+          className={css({
+            verticalAlign: 'middle',
+          })}
         />
       )}
     </h1>
@@ -159,7 +159,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     flexDirection: 'column',
     gap: theme.spacing(1),
   }),
-  headerCanvas: css`
-    background: ${theme.colors.background.canvas};
-  `,
+  headerCanvas: css({
+    background: theme.colors.background.canvas,
+  }),
 });