chore: canvas cleanup betterer styles object notation edition (#76315)

Co-authored-by: drew08t <drew08@gmail.com>

.betterer.results

@@ -2765,43 +2765,8 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "3"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "4"]
     ],
-    "public/app/features/canvas/elements/droneFront.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
-    "public/app/features/canvas/elements/droneSide.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
-    "public/app/features/canvas/elements/droneTop.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"]
-    ],
     "public/app/features/canvas/elements/ellipse.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
-    "public/app/features/canvas/elements/icon.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
-    "public/app/features/canvas/elements/metricValue.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"]
-    ],
-    "public/app/features/canvas/elements/server/server.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"]
-    ],
-    "public/app/features/canvas/elements/text.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"]
-    ],
-    "public/app/features/canvas/elements/windTurbine.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
     ],
     "public/app/features/canvas/runtime/element.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@@ -7005,77 +6970,24 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
-    "public/app/plugins/panel/canvas/components/CanvasContextMenu.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
-    "public/app/plugins/panel/canvas/components/CanvasTooltip.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
-    "public/app/plugins/panel/canvas/components/SetBackground.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
-    "public/app/plugins/panel/canvas/components/connections/ConnectionAnchors.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"]
-    ],
-    "public/app/plugins/panel/canvas/components/connections/ConnectionSVG.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
-    "public/app/plugins/panel/canvas/editor/connectionEditor.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
     "public/app/plugins/panel/canvas/editor/element/APIEditor.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
-    "public/app/plugins/panel/canvas/editor/element/ConstraintSelectionBox.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"]
-    ],
     "public/app/plugins/panel/canvas/editor/element/PlacementEditor.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
-    "public/app/plugins/panel/canvas/editor/element/QuickPositioning.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
     "public/app/plugins/panel/canvas/editor/element/elementEditor.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
-    "public/app/plugins/panel/canvas/editor/inline/InlineEdit.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"]
-    ],
     "public/app/plugins/panel/canvas/editor/inline/InlineEditBody.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
       [0, 0, 0, "Do not use any type assertions.", "2"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "3"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "3"]
-      [0, 0, 0, "Styles should be written using objects.", "4"]
     ],
     "public/app/plugins/panel/canvas/editor/layer/TreeNavigationEditor.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
-    "public/app/plugins/panel/canvas/editor/layer/TreeNodeTitle.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"]
     ],
     "public/app/plugins/panel/canvas/editor/layer/layerEditor.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],

public/app/features/canvas/elements/droneFront.tsx

@@ -118,7 +118,7 @@ export const droneFrontItem: CanvasElementItem = {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  droneFront: css`
+  droneFront: css({
-    transition: transform 0.4s;
+    transition: 'transform 0.4s',
-  `,
+  }),
 });

public/app/features/canvas/elements/droneSide.tsx

@@ -117,7 +117,7 @@ export const droneSideItem: CanvasElementItem = {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  droneSide: css`
+  droneSide: css({
-    transition: transform 0.4s;
+    transition: 'transform 0.4s',
-  `,
+  }),
 });

public/app/features/canvas/elements/droneTop.tsx

@@ -156,23 +156,23 @@ export const droneTopItem: CanvasElementItem = {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  propeller: css`
+  propeller: css({
-    transform-origin: 50% 50%;
+    transformOrigin: '50% 50%',
-    transform-box: fill-box;
+    transformBox: 'fill-box',
-    display: block;
+    display: 'block',
-    @keyframes spin {
+    '@keyframes spin': {
-      from {
+      from: {
-        transform: rotate(0deg);
+        transform: 'rotate(0deg)',
-      }
+      },
-      to {
+      to: {
-        transform: rotate(360deg);
+        transform: 'rotate(360deg)',
-      }
+      },
-    }
+    },
-  `,
+  }),
-  propellerCW: css`
+  propellerCW: css({
-    animation-direction: normal;
+    animationDirection: 'normal',
-  `,
+  }),
-  propellerCCW: css`
+  propellerCCW: css({
-    animation-direction: reverse;
+    animationDirection: 'reverse',
-  `,
+  }),
 });

public/app/features/canvas/elements/ellipse.tsx

@@ -2,7 +2,6 @@ import { css } from '@emotion/css';
 import React, { PureComponent } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { stylesFactory } from '@grafana/ui';
 import { config } from 'app/core/config';
 import { DimensionContext } from 'app/features/dimensions/context';
 import { ColorDimensionEditor } from 'app/features/dimensions/editors/ColorDimensionEditor';
@@ -23,26 +22,27 @@ class EllipseDisplay extends PureComponent<CanvasElementProps<EllipseConfig, Ell
   }
 }
 
-const getStyles = stylesFactory((theme: GrafanaTheme2, data) => ({
+const getStyles = (theme: GrafanaTheme2, data: any) => ({
-  container: css`
+  container: css({
-    display: table;
+    display: 'table',
-    position: absolute;
+    position: 'absolute',
-    top: 50%;
+    top: '50%',
-    transform: translateY(-50%);
+    transform: 'translateY(-50%)',
-    width: 100%;
+    width: '100%',
-    height: 100%;
+    height: '100%',
-    background-color: ${data?.backgroundColor};
+    backgroundColor: data?.backgroundColor,
-    border: ${data?.width}px solid ${data?.borderColor};
+    border: `${data?.width}px solid ${data?.borderColor}`,
-    border-radius: 50%;
+    // eslint-disable-next-line @grafana/no-border-radius-literal
-  `,
+    borderRadius: '50%',
-  span: css`
+  }),
-    display: table-cell;
+  span: css({
-    vertical-align: ${data?.valign};
+    display: 'table-cell',
-    text-align: ${data?.align};
+    verticalAlign: data?.valign,
-    font-size: ${data?.size}px;
+    textAlign: data?.align,
-    color: ${data?.color};
+    fontSize: `${data?.size}px`,
-  `,
+    color: data?.color,
-}));
+  }),
+});
 
 export const ellipseItem: CanvasElementItem<EllipseConfig, EllipseData> = {
   id: 'ellipse',

public/app/features/canvas/elements/icon.tsx

@@ -25,11 +25,11 @@ interface IconData {
 }
 
 // When a stoke is defined, we want the path to be in page units
-const svgStrokePathClass = css`
+const svgStrokePathClass = css({
-  path {
+  path: {
-    vector-effect: non-scaling-stroke;
+    vectorEffect: 'non-scaling-stroke',
-  }
+  },
-`;
+});
 
 export function IconDisplay(props: CanvasElementProps) {
   const { data } = props;

public/app/features/canvas/elements/metricValue.tsx

@@ -111,26 +111,26 @@ const MetricValueEdit = (props: CanvasElementProps<TextConfig, TextData>) => {
 };
 
 const getStyles = (data: TextData | undefined) => (theme: GrafanaTheme2) => ({
-  container: css`
+  container: css({
-    position: absolute;
+    position: 'absolute',
-    height: 100%;
+    height: '100%',
-    width: 100%;
+    width: '100%',
-    display: table;
+    display: 'table',
-  `,
+  }),
-  inlineEditorContainer: css`
+  inlineEditorContainer: css({
-    height: 100%;
+    height: '100%',
-    width: 100%;
+    width: '100%',
-    display: flex;
+    display: 'flex',
-    align-items: center;
+    alignItems: 'center',
-    padding: 10px;
+    padding: theme.spacing(1),
-  `,
+  }),
-  span: css`
+  span: css({
-    display: table-cell;
+    display: 'table-cell',
-    vertical-align: ${data?.valign};
+    verticalAlign: data?.valign,
-    text-align: ${data?.align};
+    textAlign: data?.align,
-    font-size: ${data?.size}px;
+    fontSize: `${data?.size}px`,
-    color: ${data?.color};
+    color: data?.color,
-  `,
+  }),
 });
 
 export const metricValueItem: CanvasElementItem<TextConfig, TextData> = {

public/app/features/canvas/elements/server/server.tsx

@@ -147,36 +147,36 @@ export const serverItem: CanvasElementItem<ServerConfig, ServerData> = {
 };
 
 export const getServerStyles = (data: ServerData | undefined) => (theme: GrafanaTheme2) => ({
-  bulb: css`
+  bulb: css({
-    @keyframes blink {
+    '@keyframes blink': {
-      0% {
+      '0%': {
-        fill-opacity: 0;
+        fillOpacity: 0,
-      }
+      },
-      50% {
+      '50%': {
-        fill-opacity: 1;
+        fillOpacity: 1,
-      }
+      },
-      100% {
+      '100%': {
-        fill-opacity: 0;
+        fillOpacity: 0,
-      }
+      },
-    }
+    },
-  `,
+  }),
-  server: css`
+  server: css({
-    fill: ${data?.statusColor ?? 'transparent'};
+    fill: data?.statusColor ?? 'transparent',
-  `,
+  }),
-  circle: css`
+  circle: css({
-    animation: blink ${data?.blinkRate ? 1 / data.blinkRate : 0}s infinite step-end;
+    animation: `blink ${data?.blinkRate ? 1 / data.blinkRate : 0}s infinite step-end`,
-    fill: ${data?.bulbColor};
+    fill: data?.bulbColor,
-    stroke: none;
+    stroke: 'none',
-  `,
+  }),
-  circleBack: css`
+  circleBack: css({
-    fill: ${outlineColor};
+    fill: outlineColor,
-    stroke: none;
+    stroke: 'none',
-    opacity: 1;
+    opacity: 1,
-  `,
+  }),
-  outline: css`
+  outline: css({
-    stroke: ${outlineColor};
+    stroke: outlineColor,
-    stroke-linecap: round;
+    strokeLinecap: 'round',
-    stroke-linejoin: round;
+    strokeLinejoin: 'round',
-    stroke-width: 4px;
+    strokeWidth: '4px',
-  `,
+  }),
 });

public/app/features/canvas/elements/text.tsx

@@ -95,26 +95,26 @@ const TextEdit = (props: CanvasElementProps<TextConfig, TextData>) => {
 };
 
 const getStyles = (data: TextData | undefined) => (theme: GrafanaTheme2) => ({
-  container: css`
+  container: css({
-    position: absolute;
+    position: 'absolute',
-    height: 100%;
+    height: '100%',
-    width: 100%;
+    width: '100%',
-    display: table;
+    display: 'table',
-  `,
+  }),
-  inlineEditorContainer: css`
+  inlineEditorContainer: css({
-    height: 100%;
+    height: '100%',
-    width: 100%;
+    width: '100%',
-    display: flex;
+    display: 'flex',
-    align-items: center;
+    alignItems: 'center',
-    padding: 10px;
+    padding: theme.spacing(1),
-  `,
+  }),
-  span: css`
+  span: css({
-    display: table-cell;
+    display: 'table-cell',
-    vertical-align: ${data?.valign};
+    verticalAlign: data?.valign,
-    text-align: ${data?.align};
+    textAlign: data?.align,
-    font-size: ${data?.size}px;
+    fontSize: `${data?.size}px`,
-    color: ${data?.color};
+    color: data?.color,
-  `,
+  }),
 });
 
 export const textItem: CanvasElementItem<TextConfig, TextData> = {

public/app/features/canvas/elements/windTurbine.tsx

@@ -113,17 +113,16 @@ export const windTurbineItem: CanvasElementItem = {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  blade: css`
+  blade: css({
-    @keyframes spin {
+    transformOrigin: '94.663px 94.663px',
-      from {
+    transform: 'rotate(15deg)',
-        transform: rotate(0deg);
+    '@keyframes spin': {
-      }
+      from: {
-      to {
+        transform: 'rotate(0deg)',
-        transform: rotate(360deg);
+      },
-      }
+      to: {
-    }
+        transform: 'rotate(360deg)',
-
+      },
-    transform-origin: 94.663px 94.663px;
+    },
-    transform: rotate(15deg);
+  }),
-  `,
 });

public/app/plugins/panel/canvas/components/CanvasContextMenu.tsx

@@ -244,7 +244,7 @@ export const CanvasContextMenu = ({ scene, panel }: Props) => {
 };
 
 const getStyles = () => ({
-  menuItem: css`
+  menuItem: css({
-    max-width: 200px;
+    maxWidth: '200px',
-  `,
+  }),
 });

public/app/plugins/panel/canvas/components/CanvasTooltip.tsx

@@ -73,8 +73,8 @@ export const CanvasTooltip = ({ scene }: Props) => {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  wrapper: css`
+  wrapper: css({
-    margin-top: 20px;
+    marginTop: '20px',
-    background: ${theme.colors.background.primary};
+    background: theme.colors.background.primary,
-  `,
+  }),
 });

public/app/plugins/panel/canvas/components/SetBackground.tsx

@@ -59,9 +59,9 @@ export function SetBackground({ onClose, scene, anchorPoint }: Props) {
 }
 
 const getStyles = (theme: GrafanaTheme2, anchorPoint: AnchorPoint) => ({
-  portalWrapper: css`
+  portalWrapper: css({
-    width: 315px;
+    width: '315px',
-    height: 445px;
+    height: '445px',
-    transform: translate(${anchorPoint.x}px, ${anchorPoint.y - 200}px);
+    transform: `translate(${anchorPoint.x}px, ${anchorPoint.y - 200}px)`,
-  `,
+  }),
 });

public/app/plugins/panel/canvas/components/connections/ConnectionAnchors.tsx

@@ -114,36 +114,35 @@ export const ConnectionAnchors = ({ setRef, handleMouseLeave }: Props) => {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  root: css`
+  root: css({
-    position: absolute;
+    position: 'absolute',
-    display: none;
+    display: 'none',
-  `,
+  }),
-  mouseoutDiv: css`
+  mouseoutDiv: css({
-    position: absolute;
+    position: 'absolute',
-    margin: -30px;
+    margin: '-30px',
-    width: calc(100% + 60px);
+    width: 'calc(100% + 60px)',
-    height: calc(100% + 60px);
+    height: 'calc(100% + 60px)',
-  `,
+  }),
-  anchor: css`
+  anchor: css({
-    padding: ${ANCHOR_PADDING}px;
+    padding: `${ANCHOR_PADDING}px`,
-    position: absolute;
+    position: 'absolute',
-    cursor: cursor;
+    cursor: 'cursor',
-    width: calc(5px + 2 * ${ANCHOR_PADDING}px);
+    width: `calc(5px + 2 * ${ANCHOR_PADDING}px)`,
-    height: calc(5px + 2 * ${ANCHOR_PADDING}px);
+    height: `calc(5px + 2 * ${ANCHOR_PADDING}px)`,
-    z-index: 100;
+    zIndex: 100,
-    pointer-events: auto !important;
+    pointerEvents: 'auto',
-  `,
+  }),
-  highlightElement: css`
+  highlightElement: css({
-    background-color: #00ff00;
+    backgroundColor: '#00ff00',
-    opacity: 0.3;
+    opacity: 0.3,
-    position: absolute;
+    position: 'absolute',
-    cursor: cursor;
+    cursor: 'cursor',
-    position: absolute;
+    pointerEvents: 'auto',
-    pointer-events: auto;
+    width: '16px',
-    width: 16px;
+    height: '16px',
-    height: 16px;
+    borderRadius: theme.shape.radius.circle,
-    border-radius: ${theme.shape.radius.circle};
+    display: 'none',
-    display: none;
+    zIndex: 110,
-    z-index: 110;
+  }),
-  `,
 });

public/app/plugins/panel/canvas/components/connections/ConnectionSVG.tsx

@@ -231,19 +231,19 @@ export const ConnectionSVG = ({ setSVGRef, setLineRef, scene }: Props) => {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  editorSVG: css`
+  editorSVG: css({
-    position: absolute;
+    position: 'absolute',
-    pointer-events: none;
+    pointerEvents: 'none',
-    width: 100%;
+    width: '100%',
-    height: 100%;
+    height: '100%',
-    z-index: 1000;
+    zIndex: 1000,
-    display: none;
+    display: 'none',
-  `,
+  }),
-  connection: css`
+  connection: css({
-    position: absolute;
+    position: 'absolute',
-    width: 100%;
+    width: '100%',
-    height: 100%;
+    height: '100%',
-    z-index: 1000;
+    zIndex: 1000,
-    pointer-events: none;
+    pointerEvents: 'none',
-  `,
+  }),
 });

public/app/plugins/panel/canvas/editor/connectionEditor.tsx

@@ -24,9 +24,8 @@ export function getConnectionEditor(opts: CanvasConnectionEditorOptions): Nested
       getValue: (path: string) => {
         return lodashGet(opts.connection.info, path);
       },
-      // TODO: Fix this any (maybe a dimension supplier?)
+      // TODO: Fix this unknown (maybe a dimension supplier?)
-      onChange: (path: string, value: any) => {
+      onChange: (path: string, value: unknown) => {
-        console.log(value, typeof value);
         let options = opts.connection.info;
         options = setOptionImmutably(options, path, value);
         opts.scene.connections.onChange(opts.connection, options);

public/app/plugins/panel/canvas/editor/element/ConstraintSelectionBox.tsx

@@ -141,48 +141,84 @@ const getStyles = (currentConstraints: Constraint) => (theme: GrafanaTheme2) =>
   const selectionBoxColor = theme.isDark ? '#ffffff' : '#000000';
 
   return {
-    constraintHover: css`
+    constraintHover: css({
-      &:hover {
+      '&:hover': {
-        fill: ${HOVER_COLOR};
+        fill: HOVER_COLOR,
-        fill-opacity: ${HOVER_OPACITY};
+        fillOpacity: HOVER_OPACITY,
-      }
+      },
-    `,
+    }),
-    topConstraint: css`
+    topConstraint: css({
-      ${currentConstraints.vertical === VerticalConstraint.Top ||
+      ...(currentConstraints.vertical === VerticalConstraint.Top ||
       currentConstraints.vertical === VerticalConstraint.TopBottom
-        ? `width: 92pt; x: 1085; fill: ${SELECTED_COLOR};`
+        ? {
-        : `fill: ${selectionBoxColor};`}
+            width: '92pt',
-    `,
+            x: '1085',
-    bottomConstraint: css`
+            fill: SELECTED_COLOR,
-      ${currentConstraints.vertical === VerticalConstraint.Bottom ||
+          }
+        : {
+            fill: selectionBoxColor,
+          }),
+    }),
+    bottomConstraint: css({
+      ...(currentConstraints.vertical === VerticalConstraint.Bottom ||
       currentConstraints.vertical === VerticalConstraint.TopBottom
-        ? `width: 92pt; x: 1085; fill: ${SELECTED_COLOR};`
+        ? {
-        : `fill: ${selectionBoxColor};`}
+            width: '92pt',
-    `,
+            x: '1085',
-    leftConstraint: css`
+            fill: SELECTED_COLOR,
-      ${currentConstraints.horizontal === HorizontalConstraint.Left ||
+          }
+        : {
+            fill: selectionBoxColor,
+          }),
+    }),
+    leftConstraint: css({
+      ...(currentConstraints.horizontal === HorizontalConstraint.Left ||
       currentConstraints.horizontal === HorizontalConstraint.LeftRight
-        ? `height: 92pt; y: 1014; fill: ${SELECTED_COLOR};`
+        ? {
-        : `fill: ${selectionBoxColor};`}
+            height: '92pt',
-    `,
+            y: '1014',
-    rightConstraint: css`
+            fill: SELECTED_COLOR,
-      ${currentConstraints.horizontal === HorizontalConstraint.Right ||
+          }
+        : {
+            fill: selectionBoxColor,
+          }),
+    }),
+    rightConstraint: css({
+      ...(currentConstraints.horizontal === HorizontalConstraint.Right ||
       currentConstraints.horizontal === HorizontalConstraint.LeftRight
-        ? `height: 92pt; y: 1014; fill: ${SELECTED_COLOR};`
+        ? {
-        : `fill: ${selectionBoxColor};`}
+            height: '92pt',
-    `,
+            y: '1014',
-    horizontalCenterConstraint: css`
+            fill: SELECTED_COLOR,
-      ${currentConstraints.horizontal === HorizontalConstraint.Center
+          }
-        ? `height: 92pt; y: 1014; fill: ${SELECTED_COLOR};`
+        : {
-        : `fill: ${selectionBoxColor};`}
+            fill: selectionBoxColor,
-    `,
+          }),
-    verticalCenterConstraint: css`
+    }),
-      ${currentConstraints.vertical === VerticalConstraint.Center
+    horizontalCenterConstraint: css({
-        ? `width: 92pt; x: 1085; fill: ${SELECTED_COLOR};`
+      ...(currentConstraints.horizontal === HorizontalConstraint.Center
-        : `fill: ${selectionBoxColor};`}
+        ? {
-    `,
+            height: '92pt',
-    box: css`
+            y: '1014',
-      fill: ${selectionBoxColor};
+            fill: SELECTED_COLOR,
-    `,
+          }
+        : {
+            fill: selectionBoxColor,
+          }),
+    }),
+    verticalCenterConstraint: css({
+      ...(currentConstraints.vertical === VerticalConstraint.Center
+        ? {
+            width: '92pt',
+            x: '1085',
+            fill: SELECTED_COLOR,
+          }
+        : {
+            fill: selectionBoxColor,
+          }),
+    }),
+    box: css({
+      fill: selectionBoxColor,
+    }),
   };
 };

public/app/plugins/panel/canvas/editor/element/QuickPositioning.tsx

@@ -110,13 +110,13 @@ export const QuickPositioning = ({ onPositionChange, element, settings }: Props)
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  buttonGroup: css`
+  buttonGroup: css({
-    display: flex;
+    display: 'flex',
-    flex-wrap: wrap;
+    flexWrap: 'wrap',
-    padding: 12px 0 12px 0;
+    padding: '12px 0 12px 0',
-  `,
+  }),
-  button: css`
+  button: css({
-    margin-left: 5px;
+    marginLeft: '5px',
-    margin-right: 5px;
+    marginRight: '5px',
-  `,
+  }),
 });

public/app/plugins/panel/canvas/editor/inline/InlineEdit.tsx

@@ -106,43 +106,43 @@ export function InlineEdit({ onClose, id, scene }: Props) {
 }
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  inlineEditorContainer: css`
+  inlineEditorContainer: css({
-    display: flex;
+    display: 'flex',
-    flex-direction: column;
+    flexDirection: 'column',
-    background: ${theme.components.panel.background};
+    background: theme.components.panel.background,
-    border: 1px solid ${theme.colors.border.weak};
+    border: `1px solid ${theme.colors.border.weak}`,
-    box-shadow: ${theme.shadows.z3};
+    boxShadow: theme.shadows.z3,
-    z-index: 1000;
+    zIndex: 1000,
-    opacity: 1;
+    opacity: 1,
-    min-width: 400px;
+    minWidth: '400px',
-  `,
+  }),
-  draggableWrapper: css`
+  draggableWrapper: css({
-    width: 0;
+    width: 0,
-    height: 0;
+    height: 0,
-  `,
+  }),
-  inlineEditorHeader: css`
+  inlineEditorHeader: css({
-    display: flex;
+    display: 'flex',
-    align-items: center;
+    alignItems: 'center',
-    justify-content: center;
+    justifyContent: 'center',
-    background: ${theme.colors.background.canvas};
+    background: theme.colors.background.canvas,
-    border-bottom: 1px solid ${theme.colors.border.weak};
+    borderBottom: `1px solid ${theme.colors.border.weak}`,
-    height: 40px;
+    height: '40px',
-    cursor: move;
+    cursor: 'move',
-  `,
+  }),
-  inlineEditorContent: css`
+  inlineEditorContent: css({
-    white-space: pre-wrap;
+    whiteSpace: 'pre-wrap',
-    padding: 10px;
+    padding: '10px',
-  `,
+  }),
-  inlineEditorClose: css`
+  inlineEditorClose: css({
-    margin-left: auto;
+    marginLeft: 'auto',
-  `,
+  }),
-  placeholder: css`
+  placeholder: css({
-    width: 24px;
+    width: '24px',
-    height: 24px;
+    height: '24px',
-    visibility: hidden;
+    visibility: 'hidden',
-    margin-right: auto;
+    marginRight: 'auto',
-  `,
+  }),
-  inlineEditorContentWrapper: css`
+  inlineEditorContentWrapper: css({
-    overflow: scroll;
+    overflow: 'scroll',
-  `,
+  }),
 });

public/app/plugins/panel/canvas/editor/inline/InlineEditBody.tsx

@@ -151,8 +151,8 @@ function getOptionsPaneCategoryDescriptor<T = any>(
 }
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  selectElement: css`
+  selectElement: css({
-    color: ${theme.colors.text.secondary};
+    color: theme.colors.text.secondary,
-    padding: ${theme.spacing(2)};
+    padding: theme.spacing(2),
-  `,
+  }),
 });

public/app/plugins/panel/canvas/editor/layer/TreeNavigationEditor.tsx

@@ -167,8 +167,8 @@ export const TreeNavigationEditor = ({ item }: StandardEditorProps<any, TreeView
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  addLayerButton: css`
+  addLayerButton: css({
-    margin-left: 18px;
+    marginLeft: '18px',
-    min-width: 150px;
+    minWidth: '150px',
-  `,
+  }),
 });

public/app/plugins/panel/canvas/editor/layer/TreeNodeTitle.tsx

@@ -92,29 +92,29 @@ export const TreeNodeTitle = ({ settings, nodeData, setAllowSelection }: Props)
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  actionButtonsWrapper: css`
+  actionButtonsWrapper: css({
-    display: flex;
+    display: 'flex',
-    align-items: flex-end;
+    alignItems: 'flex-end',
-  `,
+  }),
-  actionIcon: css`
+  actionIcon: css({
-    color: ${theme.colors.text.secondary};
+    color: theme.colors.text.secondary,
-    cursor: pointer;
+    cursor: 'pointer',
-    &:hover {
+    '&:hover': {
-      color: ${theme.colors.text.primary};
+      color: theme.colors.text.primary,
-    }
+    },
-  `,
+  }),
-  textWrapper: css`
+  textWrapper: css({
-    display: flex;
+    display: 'flex',
-    align-items: center;
+    alignItems: 'center',
-    flex-grow: 1;
+    flexGrow: 1,
-    overflow: hidden;
+    overflow: 'hidden',
-    margin-right: ${theme.spacing(1)};
+    marginRight: theme.spacing(1),
-  `,
+  }),
-  layerName: css`
+  layerName: css({
-    font-weight: ${theme.typography.fontWeightMedium};
+    fontWeight: theme.typography.fontWeightMedium,
-    color: ${theme.colors.primary.text};
+    color: theme.colors.primary.text,
-    cursor: pointer;
+    cursor: 'pointer',
-    overflow: hidden;
+    overflow: 'hidden',
-    margin-left: ${theme.spacing(0.5)};
+    marginLeft: theme.spacing(0.5),
-  `,
+  }),
 });