From 55673e2f412fd8aa5015420495720eac832a4c8e Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Mon, 28 Oct 2024 13:47:46 +0000
Subject: [PATCH] Chore: Add emotion object syntax rule to eslint (#95429)

add object syntax rule to eslint
---
 .betterer.ts                                         |  1 -
 .eslintrc                                            |  1 +
 packages/grafana-ui/.eslintrc                        |  1 -
 .../app/angular/components/PageHeader/PageHeader.tsx | 12 ++++++------
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/.betterer.ts b/.betterer.ts
index 305b6c35961..ad33da4affc 100644
--- a/.betterer.ts
+++ b/.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': [
diff --git a/.eslintrc b/.eslintrc
index b34a9c242e0..2109968b124 100644
--- a/.eslintrc
+++ b/.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",
diff --git a/packages/grafana-ui/.eslintrc b/packages/grafana-ui/.eslintrc
index 13011848702..0dbcbe8022b 100644
--- a/packages/grafana-ui/.eslintrc
+++ b/packages/grafana-ui/.eslintrc
@@ -1,6 +1,5 @@
 {
   "rules": {
-    "@emotion/syntax-preference": [2, "object"],
     "no-restricted-imports": [
       "error",
       {
diff --git a/public/app/angular/components/PageHeader/PageHeader.tsx b/public/app/angular/components/PageHeader/PageHeader.tsx
index 176eacbb0ca..a56301c3121 100644
--- a/public/app/angular/components/PageHeader/PageHeader.tsx
+++ b/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,
+  }),
 });